Chrome 133의 새로운 기능

Rachel Andrew

다음 사항에 유의하시기 바랍니다.

CSS 고급 attr() 함수

이 기능은 기존 attr() 함수에 CSS 수준 5에 지정된 기능을 추가합니다. 이렇게 하면 <string> 이외의 유형을 허용하고 가상 요소 콘텐츠에 대한 기존 지원 외에도 모든 CSS 속성에 사용할 수 있습니다.

다음 예에서 div의 color 속성 값은 data-color 속성의 값을 사용합니다. 이 속성 값은 attr() 및 type()를 사용하여 <color>로 파싱됩니다. 대체 값은 red로 설정됩니다.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

CSS attr() 업그레이드에서 자세히 알아보세요.

CSS 스크롤 상태 컨테이너 쿼리

컨테이너 쿼리를 사용하여 스크롤 상태에 따라 컨테이너의 자손에 스타일을 지정합니다.

쿼리 컨테이너는 스크롤 컨테이너이거나 스크롤 컨테이너의 스크롤 위치의 영향을 받는 요소입니다. 다음 상태를 쿼리할 수 있습니다.

  • stuck: 고정된 위치의 컨테이너가 스크롤 상자의 가장자리 중 하나에 고정됩니다.
  • snapped: 스크롤 스냅 정렬 컨테이너가 현재 가로 또는 세로로 스냅되어 있습니다.
  • scrollable: 스크롤 컨테이너를 쿼리된 방향으로 스크롤할 수 있는지 여부입니다.

새 컨테이너 유형: scroll-state를 사용하면 컨테이너를 쿼리할 수 있습니다. 예를 들면 다음과 같습니다.

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

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

CSS 스크롤 상태 쿼리에서 자세히 알아보고 데모를 확인하세요.

CSS text-box, text-box-trim, text-box-edge

text-box-trim 속성은 위 또는 아래에서 자르려는 측면을 지정하고 text-box-edge 속성은 가장자리가 어떻게 잘려야 하는지 지정합니다.

이 속성을 사용하면 글꼴 측정값을 사용하여 세로 간격을 정확하게 제어할 수 있습니다.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

CSS text-box-trim에서 이러한 새 속성을 사용하는 방법을 알아보세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

  • Animation.overallProgress를 사용하면 타임라인의 특성과 관계없이 반복 횟수에 따라 애니메이션이 얼마나 진행되었는지 편리하고 일관되게 나타낼 수 있습니다.
  • Node.prototype.moveBefore를 사용하면 요소의 상태를 재설정하지 않고도 DOM 트리에서 요소를 이동할 수 있습니다.
  • FileSystemObserver 인터페이스는 웹사이트에 파일 시스템 변경사항을 알립니다.
  • PublicKeyCredential getClientCapabilities() 메서드를 사용하면 사용자의 클라이언트에서 지원되는 WebAuthn 기능을 확인할 수 있습니다.

이러한 기능과 Chrome의 새로운 기능에 관한 자세한 내용은 전체 Chrome 133 출시 노트를 참고하세요.

추가 자료

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 133의 추가 변경사항은 다음 링크를 확인하세요.

구독

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

Chrome 133이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.