Starter · Platform CSS 2026
아래 다섯 가지는 오래 기다려온 기능이고, 그중 셋은 2026년에야 전 브라우저에 도달했다. 각 구간은 자기 자신을 시연하며 지원 하한을 함께 적는다. 지원 여부는 이 브라우저에서 실제로 물어본 값이다.
맨 위의 진행 막대는 JS가 한 줄도 없다. animation-timeline: scroll()이 스크롤 위치를 애니메이션 타임라인으로 삼아 컴포지터에서 돌린다 — 메인 스레드 비용이 0이다.
위로 스크롤해 보면 상단 막대가 따라 움직인다. 이 문단이 그 시연이다.
같은 카드가 넓은 칸에서는 가로로 눕고 좁은 칸에서는 세로로 선다. 뷰포트가 아니라 부모 칸의 폭에 반응하므로, 컴포넌트가 자기가 어디에 놓였는지 몰라도 된다. 미디어 쿼리로는 구조적으로 불가능했던 것이다.
1,284
칸이 380px를 넘으면 가로 배치로 바뀐다.
316
같은 마크업, 같은 CSS.
주석이 자기 트리거에 붙는다. 위치 계산 JS도, 팝업 라이브러리도 없다. 화면 밖으로 나가면 브라우저가 알아서 반대편으로 넘긴다.
position-anchor로 버튼에 묶여 있다. 지원하지 않는 브라우저에서는 버튼 아래 일반 문단으로 흐른다.linear()은 스프링의 실제 곡선을 점 목록으로 샘플링해 넣는다. 큐빅 베지어는 스프링을 흉내 낼 뿐 오버슈트와 정착을 재현하지 못한다.
아무 곳이나 눌러 보면 오버슈트 후 정착한다.
왼쪽은 자식의 상태로 부모를 칠한다 — CSS에서 오랫동안 불가능했던 방향이다. 오른쪽은 강조색 하나에서 color-mix(in oklch, …)로 전체 계조를 뽑는다. 다섯 개를 손으로 고르지 않는다.
이 스타터가 일부러 쓰지 않은 것
네이티브 masonry — Safari 26.4에서만 무플래그이고 명세 이름도 grid-lanes로 바뀌었다.
interpolate-size / calc-size() — Chromium 전용이며 Firefox·Safari 일정이 없다.
문서 간 뷰 트랜지션 — Firefox 지원이 전무하다.
text-wrap: balance — 라틴 제목에는 좋지만 한글에서는 어색하게 끊긴다.