- 올 한 해 새로 추가되었거나 지원이 확대된 CSS/HTML 기능을 실전 관점에서 정리한 목록으로, UI 전환·폼·타이포그래피·함수형 CSS까지 폭넓게 다룸
-
auto 등 키워드로의 사이즈 전환, HTML popover/invoker, CSS @function·if() 같은 신기능이 핵심이며, 다수는 크롬 우선 지원이므로 점진적 향상 전략이 필요
-
field-sizing 자동 확장 입력, 커스텀 Select, text-wrap: balance/pretty, linear() 이징, shape() 경로 등은 시각·사용성 품질을 손쉽게 올려줌
-
강화된
attr(), 읽기 순서 제어 reading-flow, calc-size() 같은 값·흐름 제어 도구가 늘어 CSS만으로 처리 가능한 설계 범위가 확대됨
- 아직 표준화·지원이 진행 중인 Masonry,
random(), margin-trim, View Transitions 확장 등을 주시하되, Container Queries, :has(), dvh 등은 이미 실무 기본기로 자리잡음
Animate to Auto
- 임의 콘텐츠 높이를 갖는 요소에서 고정값 ↔︎
auto 로 부드럽게 전환할 수 있도록 하는 기능
- 전역에
interpolate-size: allow-keywords를 선언하면 height: 0 → auto 같은 전환 허용
- 또는
interpolate-size 없이 calc-size() 를 사용해 height: calc-size(auto, size)로 전환 수행
-
장점은 기존의
max-height 꼼수나 오프스크린 측정 + JS 애니메이션 같은 취약한 대안을 제거하고 본연의 레이아웃 보존을 유지함
-
지원 현황은 현재 Chrome 중심이며, 애니메이션은 있으면 좋은 수준이므로 PE(Progressive Enhancement) 적용이 적합
Popovers & Invokers
-
popover 속성은 임의 요소에 열기/닫기 동작과 대응 JS API를 부여하는 HTML 기능이며 모달과는 다른 경량 오버레이 범주에 해당
-
Invoker 속성을 쓰면 JS 없이 선언적 제어가 가능함
-
의의는 접근성·키보드·포커스 관리 등을 HTML 레벨에서 기본 제공해 구현 누락 리스크를 줄인다는 점
-
지원은 Popover는 광범위, Invoker는 Chrome 우선이며
popover="hint" 등 세부 기능 지원 차이 존재
-
Polyfill 이 제공되므로 필수 UX에 적합한 도입 가능
@function
- CSS 값 함수 체계에 사용자 정의 함수를 도입,
@function --foo(--x) { result: ... } 형태로 공통 로직을 추상화 가능
-
중복 제거(DRY) 와 선언부 단순화를 통해 읽기·유지보수성 향상 효과 제공
-
지원은 Chrome 우선, 합리적이면
property: fallback 다음 줄에 property: --func()로 그레이스풀 폴백 구사 가능
if()
- CSS 최초의 값 수준 분기 함수,
media()·supports()·style() 조건을 스위치 문처럼 나열해 첫 일치값 반환
- 예: 브레이크포인트별
grid-template-columns를 단일 선언으로 기술
-
효과는 가독성 개선과 반복 제거이며, 커스텀
@function과도 궁합이 좋음
-
지원은 Chrome 우선, 폴백값을 먼저 선언해 PE 패턴 적용 권장
field-sizing
-
입력/편집 요소가 내용에 맞춰 자동으로 커지는
field-sizing 속성 소개
-
<textarea>의 자동 높이 확장이 대표 사례, 인라인 즉석 리사이즈 UX에도 응용 가능
-
지원은 Chrome 및 Safari 도입 예정, 필요 시 경량 JS 대체 가능
- 필수 기능이 아닌 UX 향상 성격이므로 점진적 도입 적합
Custom Selects
-
select 외형만이 아니라 오픈된 선택 UI 자체를 스타일링할 수 있도록 명시적 옵트인 후 완전 커스터마이즈 지원
-
PE가 뛰어나서 미지원 환경에서는 기본
<select> 로 안전하게 폴백됨
-
지원은 Chrome 우선,
appearance: base-select 및 ::picker(select) 등으로 제어 면적 확장 가능
text-wrap
-
text-wrap: balance 는 제목 등 큰 활자에 행 길이 균형을 맞추고, text-wrap: pretty 는 본문에서도 고아줄·미관 개선을 제공
-
효과는 가독성·타이포그래피 품질 향상으로, 코스트 없이 즉시 체감 가능
-
지원은
balance는 광범위, pretty는 Chrome·Safari 우선이며 PE에 적합
linear() easing
- 키워드
linear와 달리 linear() 함수는 임의 개수의 포인트로 정교한 이징 커브를 정의, 바운스 등 복합 동작 구현에 유리
-
대안인
cubic-bezier()가 제한적인 반면, linear()는 세밀한 타이밍 제어를 제공하며 전면 지원 상태
- 필요 시 명명 이징이나
cubic-bezier()로 폴백 구사 가능
shape()
- 기존
path()의 픽셀 전용·난해한 문법을 보완한 shape() 함수로, 반응형 단위·커스텀 속성을 활용해 任의 경로를 기술
-
clip-path 로 임의 형태 마스킹, offset-path 로 경로 따라 배치/애니메이션, 향후 shape-outside 와의 결합이 예고됨
-
지원은 Chrome·Safari, Firefox 플래그 진행, 실제 개발에서는 미려한 폴백 설계 권장
More Powerful attr()
-
attr()가 타입 지정을 지원해 숫자·색상 등 비문자 값을 HTML 속성에서 직접 읽어 CSS 값으로 활용 가능
-
의미는 테마 색상·카운트·크기 등을 마크업에서 주입하는 패턴 확장임
-
지원은 Chrome 우선, 핵심 레이아웃 의존보다는 미적 강화 요소부터 점진 도입 권장
Reading Flow
- 시각 순서와 소스 순서가 어긋난 레이아웃에서도 탭 이동 순서를 논리적으로 보정하는
reading-flow 속성 도입
- 그리드 재배치 시
reading-flow: grid-rows 같이 레이아웃 방식에 맞춘 포커스 흐름을 지정
-
접근성 리스크를 CSS 선언 한 줄로 줄일 수 있어 레이아웃 자유도가 커짐
-
지원은 Chrome 우선이므로, 과도한 재정렬은 범용 지원 전까지 자제가 권장됨
Stuff to Keep an Eye On
-
Masonry 레이아웃은 사양 정리 중이며
item-flow 제안이 그리드 너머의 배치 가능성을 확장할 전망
-
random() 함수는 Safari 제공 중으로 표현력 높은 변주 디자인 구현에 유익
-
margin-trim 은 유용하나 Safari 중심, sibling-index()/count() 는 Chrome 제공으로 스태거 애니메이션에 유용
- View Transitions의
view-transition-name: match-element;, Firefox 개발 진행 등 크로스 브라우저 호재 존재
-
단위 혼합
calc() 곱셈/나눗셈 합리화가 실험 통과 임박으로, 과거 형 변환 해크 필요성 축소 전망
- “CSS4” 같은 버전 네이밍 부재 문제 제기와, 최근 5년 신기능을 모은 참고 리스트 소개
Great Stuff to Remember
-
Container Queries & 단위는 미디어쿼리 이후 최대 생산성 향상으로 계속 핵심 기본기 위치
-
:has() 는 부모·상태 기반 선택을 가능하게 해 복잡한 조합 선택을 CSS만으로 해결하는 폭넓은 활용성 제공
-
View Transitions, Anchor Positioning, Scroll-Driven Animations 는 Safari 도달로 현업 채택 장벽이 낮아진 상태
-
추가 뷰포트 단위(dvh 등) 가 Baseline 등재로 모바일 뷰포트 안정성 향상
코드/사용 예 하이라이트
-
사이즈 전환: 전역
interpolate-size: allow-keywords 또는 상태 토글 시 height: calc-size(auto, size)로 콘텐츠 높이 애니메이션 구성
-
그리드 분기:
if(media(...): 값; ... else: 값;) 패턴으로 브레이크포인트별 템플릿 컬럼을 단일 선언에 집약
-
커스텀 Select:
select, ::picker(select) { appearance: base-select } 로 사용자 정의 피커 활성화
-
바운스 이징:
animation-timing-function: linear( ... 다수 포인트 ... ) 로 세밀한 반동/감쇠 곡선 구현
-
클립 경로:
clip-path: shape( ... ) 로 반응형 비율 기반 도형 마스킹 구성
실무 적용 가이드
-
브라우저 지원 편차가 큰 항목은 폴백 우선 설계와 진입 비용 대비 효과를 기준으로 도입
- 애니메이션·타이포그래피·시각 효과는 PE 우선 후보, 포커스/탭 순서 같은 핵심 접근성은 광범위 지원 후 채택 권장
-
자체 함수/분기는 설계 규칙 문서화와 토큰·커스텀 속성 결합으로 팀 공용 패턴화할 때 ROI 극대화
-
폼 UX 개선 항목(
field-sizing, Custom Select)은 모바일 우선 시나리오에서 체감 이득이 큼
결론
- 2025년판 현대 CSS는 값 함수·논리 분기·형태 제어 확대로 “CSS로 더 많이 할 수 있는” 해이며, PE 전략과 함께 단계적 채택 가치가 큼
-
기본기(컨테이너 쿼리,
:has(), 뷰포트 단위) 를 바닥에 깔고, animate-to-auto·if()·shape() 같은 고효율 항목을 우선 도입하는 현실적 로드맵이 유효함