Chrome 133의 새로운 기능

Rachel Andrew

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

CSS 고급 attr() 함수

이 기능은 CSS 레벨 5에 지정된 기존 attr() 함수에 추가됩니다. 이를 통해 <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 Developers YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

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