21P by xguru 2달전 | favorite | 댓글과 토론
  • 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

  • 개발자는 최종 크기, 글꼴 크기 또는 심지어 헤드라인이나 단락의 언어를 알 수 없음
  • balancepretty라는 두 가지 새로운 텍스트 래핑 기술이 도입됨

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 속성은 popoverdialog와 같은 최상위 스타일 요소가 부드럽게 최상위에서 애니메이션되어 나오도록 함

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 값을 가진 여러 `` 요소가 의미론적 그룹을 형성함