Chrome 131의 새로운 기능

Mariko Kosaka
X

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

저는 마리코 코사카입니다. Chrome 131의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

<details> 및 <summary>의 스타일 개선

이제 공개 또는 아코디언 위젯을 빌드하기 위해 <details> 및 <summary> 요소의 구조에 스타일을 지정하는 옵션이 더 많아졌습니다.

이번 출시에 도입된 변경사항으로 display 속성을 사용할 수 있게 되었으며 ::details-content 의사 요소가 추가되어 펼치고 접을 수 있는 부분의 스타일을 지정할 수 있습니다.

이전에는 details 요소의 디스플레이 유형을 변경할 수 없었습니다. 이제 이 제한이 완화되어 그리드 또는 Flex 레이아웃과 같은 항목을 사용할 수 있습니다.

여러 details 요소로 구성된 이 독점적인 섹션별 펼치기 예시에서 details 요소 중 하나가 펼쳐지면 콘텐츠가 summary 옆에 배치됩니다.

Flex 레이아웃이 있는 아코디언 위젯

details 요소에 플렉스 레이아웃을 사용하면 됩니다. grid와 같은 다른 디스플레이 값으로 더 많은 레이아웃 패턴을 시도해 볼 수도 있습니다.

자세한 설명은 Bramus의 <details> 스타일 지정 옵션 더보기 도움말을 참고하세요.

@page 여백 상자

웹 문서를 인쇄하거나 PDF로 내보낼 때 페이지 여백 상자를 지원하는 기능이 추가되었습니다.

페이지 여백 상자를 사용하면 페이지의 여백 영역에 콘텐츠를 정의할 수 있습니다. 따라서 브라우저에서 생성한 기본 제공 머리글과 바닥글을 사용하는 대신 맞춤 머리글과 바닥글을 제공할 수 있습니다.

페이지 여백은 CSS의 @page 규칙을 사용하여 정의됩니다.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

여백 상자의 모양과 콘텐츠는 생성된 콘텐츠를 사용하여 16개의 여백 상자를 나타내는 at-rule 내의 CSS 속성으로 지정됩니다.

페이지 번호 지정에는 현재 페이지 번호의 경우 page, 총 페이지 수의 경우 pages를 사용하여 카운터도 지원됩니다.

자세한 내용은 레이첼의 CSS를 사용하여 인쇄할 때 웹페이지의 여백에 콘텐츠 추가 도움말을 참고하세요.

그 외에도 다양한 기능 제공

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

  • 'clip-path', 'fill', 'stroke', 'marker'의 외부 SVG 리소스를 지원합니다.
  • WebHID는 전용 작업자 컨텍스트 내에서 사용 설정됩니다.
  • font-variant-emoji CSS 속성을 사용하여 그림 이모티콘의 동작을 제어합니다.

추가 자료

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

구독

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

저는 마리코 코사카입니다. Chrome 132가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.