CSS의 미래

Interop 2027의 우선순위를 정하기 위한 기능 순위 투표가 진행 중이며, CSS 함수부터 스크롤 상태 쿼리까지 다양한 제안이 후보에 올라 있음 사용자 정의 함수와 새로운 테두리 속성은 CSS에서 계산을 재사용하고 요소의 실제 테두리 상자 형태를 바꾸는 기능을 제공함 컨테이너 쿼리 확장은 툴팁의 대체 위치 사용 여부와 스크롤 상태를 감지해, 상황에 맞는 스타일을 CSS로 적용할 수 있게 함 읽기 순서 제어와 크기 애니메이션은 반응형 화면의 탐색 순서 불일치, height: auto 전환처럼 기존 CSS에서 해결하기 어려웠던 문제를 다룸 후보 기능의 Interop 채택과 범용 지원은 아직 확정되지 않았지만, 일부는 점진적 향상으로 활용할 수 있으며 AI 에이전트에 최신 기능 활용을 지시하려면 개발자의 CSS 지식이 여전히 필요함 Interop 2027과 브라우저 호환성 Google, Apple, Microsoft, Mozilla와 Igalia, Bocoup는 웹 기술의 보편적인 브라우저 지원을 개선하는 Interop에 협력하고 있음 집중 대상에 선정된 기능은 종종 1년 안에 주요 브라우저 전반에서 거의 100%에 가까운 지원에 도달함 CSS Subgrid는 Firefox에 2019년 구현됐지만 다른 브라우저에서는 수년간 진전이 적었으며, Interop 2023에 포함된 뒤 그해 말 현대적인 브라우저 전반에서 사용할 수 있게 됨 Mozilla는 Interop 2027 우선순위 결정에 활용할 기능 순위 투표를 마련함 아래 10개 기능은 Josh W. Comeau가 투표한 후보이며, 확정된 Interop 2027 선정 목록은 아님 2026년 10월 기준으로 inherit()를 제외한 9개 기능은 Chrome 155와 Edge 154에서 지원하며, Firefox 157과 Safari 27에서는 지원하지 않음 inherit()는 확인된 브라우저 구현이 없고 caniuse에도 등록되지 않은 초기 제안임 1. CSS 사용자 정의 함수 CSS 함수 제안은 @function으로 함수를 정의하고 result로 반환값을 지정함 매개변수와 기본값을 받아 투명색으로 이어지는 그라디언트 같은 값을 재사용할 수 있음 극좌표를 직교좌표로 변환하는 계산도 함수로 묶을 수 있음 cos(), sin(), calc()를 사용해 각도와 거리를 translate() 값으로 변환함 예시의 --translate-polar(45deg, 100px)는 ...