2025년에 주요 브라우저에서 지원되는 10가지 새로운 CSS 기능

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 웹 디자이너, CSS 전문가

핵심 요약

• scrollbar-gutter: 스크롤바 공간을 미리 예약하여 레이아웃 이동을 방지 (scrollbar-gutter: stable both-edges;)
• content-visibility: 화면 밖 요소 렌더링을 지연시켜 성능 향상 (content-visibility: auto;)
• @property: 사용자 정의 속성에 타입, 초기값, 상속 규칙 명시 (@property --animation-progress { ... })
• offset-path: 경로 기반 애니메이션 구현 (offset-path: path("M10,80 Q95,10 180,80");)

섹션별 세부 요약

1. 스크롤바 레이아웃 안정화

• scrollbar-gutter: stable both-edges;를 사용하면 스크롤바가 나타날 때 레이아웃 이동 방지
• scrollbar-color로 스크롤바 색상 커스터마이징 가능 (다크 모드 UI와 호환)

2. 앵커 링크 텍스트 강조

• ::target-text 선택자로 앵커 링크로 이동한 텍스트를 백그라운드 색상으로 강조
• 장문의 문서에서 사용자 위치 명확화

3. 동아시아 언어 루비 텍스트 정렬

• ruby-align: center;와 ruby-position: over;로 루비 텍스트 위치 조정
• 교육용 자료나 참고서에서 내부 주석 배치에 유용

4. 상대 색상 구문

• light-dark(#ffffff, #000000) 함수로 라이트/다크 모드 색상 전환
• color-interpolation-method로 색공간 기반 매끄러운 그라디언트 생성

5. 자바스크립트 없는 레이아웃 접기

• details 요소와 name 속성을 통해 단일 패널 열기 애니메이션 구현
• FAQ, 메뉴 등에서 사용 가능

6. 화면 밖 요소 렌더링 지연

• content-visibility: auto;로 화면 밖 요소 렌더링 지연, 메모리 절약 및 로딩 속도 향상

7. 폰트 크기 일관성 유지

• font-size-adjust: 0.5;로 폰트 로딩 실패 시 x-높이 기반 폰트 크기 조정

8. 전환 효과 제어

• transition-behavior: allow-discrete;로 이산적 전환 효과를 JavaScript 없이 구현

9. 사용자 정의 속성 선언

• @property를 통해 타입, 초기값, 상속 규칙을 명시적으로 정의
• round(), mod(), rem()과 같은 계산 함수로 CSS 내 연산 가능

10. 경로 기반 애니메이션

• offset-path로 커스텀 경로 따라 애니메이션 구현
• 인터랙티브 요소나 사용자 주의 이동 경로에 유용

결론

• scrollbar-gutter와 content-visibility를 사용해 성능 최적화, @property와 offset-path로 복잡한 애니메이션 구현 가능
• 브라우저 호환성을 고려한 CSS 기능을 적극적으로 도입하여 현대적인 웹 디자인 구현 권장