CSS route matching으로 navigation state를… — 2026년 31주 CSS 및 스타일링

실험적인 border-shape property는 basic shape를 element에 적용하면서 border, outline, box shadow가 그 path를 따르게 합니다. clip-path와 달리 장식을 잘라내지 않으며 익숙한 shape(), polygon() 등의 syntax를 다시 사용할 수 있습니다. 값 하나는 shape를 stroke하고 값 두 개는 바깥과 안쪽 path를 정의해 cutout, partial frame, breakout decoration을 만듭니다. Content는 별도로 관리하지 않으면 기존 직사각형 box를 따르고 border-radius는 무시됩니다. 현재 Chrome 전용이므로 단순한 fallback과 함께 progressive enhancement로 적용해야 합니다.

CSS lh unit은 element의 계산된 line height와 같아서 typographic rhythm을 layout 계산에 사용할 수 있게 합니다. Ahmad Shadeed는 paragraph spacing과 반복되는 paper-line gradient에 line height 하나를 사용해 font size가 바뀌어도 정렬을 유지합니다. 5lh로 제한한 list는 정확히 다섯 줄 뒤에 fade할 수 있고 1lh의 비율로 정한 icon은 주변 label을 따라갑니다. 더 발전된 예시는 calc-size()와 round()를 결합해 float image의 height를 line grid에 맞춥니다. 이런 관계는 중복 pixel 값을 없애고 responsive typography 변경을 안전하게 만듭니다.

Firefox Nightly는 CSS progress() function과 no-clamp keyword를 활성화했으며 stable Firefox 155는 9월 1일 출시가 목표입니다. Safari Technology Preview 248도 no-clamp를 추가해 value normalization의 interoperability gap을 좁혔습니다. 별도로 Chromium은 native CSS mixin prototype 의향을 밝혔지만 specification과 implementation은 아직 초기 단계입니다. 이 roundup은 framework breakpoint도 비교하며 md 같은 label이 보편적인 device width를 뜻하지 않는다고 경고합니다. Prerelease browser에서 experiment를 시작할 수 있지만 fallback을 유지하고 예정된 ship date를 현재 baseline support로 취급해서는 안 됩니다.