이번 주 CSS 커버리지는 하나의 테마로 수렴합니다. 브라우저가 과거 JavaScript를 요구했던 동작을 점점 더 자체적으로 처리하고 있다는 것입니다. 주요 아이템인 Brecht De Ruyte의 CSS @container scroll-state() 쿼리 심층 분석이 가장 명확한 사례입니다. Chrome 144의 새로운 scrolled 상태를 이용하면 @container scroll-state(scrolled: bottom) 규칙 하나만으로, JavaScript 없이 스크롤 다운 시 헤더 숨기기 패턴을 구현할 수 있습니다. Chrome 133에서 도입된 stuck, snapped, scrollable 상태를 기반으로 합니다. 현재는 Chrome 전용이므로 progressive enhancement 전략이 권장됩니다. Kevin Powell의 네이티브 <dialog> 요소 영상도 같은 맥락입니다. .showModal()이 요소를 브라우저의 top layer로 승격시켜 z-index 충돌을 완전히 제거하고, 내장 focus trap과 Escape 키 닫기가 수백 줄의 커스텀 오버레이 코드를 대체합니다.
정밀한 포지셔닝도 깊게 다뤄집니다. Schalk Neethling의 CSS anchor positioning fallback 시스템 가이드 — position-try-fallbacks, named @position-try at-rule, position-try-order: most-block-size — 는 툴팁과 팝오버가 JavaScript 측정 없이 자동으로 위치를 재조정하는 방법을 보여줍니다. Manuel Matuzović는 리셋 스타일시트를 익명 @layer {} 블록으로 감싸는 깔끔한 cascade 기법을 소개합니다. 이 방법은 모든 unlayered 규칙보다 specificity를 낮춰, 선택자마다 :where()를 감싸는 장황한 패턴을 깔끔하게 대체합니다.
CSS 언어의 미래를 내다보면, OddBird 팟캐스트에서 Miriam Suzanne과 Chris Coyier가 2025년 말 Firefox 지원으로 크로스브라우저가 된 @scope와, @content 블록을 활용한 네이티브 CSS mixins 명세를 탐구합니다. Polypane의 CSS 레이아웃 기본 원리 심층 글은 normal flow, box model, margin collapse, stacking context 등 모든 레이아웃 알고리즘의 바탕이 되는 mental model을 재정립하며, 높이가 지정된 block 요소에 place-content: center를 적용하는 것이 현대적 수직 중앙 정렬의 가장 간단한 해법임을 결론으로 제시합니다.
