한 줄 요약 - 최근 3주 사이 브라우저들이 정식으로 더한 실용 CSS 기능을 모았습니다. 칸 사이에 구분선 긋기, 입력 내용에 맞춰 스스로 커지는 폼, 도형 둘레로 흐르는 텍스트, 잘린 글자를 펼쳐 보여주기. 공통점은 예전엔 자바스크립트나 꼼수로 메우던 일을 CSS가 직접 한다는 거예요.
1. Gap Decorations - 그리드 칸 사이에 구분선 (Chrome 149)
그리드/플렉스의 gap(칸 사이 여백) 한가운데에 column-rule(세로선)과 row-rule(가로선)로 구분선을 그립니다. border처럼 칸 크기를 늘리지 않아 레이아웃이 1px도 안 밀려요. 그동안 가짜 요소나 배경 줄무늬로 흉내 내던 칸 사이 선을 깔끔하게 대체합니다. 아래 관련 데모에서 두께/색/점선/들여쓰기를 직접 만져볼 수 있어요.
2. field-sizing - 입력 내용 따라 자동으로 커지는 폼 (Firefox 152)
textarea나 input에 field-sizing: content 한 줄을 주면 입력 길이에 맞춰 칸이 스스로 늘어납니다. 입력할 때마다 scrollHeight(스크롤 없이 다 보이려면 필요한 높이)를 재서 height를 맞추던 자바스크립트가 통째로 사라져요. Firefox 152가 추가되며 주요 브라우저 지원이 넓어졌습니다. max-height로 상한을 같이 주는 게 포인트.
3. shape-outside가 자유 도형까지 (Chrome 149)
float 요소의 shape-outside가 path()/shape()/rect()/xywh() 함수를 받게 됐습니다. 텍스트를 원이나 곡선 같은 임의 도형 둘레로 자연스럽게 흘려보낼 수 있어, 매거진 같은 본문 레이아웃이 CSS만으로 가능해졌어요.
4. 잘린 글자를 상호작용할 때 펼치기 (Chrome 149)
text-overflow: ellipsis로 말줄임표 처리된 텍스트가, 사용자가 포커스하거나 선택할 때 잠깐 clip 모드로 바뀌어 가려졌던 글자를 드러냅니다. 좁은 칸의 긴 라벨을 접근 가능하게 만들어줘요.
정리
네 가지 모두 JS로 하던 일을 브라우저가 직접 하는 흐름의 연장입니다. 단, Gap Decorations와 shape-outside 함수, text-overflow 펼치기는 아직 Chrome 계열 위주라 @supports로 지원을 감지하고 폴백을 두는 습관이 필요합니다.