- 2023년은 CSS에 있어 엄청난 한 해였음. 웹 플랫폼에서 불가능하다고 여겨졌던 기능을 가능하게 하는 CSS 및 UI 분야의 많은 새로운 기능들이 등장
- 모든 주요 브라우저는 컨테이너 쿼리, 서브그리드,
:has() 선택자 등을 지원하며, 새로운 색상 공간과 함수들도 지원
- Chrome은 CSS만으로 스크롤 기반 애니메이션과 웹 뷰 간의 부드러운 전환을 지원
- CSS 중첩과 범위 지정 스타일과 같이 개발자 경험을 개선하는 새로운 기본 요소들이 많이 도입됨
Architectural foundations
Trigonometric functions
- Chrome 111은
sin(), cos(), tan(), asin(), acos(), atan(), atan2()와 같은 삼각 함수를 지원
- 이 함수들은 애니메이션과 레이아웃 목적에 매우 유용
Complex nth-* selection
-
:nth-child() 의사 클래스 선택자를 사용하면 DOM 내의 요소를 인덱스로 선택할 수 있음
- Chrome 111부터는
:nth-child()와 :nth-last-child()에 선택자 목록을 선택적으로 전달할 수 있게 됨
Scope
- Chrome 118은 문서의 특정 하위 트리에 선택자 일치를 범위 지정하는
@scope를 지원
- 범위 지정된 하위 트리는 _범위 지정 루트_와 선택적인 _범위 지정 한계_로 정의
Nesting
- 중첩을 사용하기 전에는 모든 선택자를 별도로 명시적으로 선언해야 했음.
- 이제 관련 스타일 규칙을 그룹화하여 계속해서 선택자를 사용할 수 있음.
Subgrid
- CSS
subgrid를 사용하면 더 복잡한 그리드를 만들고 자식 레이아웃 간에 더 나은 정렬을 할 수 있음
- 내부 그리드가 외부 그리드의 행과 열을 자신의 것으로 채택할 수 있게 함
Typography
Initial-letter
- Chrome 110에서 시작된
initial-letter 속성은 초기 글자의 배치를 설정하는 작지만 강력한 CSS 기능임
- 글자를 드롭된 상태나 올라간 상태로 배치할 수 있음
text-wrap: balance and pretty
- 개발자는 최종 크기, 글꼴 크기 또는 심지어 헤드라인이나 단락의 언어를 알 수 없음
-
balance와 pretty라는 두 가지 새로운 텍스트 래핑 기술이 도입됨
Color
HD Color Spaces (Color Level 4)
- 새로운 색상, 더 많은 색상, 새로운 색상 공간, 색상 함수 및 새로운 기능이 2023년에 도입됨
- CSS와 색상은 이제 HDR 색상의 그라데이션을 만들고, 다른 색상 공간에서 그라데이션을 보간할 수 있음
color-mix function
- 색상 혼합은 고전적인 작업이며, 2023년 CSS에서도 가능해짐
- 흰색 또는 검은색뿐만 아니라 투명도를 색상에 혼합할 수 있으며, 선택한 색상 공간에서 이를 수행할 수 있음
Relative color syntax
- 상대 색상 구문(RCS)은 색상 변형을 생성하기 위한
color-mix()의 보완적인 방법임
- RCS는 색상의 상대적 및 절대적 조작을 수행할 수 있게 함
Responsive Design
Size container queries
- 뷰포트의 전역 크기 정보를 사용하는 대신, 컨테이너 쿼리는 페이지 내의 부모 요소를 쿼리하는 것을 지원함
Style container queries
- 스타일 쿼리는 부모 요소의 사용자 정의 속성 값을 쿼리할 수 있게 함
:has() selector
- 거의 20년 동안 개발자들은 CSS에서 "부모 선택자"를 요구해왔음
-
:has() 선택자를 사용하면 .card:has(img.hero)와 같이 자식으로 히어로 이미지를 가진 .card 요소를 선택할 수 있음
Update media query
-
update 미디어 쿼리를 사용하면 장치의 리프레시 속도에 맞게 UI를 조정할 수 있음
Scripting media query
- 스크립팅 미디어 쿼리는 JavaScript가 사용 가능한지 여부를 확인하는 데 사용할 수 있음
Reduced-transparency media query
- 비투명 인터페이스는 다양한 유형의 시각 장애에 대해 두통을 유발하거나 시각적으로 어려울 수 있음
- 이 미디어 쿼리는 사용자가 UI에서 투명도를 줄이거나 제거할 수 있는 시스템 환경 설정을 가지고 있음을 나타냄
Interaction
View transitions
- 페이지의 사용자 경험에 큰 영향을 미치는 뷰 전환
- 뷰 전환 API를 사용하면 단일 페이지 애플리케이션의 두 페이지 상태 간의 시각적 전환을 만들 수 있음
Linear-easing function
-
linear() 함수는 복잡한 이징 함수를 간단하게 만들 수 있게 해주며, 정밀도를 약간 잃는 대신 사용할 수 있음
Scroll End
-
scrollend 이벤트는 사용자가 여전히 제스처 중인지 여부를 이해하는 완벽한 타이밍의 스크롤 종료 이벤트를 제공함
Scroll-driven animations
- 스크롤 기반 애니메이션은 스크롤러의 스크롤 오프셋에 기존 CSS 애니메이션 또는 웹 애니메이션 API로 만든 애니메이션을 연결할 수 있게 해줌
Deferred timeline attachment
- CSS를 통해 스크롤 기반 애니메이션을 적용할 때, 제어하는 스크롤러를 찾는 메커니즘은 항상 DOM 트리를 거슬러 올라가기 때문에 스크롤 조상에만 제한됨
Discrete property animations
- 이산 애니메이션, 예를 들어
display: none으로부터 애니메이션을 수행하는 능력이 2023년에 새로운 기능으로 추가됨
@starting-style
-
@starting-style CSS 규칙은 display: none으로부터 애니메이션을 수행하는 새로운 웹 기능을 기반으로 함
Overlay
- 새로운 CSS
overlay 속성은 popover 및 dialog와 같은 최상위 스타일 요소가 부드럽게 최상위에서 애니메이션되어 나오도록 함
Components
Popover
- Popover API는 페이지의 나머지 부분 위에 놓이는 요소를 만드는 데 도움을 줌
Horizontal rules in select
- Chrome과 Safari는 올해
요소 내에 수평 규칙 요소( 태그)를 추가할 수 있는 기능을 지원함
:user-valid and invalid pseudo classes
-
:user-valid 및 :user-invalid는 :valid 및 :invalid 의사 클래스와 유사하게 작동하지만, 사용자가 입력과 상당히 상호 작용한 후에만 폼 컨트롤과 일치함
Exclusive accordion
- Chrome 120에서는 `` 요소에
name 속성을 지원함
- 이 속성을 사용하면 동일한
name 값을 가진 여러 `` 요소가 의미론적 그룹을 형성함