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 요소의 디스플레이 유형을 변경할 수 없었습니다. 이제 이 제한이 완화되어 그리드 또는 플렉스 레이아웃 등을 사용할 수 있습니다.

여러 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', 'str', 'marker'의 외부 SVG 리소스를 지원합니다.
  • WebHID는 전용 작업자 컨텍스트 내에서 사용 설정됩니다.
  • font-variant-emoji CSS 속성으로 그림 이모티콘의 동작을 제어합니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 131의 추가 변경사항은 다음 링크를 참고하세요.

구독

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

안녕하세요, Mariko Kosaka입니다. Chrome 132가 출시되는 즉시 Chrome의 새로운 기능을 알려드리겠습니다.