구글·애플·마이크로소프트·모질라와 Igalia, Bocoup이 참여하는 브라우저 호환성 프로젝트 Interop은 주요 브라우저에서 웹 기술 지원을 맞추는 작업을 해왔다. 2026년 말 Interop 2027을 준비하는 가운데, 블로그 글은 투표한 CSS 기능 10가지를 소개하며 일부는 점진적 개선 방식으로 지금부터 적용할 수 있다고 설명한다.

Interop에 기능이 선정되면 1년 안에 주요 브라우저 전반에서 지원이 거의 100%에 이르는 경우가 많다는 것이 글의 설명이다. CSS Subgrid는 그 사례다. Firefox에서 2019년 구현됐지만 다른 브라우저의 진전은 수년간 더뎠고, Interop 2023에 포함된 뒤 그해 말에는 최신 브라우저 전반에서 폭넓게 사용할 수 있게 됐다. Interop 2023의 Subgrid 테스트 결과

모질라 팀은 Interop 2027에 포함할 기능을 결정하는 데 활용할 순위 투표 페이지를 만들었다. 기능 순위 투표에서 원하는 기능에 표를 보낼 수 있다. 아래 기능의 브라우저 지원 현황은 글이 갱신된 2026년 10월 기준이다. 대부분은 Chrome 155와 Edge 154에서 지원되고 Firefox 157과 Safari 27에서는 지원되지 않는다고 소개됐다. 기능별 지원 정보는 caniuse 등 링크에서 확인할 수 있다.

CSS 함수 제안은 @function으로 함수를 정의하고 result로 반환값을 지정하는 방식이다. 글은 색과 방향을 받아 그라데이션을 만드는 예와 각도·거리로 요소를 이동시키는 예를 든다. 후자는 극좌표와 직교좌표 사이의 변환에 활용할 수 있다. 이 기능은 Chromium 브라우저에 구현돼 있지만 다른 브라우저에서는 지원되지 않으며, Interop 2027에 포함되면 폭넓은 지원으로 이어질 가능성이 있다고 글은 내다본다. CSS 함수 제안

corner-shape는 기본적인 둥근 모서리 외에 squircle, bevel, notch, scoop 같은 모양을 제공한다. 글은 게임·SF풍 인터페이스에 bevel을 활용할 수 있다고 소개한다. clip-path나 마스크와 달리 요소의 실제 테두리 상자 모양을 바꾸므로 테두리와 윤곽선, 그림자도 그 모양을 따라간다. Firefox와 Safari에서는 지원되지 않지만, 글은 점진적 개선 방식으로 사용을 고려할 수 있다고 말한다. corner-shape 지원 정보

border-shape 제안은 직선과 호, 베지어 곡선으로 원하는 테두리 모양을 그릴 수 있게 한다. 이 기능도 요소의 테두리 상자를 바꾸기 때문에 테두리·윤곽선·그림자가 모양을 따르며, 서로 다른 테두리 모양 사이의 애니메이션도 가능하다고 설명한다. border-shape 제안과 관련 글

앵커 위치 지정 API의 다음 단계에는 앵커에 붙인 요소가 기본 위치 대신 대체 위치를 쓰는지 확인하는 컨테이너 쿼리가 제안됐다. 툴팁이 화면 위쪽 공간 부족으로 앵커 아래로 이동했을 때, 말풍선의 꼬리 방향도 이에 맞추는 데 쓸 수 있다. 앵커 위치 지정 설명과 Interop 2027 제안

CSS의 inherit() 제안은 부모에게서 물려받은 값을 가져와 calc()로 조정할 수 있게 한다. 예를 들어 중첩된 요소의 모서리 둥글기를 바깥 요소보다 줄이는 데 쓸 수 있다. 글에 따르면 이 기능은 당시 어떤 브라우저에도 구현되지 않았고 caniuse에도 등재되지 않았다. Interop 2027에 포함될지는 불확실하다고 덧붙였다. inherit() 제안

스크롤 기반 애니메이션은 Interop 2026에 포함돼 모든 브라우저에 구현됐다. 별도 제안인 스크롤 트리거 애니메이션은 사용자가 정해진 위치까지 스크롤하면 키프레임 애니메이션을 시작한다. 현재는 JavaScript의 IntersectionObserver API로 구현할 수 있지만, 제안된 방식은 CSS로 처리하는 것을 목표로 한다. 스크롤 트리거 애니메이션 소개와 제안

reading-flow와 reading-order는 화면에 보이는 배치와 키보드 초점 이동 순서가 달라지는 문제를 다룬다. 반응형 레이아웃에서 화면 크기에 따라 요소의 시각적 순서가 바뀌어도 탭 이동은 문서의 DOM 순서를 따를 수 있다. reading-flow는 CSS Grid나 Flexbox의 시각적 배치에 맞춰 탭 순서를 정하고, reading-order는 순서를 더 세밀하게 지정하도록 제안됐다. Interop 2027 제안과 reading-flow 설명

interpolate-size와 관련 함수 calc-size()는 auto 같은 키워드 값 사이의 크기 애니메이션을 다룬다. 예컨대 접이식 UI에서 높이를 0에서 auto로 전환할 수 있다. interpolate-size는 2024년부터 Chrome에 구현됐다고 글은 설명한다. 아직 모든 브라우저에서 쓸 수 없으므로 점진적 개선으로 적용할 때는 지원 여부를 @supports로 확인해, 미지원 브라우저에서 전환 지연이 생기지 않도록 해야 한다. Interop 2027 제안과 지원 정보

CSS Grid의 빈 셀에는 경계선을 그릴 요소가 없다는 문제를 해결하기 위해 rule, row-rule, column-rule 속성이 제안됐다. Grid 자체에 선의 너비·색상·스타일을 지정해 셀 사이에 경계선을 표시하는 방식이다. 간격 장식 제안

스크롤 상태 컨테이너 쿼리는 position: sticky 요소가 화면에 붙었는지, 스크롤 영역이 위나 아래로 더 움직일 수 있는지 확인하는 기능을 제안한다. 이를 이용하면 고정된 헤더의 모양을 바꾸거나 콘텐츠 위아래에 스크롤 표시용 그라데이션을 나타낼 수 있다. 스크롤 상태 쿼리 제안

글은 최신 CSS를 익히는 일이 에이전트 시대에도 중요하다고 주장한다. 학습 데이터가 오래된 대규모 언어 모델(LLM)이 최신 기능을 알아서 활용할 것이라고 기대하기 어렵고, 에이전트가 현대적인 웹 기능을 사용하도록 안내하려면 개발자도 해당 기능을 알아야 한다는 설명이다. 앞서 소개한 기능 가운데 일부는 점진적 개선 방식으로 적용할 수 있지만, Interop 2027에 포함되거나 모든 브라우저에서 지원된다고 확정된 것은 아니다. 관련 뉴스레터