내년 웹 표준에 들어올 10가지 CSS 기능 미리보기

핵심 요약

• 주요 브라우저 벤더들이 참여한 Interop 프로젝트는 웹 표준 브라우저 호환성을 높이는 데 성공했으며, 포함된 기능들이 1년 내 모든 브라우저에서 거의 100% 지원되는 수준에 도달한다.
• Interop 2027 계획 수립 중이며 Mozilla는 개발자 투표로 다음 해 포함 기능을 결정할 예정이다.
• CSS 함수(@function)는 JavaScript처럼 CSS에서 재사용 가능한 함수를 정의할 수 있게 해주며, 삼각함수를 활용한 극좌표 변환 등이 가능하다.
• corner-shape 속성은 border-radius 대신 squircle, bevel, notch, scoop 등 다양한 모서리 형태를 제공하며, clip-path와 달리 border-box 자체를 변경해 테두리와 그림자가 올바르게 적용된다.
• border-shape 속성은 직선, 호, 베지어 곡선으로 임의의 테두리 모양을 그릴 수 있는 하위 수준의 기능이다.
• Anchor Positioning API 2단계 버전은 새로운 컨테이너 쿼리로 요소가 폴백 위치를 사용하는지 여부를 감지할 수 있어, 툴팁의 포인터 방향을 동적으로 조정할 수 있다.
• CSS inherit() 함수는 상속된 값을 가져와 calc()로 수정할 수 있게 해주며, 아직 어떤 브라우저에도 구현되지 않았다.
• scroll-triggered 애니메이션은 JavaScript의 IntersectionObserver 대신 CSS만으로 스크롤 위치에서 키프레임 애니메이션을 트리거할 수 있다.
• reading-flow와 reading-order 속성으로 탭 순서를 DOM 순서 대신 그리드/플렉스박스의 시각적 순서로 설정할 수 있어, 반응형 레이아웃에서 접근성 문제를 해결한다.
• interpolate-size 속성과 calc-size() 함수로 height: 0에서 height: auto 간 애니메이션이 가능해져, 아코디언 UI 구현이 CSS만으로 가능하다.
• CSS gap 장식(rule, row-rule, column-rule)으로 그리드 셀 간 테두리를 쉽게 그릴 수 있으며, 빈 셀에도 테두리가 적용된다.
• scroll-state 컨테이너 쿼리는 sticky 요소의 고정 상태나 스크롤 컨테이너의 top/bottom 도달 여부를 감지해, 헤더 스타일 변경이나 스크롤 그래디언트 표시를 CSS로 구현할 수 있다.
• 저자는 LLM 시대에도 개발자가 최신 CSS 기능을 이해해야 AI 에이전트가 이를 활용하도록 안내할 수 있다고 강조했다.