Chrome 131의 새로운 기능

Mariko Kosaka
X

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

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

CSS 강조 표시 상속

::selection 및 ::target-text 의사 클래스의 CSS 강조 표시 상속이 변경됩니다. 이렇게 하면 스타일 상속을 위한 더 직관적인 모델이 생성되고 최근에 추가된 ::highlight, ::spelling-error, ::grammar-error 가상 클래스와 일치합니다.

강조 표시된 텍스트가 포함된 다음 코드 스니펫을 생각해 보세요.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

이전 버전의 Chrome에서는 강조 표시된 텍스트를 선택해도 상위 단락 요소에 ::selection 가상 클래스를 설정해도 텍스트 색상이 파란색으로 변경되지 않았습니다.

분홍색으로 강조 표시된 텍스트

이는 출처 요소 상속 모델을 사용하여 구현되었기 때문입니다. 따라서 이 경우 ::selection 가상 클래스는 파란색 클래스가 있는 요소와만 일치하며 이 단락 내의 요소에는 파란색 클래스가 없습니다.

강조 표시 상속 변경사항으로 인해 Chrome 131에서 동일한 텍스트를 선택하면 텍스트 색상이 파란색으로 변경됩니다.

파란색으로 강조 표시된 텍스트

이와 관련하여 몇 가지 변경사항이 더 있으므로 이 기능을 담당한 Igalia의 스테판 체니님이 작성한 CSS 선택 스타일 지정 상속 변경사항을 확인하세요.

<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의 새로운 기능을 바로 알려드리겠습니다.