CSS Wrapped 2025 — 스매싱 매거진

이전 브라우저를 손상시키지 않고도 이 새로운 동작을 선택할 수 있습니다.

select {
  /* Opt-in for the new customizable select */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
    }
  }
}

이미지나 플래그와 같은 옵션 내부에 풍부한 콘텐츠를 허용하는 환상적인 추가 기능은 매우 재미있습니다. 요즘에는 모든 종류의 선택 항목을 만들 수 있습니다.

• 데모: 나는 새로운 방법을 보여주는 Poké-adventure 데모를 만들었습니다. 요소는 옵션의 풍부한 콘텐츠(예: 포켓볼 아이콘)를 버튼에 직접 복제할 수 있습니다.

이 기능만으로도 양식 작성 방법이 크게 바뀌고 종속성과 기술 부채가 줄어들었음을 알 수 있습니다.

캐러셀을 만드는 것은 역사적으로 개발자와 클라이언트 사이의 마찰 지점이었습니다. 클라이언트는 이를 좋아하지만 개발자는 접근성과 성능을 높이는 데 필요한 JavaScript를 두려워합니다. 도착 ::scroll-marker 그리고 ::scroll-button() 의사 요소는 이 역학을 완전히 변경합니다.

이러한 기능을 사용하면 스크롤 컨테이너에 기본적으로 연결된 CSS만으로 탐색 점과 스크롤 버튼을 만들 수 있습니다. 내 블로그에 썼듯이 이것은 첫 번째 슬라이드의 사랑이었습니다. JavaScript 한 줄 없이 모든 기능을 갖춘 접근 가능한 슬라이더를 만드는 기능은 단지 편리하기만 한 것이 아닙니다. 성능의 승리입니다. 이 기능에는 몇 가지 접근성 문제가 있으며, 이것이 유효하더라도 개발자가 이 기능을 작동시킬 수 있는 방법이 있을 수 있습니다. 좋은 점은 이러한 모든 UI 변경으로 인해 사용자 정의 DOM 조작 및 aria 태그 주위를 드래그하는 것보다 훨씬 쉬워진다는 것입니다.

이제 다음을 사용하여 마커를 자동으로 그룹화할 수 있습니다. scroll-marker-group 앵커 위치 지정을 사용하여 버튼의 스타일을 지정하여 원하는 위치에 정확하게 배치합니다.

.carousel {
  overflow-x: auto;
  scroll-marker-group: after; /* Creates the container for dots */

  /* Create the buttons */
  &::scroll-button(inline-end),
  &::scroll-button(inline-start) {
    content: " ";
    position: absolute;
    /* Use anchor positioning to center them */
    position-anchor: --carousel;
    top: anchor(center);
  }

  /* Create the markers on the children */
  div {
    &::scroll-marker {
      content: " ";
      width: 24px;
      border-radius: 50%;
      cursor: pointer;
    }
    /* Highlight the active marker */
    &::scroll-marker:target-current {
      background: white;
    }
  }
}

상태 쿼리: Sticky Thing이 붙어 있습니까? Snappy Thing이 끊어졌나요?

오랫동안 우리는 IntersectionObserver 해킹에 의존하지 않고 “끈적한 물건이 붙어 있는지” 또는 “빠른 아이템이 부러졌는지”를 알 수 있는 능력이 부족했습니다. Chrome 133에는 스크롤 상태 쿼리가 도입되어 이러한 상태를 선언적으로 쿼리할 수 있습니다.

설정으로 container-type: scroll-state이제 아이들이 붙어 있는지, 부러졌는지, 넘쳤는지에 따라 아이들의 스타일을 지정할 수 있습니다. 이것은 제가 CSS Day 2023 이후 간절히 기다려온 엄청난 “삶의 질” 개선입니다. 스크롤 방향도 볼 수 있기 때문에 많이 발전했습니다. 사랑스럽습니다!

간단한 예를 들어, 마침내 헤더에 그림자를 적용할 수 있습니다. 오직 실제로 뷰포트 상단에 붙어 있을 때:

.header-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  header {
    transition: box-shadow 0.5s ease-out;
    /* The query checks the state of the container */
    @container scroll-state(stuck: top) {
      box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px;
    }
  }
}

• 데모: 실제로 붙어 있을 때만 그림자를 적용하는 끈적한 헤더입니다.

• 데모: 현재 스냅된 캐릭터 위로 프레임을 이동하기 위해 앵커 위치 지정과 결합된 스크롤 상태 쿼리를 사용하는 포켓몬 테마 목록입니다.

최적화된 인체공학: CSS의 논리

CSS Wrapped의 “최적화된 인체공학” 섹션에서는 작업 흐름을 더욱 직관적으로 만드는 기능을 강조합니다. 로직 작성 방식에 있어 혁신적인 세 가지 기능이 눈에 띕니다.

1. if() 진술
   우리는 마침내 CSS에서 조건문을 얻었습니다. 그만큼 if() 함수는 스타일시트의 삼항 연산자처럼 작동하여 미디어, 지원 또는 스타일 쿼리를 기반으로 값을 인라인으로 적용할 수 있습니다. 이렇게 하면 장황한 설명의 필요성이 줄어듭니다. @media 단일 속성 변경에 대한 블록입니다.
2. @function 기능
   마침내 일부 로직을 다른 위치로 이동할 수 있어 실제 삶의 질이 향상되는 깔끔한 파일이 생성됩니다.
3. sibling-index() 그리고 sibling-count()
   이러한 트리 카운팅 기능은 목록 크기에 따른 애니메이션 또는 스타일 지정 항목 문제를 해결합니다. CSS를 사용하여 형제 스타일 지정하기가 이보다 쉬웠던 적은 없었습니다. 이를 통해 사용자 정의 속성(예: --index: 1) HTML에서.

예: 레이아웃 계산

이제 간결한 수학 공식을 작성할 수 있습니다. 예를 들어, 화면에 들어오는 카드의 애니메이션에 시차를 두는 것은 간단합니다.

.card-container > * {
  animation: reveal 0.6s ease-out forwards;
  /* No more manual --index variables! */
  animation-delay: calc(sibling-index() * 0.1s);
}

저는 삼각법과 함께 이러한 함수를 사용하여 JavaScript 없이 완벽한 원에 항목을 배치하는 실험도 했습니다.

• 데모: 다음을 사용하여 완벽한 원에 항목 배치 sibling-index, sibling-count그리고 새로운 CSS @function 특징.

내 CSS 할 일 목록: 빨리 시도해 보고 싶은 기능

선택과 전환을 조각하느라 바빴던 동안 “CSS Wrapped 2025” 보고서에는 아직 CodePen에서 실행할 기회가 없었던 다른 유용한 정보가 가득합니다. 다음 실험을 위한 목록의 상위 항목은 다음과 같습니다.

고정된 컨테이너 쿼리

나는 캐러셀 데모에서 버튼에 CSS 앵커 위치 지정을 사용했지만 “CSS Wrapped”는 이것의 발전을 강조합니다. 고정된 컨테이너 쿼리. 이는 도구 설명과 관련하여 우리 모두가 겪었던 문제를 해결합니다. 공간 제약으로 인해 브라우저가 도구 설명을 위에서 아래로 뒤집으면 “화살표”가 계속 잘못된 방향을 가리키는 경우가 많습니다. 고정된 컨테이너 쿼리 사용(@container anchored(fallback: flip-block)), 브라우저가 실제로 선택한 대체 위치를 기반으로 요소의 스타일을 지정할 수 있습니다.

중첩된 뷰 전환 그룹

뷰 전환은 혁명이었지만 특정 절충안이 있었습니다. 즉, 요소 ​​트리를 평면화하여 종종 3D 변환이나 오버플로가 중단되었습니다(클립). 나는 항상 뭔가가 빠져 있다는 느낌을 받았는데 이것이 바로 답일 수도 있습니다. 사용하여 view-transition-group: nearest마침내 전환 그룹을 서로 중첩할 수 있습니다.

이를 통해 전환 중에 클리핑 효과나 3D 회전을 유지할 수 있습니다. 이전에는 요소가 최상위 수준으로 올라갔기 때문에 불가능했던 일입니다.

.card img {
  view-transition-name: photo;
  view-transition-group: nearest; /* Keep it nested! */
}

타이포그래피와 모양

마침내 내 안의 인체공학자는 시도해보고 싶어 몸이 근질근질해졌습니다 텍스트 상자 자르기이는 최종적으로 완벽한 수직 정렬을 달성하기 위해 텍스트 내용(선행) 위와 아래의 성가신 추가 공백을 제거할 것을 약속합니다. 그리고 창의적인 측면에서는 corner-shape 그리고 shape() 함수는 직사각형이 아닌 레이아웃을 열어 CSS 변수에 응답하는 “사각형”과 복잡한 경로를 허용합니다. 즉, 나는 squircles로 가득 찬 디자인을 갖고 싶어합니다!

희망찬 미래

우리는 세상을 목격하고 있습니다. CSS는 이전에 JavaScript에 속했던 논리, 상태 및 복잡한 상호 작용을 처리할 수 있게 되었습니다.. 다음과 같은 기능 moveBefore (iframe/동영상의 DOM 상태 유지) 및 attr() (색상과 그리드에 문자열 이외의 유형을 사용하여) 이러한 현실을 더욱 확고히 합니다.

이러한 기능 중 일부는 현재 실험적이거나 Chrome에만 적용되는 기능이지만 그 추진력은 부인할 수 없습니다. 이러한 기능이 기본이 되도록 Interop과 같은 이니셔티브를 통해 모든 브라우저에서 지속적인 지원이 이루어지기를 바랍니다. 즉, 브라우저 엔진을 보유하는 것은 “Chrome 우선”에서 이러한 모든 멋진 기능을 보유하는 것만큼 중요합니다. 이러한 새로운 기능은 브라우저에 적용되기 전에 논의하고, 수정하고, 테스트해야 합니다.

CSS를 접하게 된 환상적인 순간입니다. 우리는 더 이상 단순한 문서 스타일이 아닙니다. 우리는 그 어느 때보다 강력한 기본 툴킷을 사용하여 역동적이고 인체공학적이며 강력한 애플리케이션을 제작하고 있습니다.

이 새로운 시대를 맞이하여 널리 알리자.

이것은 CSS Wrapped입니다!

(gg, yk)