매년 주요 브라우저 제조사들은 인터롭(Interop) 프로젝트를 통해 새로운 HTML·CSS·JS 기능의 구현을 서로 맞춘다. 구글, 애플, 마이크로소프트, 모질라에 더해 이갈리아(Igalia)와 보컵(Bocoup) 같은 조직이 함께 참여하는 이 협업은 범용 브라우저 지원을 끌어올리기 위한 작업이다. 특정 기능이 인터롭의 중점 과제로 지정되면 1년 안에 모든 주요 브라우저에서 거의 100%에 가까운 지원률에 도달하는 경우가 많다. CSS 서브그리드(Subgrid)가 대표적이다. 2019년 파이어폭스에 먼저 구현된 뒤 수년간 다른 브라우저에서 진척이 없다가, 2023년 인터롭 과제에 포함되자 그해 안에 모든 최신 브라우저에서 널리 쓸 수 있게 됐다.
2026년 말 현재 인터롭 2027이 기획되고 있고, 모질라는 사용자들이 원하는 기능에 투표할 수 있는 순위 시스템을 마련했다. 이 투표 데이터가 내년 과제 선정에 반영된다. 웹 개발자 조시 코모(Josh Comeau)가 자신이 투표한 상위 10개 기능을 정리한 글을 바탕으로, 앞으로 1년 안팎에 다가올 CSS의 모습을 짚어본다. 일부는 이미 특정 브라우저에 구현돼 있어 지금부터 점진적 향상 기법으로 써볼 수 있다.
계산과 형태를 다루는 새 도구들
가장 눈에 띄는 제안 중 하나는 CSS에 함수를 추가하는 것이다. 자바스크립트에 익숙하다면 낯설지 않다. @function으로 새 함수를 정의하고 result로 반환값을 지정한다. 극좌표와 직교좌표를 서로 변환하는 것처럼 반복적으로 쓰이는 계산을 함수로 묶을 수 있다. 이 기능은 이미 크로미엄 계열 브라우저에 구현돼 있어, 인터롭 2027에 포함된다면 비교적 빠르게 보편화될 가능성이 있다.
모서리와 테두리를 다루는 방식도 넓어진다. corner-shape 속성은 사각형의 네 변을 잇는 방법을 기존 border-radius의 사분원 외에 다양하게 제공한다. 애플이 오래 써온 초타원 기반의 매끄러운 곡선인 스퀘어클(squircle)도 가능하고, 비스듬히 깎는 bevel은 게임·SF풍 UI에 유용하다. 더 낮은 수준에서 직선·호·베지에 곡선으로 테두리 모양 자체를 그리는 border-shape 제안도 함께 논의된다. 이 둘은 clip-path나 마스크와 달리 실제 보더 박스의 형태를 바꾸기 때문에 테두리, 아웃라인, 그림자가 변형된 모양을 정확히 따라간다는 점이 핵심이다. 다만 2026년 10월 기준 파이어폭스와 사파리에는 아직 없어 점진적 향상 용도가 적절하다.
상태를 읽어내는 CSS, 접근성과 상호작용
앵커 포지셔닝(Anchor Positioning)은 툴팁 같은 요소를 트리거 요소에 붙여 따라다니게 하는 기능으로, 인터롭 2026에서 우선순위를 받아 이미 널리 쓸 수 있다. 다만 공간이 부족해 대체 위치로 뒤집혔을 때 그 사실을 CSS에서 알 방법이 없었다. 레벨 2에서는 대상 요소가 기본 위치인지 대체 위치인지 판별하는 새로운 형태의 컨테이너 쿼리가 추가된다. 비슷한 맥락으로, position: sticky 요소가 현재 '고정된' 상태인지 질의하는 컨테이너 쿼리 제안도 있다. 스크롤 컨테이너가 맨 위·맨 아래에 닿았는지 등 스크롤 관련 상태 전반을 CSS만으로 확인할 수 있게 된다.
접근성 측면에서 중요한 것은 reading-flow 속성이다. 반응형 레이아웃에서는 화면 크기에 따라 시각적 배치가 크게 달라지지만 탭 이동 순서는 언제나 DOM 순서를 따른다. 그 결과 보조 기술 사용자에게는 레이아웃과 무관하게 항상 같은, 종종 어긋나는 순서가 노출된다. reading-flow는 탭 순서를 그리드나 플렉스박스의 시각적 순서에 맞추게 해주고, reading-order로는 tabIndex처럼 직접 순서를 지정할 수 있다. 레이철 앤드루(Rachel Andrew)가 주도해온 제안이다.
애니메이션과 레이아웃의 빈틈 메우기
스크롤 구동(scroll-driven) 애니메이션은 인터롭 2026으로 모든 브라우저에 자리 잡았다. 이와 별개로, 특정 지점에 스크롤이 도달하면 정해진 시간 동안 애니메이션을 한 번 재생하는 스크롤 트리거(scroll-triggered) 애니메이션 제안이 올라와 있다. 지금은 자바스크립트 IntersectionObserver로 구현하지만 번거로운 작업이라, CSS만으로 두 방식을 모두 처리하게 되면 편해진다. 오랜 숙원이던 auto 같은 키워드 값으로의 애니메이션도 interpolate-size 속성과 calc-size() 함수로 해결된다. height: 0에서 height: auto로 펼쳐지는 아코디언 UI가 대표적 사례다. 크롬에는 2024년부터 들어와 있으며, 미지원 브라우저에서 불필요한 지연이 생기지 않도록 @supports로 전환 효과를 감싸 쓰면 지금도 활용할 수 있다.
그리드의 빈틈도 메워진다. CSS 그리드는 셀이 요소가 아니라 CSS로 정의한 행·열에 놓이기 때문에, 빈 셀 사이에 선을 긋기가 어려웠다. 갭 데코레이션(gap decorations) 제안은 border와 유사한 문법의 rule 속성을 그리드 자체에 적용해, 선의 굵기·색·스타일을 지정하고 row-rule·column-rule로 행 또는 열 사이에만 선을 그을 수 있게 한다. 한편 상속값을 calc()로 변형해 쓰게 해주는 inherit() 함수 제안도 흥미롭다. 중첩된 모서리 반경처럼 안쪽 값을 조금 줄여야 자연스러운 경우에 유용하다. 다만 아직 어느 브라우저에도 구현되지 않았고 caniuse에도 없어, 인터롭 2027 채택 여부는 불확실하다. 이 목록은 한 개발자의 투표에 기반한 미리보기일 뿐이며 실제 선정 결과와 구현 시점은 별개라는 점을 염두에 둘 필요가 있다.