이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 121의 새로운 기능

Adriana Jara

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

font-palette 애니메이션 및 기타 CSS 업데이트로 텍스트에 고유한 터치를 추가합니다.
Speculation Rules API가 개선되었습니다.
오리진 트라이얼에서 Element Capture API를 사용해 볼 수 있습니다.
그 외에도 다양한 기능이 있으니까요.

저는 아드리아나 자라입니다 자세히 알아보고 개발자를 위한 Chrome 121의 새로운 기능을 살펴보겠습니다.

CSS 업데이트

CSS 업데이트부터 시작하겠습니다.

이제 scrollbar-color 및 scrollbar-width 속성을 사용할 수 있습니다. 이러한 컨트롤을 사용하여 스크롤바를 맞춤설정하고 짐작하셨겠지만 색상과 너비를 변경할 수 있습니다.

font-palette 속성을 사용하면 특정 팔레트를 선택하여 색상 글꼴을 렌더링할 수 있습니다. 이제 이 속성이 애니메이션을 지원하므로 팔레트 간 전환이 2개의 선택된 팔레트 간에 부드럽게 전환됩니다.

유사 요소 ::spelling-error 및 ::grammar-error를 사용하면 맞춤법 및 문법 오류의 색상을 맞춤설정하고, 철자가 틀린 단어를 배경 색상이나 기타 장식으로 강조 표시하고, 보다 통합된 디자인으로 맞춤 맞춤법 검사를 구현할 수 있습니다.

SVG의 CSS 마스킹이 개선되었습니다. Chrome 120의 향상된 CSS 마스크 지원에 대한 후속 조치로 SVG에 새로운 마스크 지원 (여러 마스크, mask-mode, mask-composite, mask-position, mask-repeat)이 추가됩니다. 또한 이제 원격 SVG 마스크 (예: 마스크: url(masks.svg#star))가 지원됩니다.

수정: 이 도움말의 이전 버전에서 @import에 supports() 조건 지원을 추가한다고 언급했으나 실제로는 그렇지 않았습니다. Chrome 122에 포함된 변경사항입니다.

Speculation Rules API 업데이트

사이트에서 Speculation Rules API를 사용하여 사전 렌더링할 페이지를 Chrome에 프로그래매틱 방식으로 지정하면 페이지 탐색 시간을 단축하여 더 나은 사용자 환경을 제공할 수 있습니다.

이제 API에는 문서 규칙 지원이 포함됩니다. 문서 규칙은 브라우저가 페이지의 요소에서 추측 로드를 위한 URL 목록을 가져올 수 있는 추측 규칙 문법의 확장 프로그램입니다. 문서 규칙에는 이러한 링크를 사용할 수 있는 기준이 포함될 수 있습니다. 이 필드와 함께 새로운 'eagerness' 필드를 사용하면 페이지에서 마우스를 가져가거나 마우스를 내려놓을 때 링크를 자동으로 미리 가져오거나 사전 렌더링할 수 있습니다.

다음은 문서 규칙의 예입니다.

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

별도의 변경사항에서는 Speculation-Rules HTTP 응답 헤더를 사용하여 추측 규칙을 지정할 수 있습니다. 헤더는 인라인 <script> 요소 대신 사용할 수 있습니다. 이 헤더의 값은 "application/speculationrules+json" MIME 유형의 텍스트 리소스를 가리키는 URL이어야 합니다. 리소스의 규칙이 문서의 규칙 세트에 추가됩니다.

또한 No-Vary-Search 힌트는 URL 쿼리 매개변수가 변경되더라도 예측 미리 가져오기를 사용 설정합니다. No-Vary-Search HTTP 응답 헤더는 URL 쿼리의 일부 또는 전부를 일치 목적으로 무시할 수 있다고 선언합니다. 쿼리 매개변수 키의 순서가 일치를 방지해서는 안 되거나, 특정 쿼리 매개변수가 일치를 방지해서는 안 되거나, 알려진 특정 쿼리 매개변수만 불일치를 야기하도록 선언할 수 있습니다.

변경사항에 대한 자세한 내용은 Speculation Rules API 개선사항을 참고하세요.

Element Capture API 오리진 트라이얼

Element Capture API는 오리진 트라이얼에서 사용할 수 있습니다. 이 API를 사용하면 특정 HTML 요소를 캡처하고 기록할 수 있습니다. 전체 탭의 캡처를 특정 DOM 하위 트리의 캡처로 변환하여 타겟 요소의 직접 하위 트리만 캡처합니다. 즉, 가리는 콘텐츠와 가려진 콘텐츠를 모두 자르고 삭제합니다.

Element Capture API가 유용한 예에는 iframe에 서드 파티 애플리케이션을 삽입할 수 있는 화상 회의 앱이 있습니다. 이 시나리오에서 iframe을 동영상으로 캡처하여 원격 참여자에게 전송하는 것이 좋습니다.

Chrome 화상 회의 통화 스크린샷 — 엘라드는 프랑수아와의 화상 회의 통화에 서드 파티 애플리케이션을 사용합니다.

이를 위해 Region Capture를 사용할 수 있지만, 이 경우 드롭다운 목록과 같은 일부 콘텐츠가 선택한 콘텐츠 위에 그리면 해당 드롭다운이 녹화의 일부가 됩니다.

드롭다운 목록을 캡처한 스크린샷 — 엘라드의 드롭다운 목록이 프랑수아가 받은 콘텐츠 위에 표시됩니다.

Element Capture API는 공유하려는 요소를 타겟팅할 수 있도록 하여 이 문제를 해결합니다.

뷰에 드롭다운 목록이 없는 타겟 요소의 스크린샷 — François에게 Elad의 드롭다운 목록이 표시되지 않습니다.

모든 요소에서 동영상 스트림 캡처에서 코드 샘플을 확인하고 ElementCapture 오리진 트라이얼에 등록하세요.

그 외에도 다양한 기능 제공

물론 이 외에도 많은 것이 있습니다.

이제 Document Picture-in-Picture API의 일부인 resizeBy() 및 resizeTo() 메서드에 사용자 동작이 필요합니다.
HTMLSelectElement의 showPicker() 메서드를 사용하여 <select> 요소의 옵션 선택 도구를 프로그래매틱 방식으로 열 수 있습니다.
오리진 트라이얼에 있는 scope_extensions를 사용하면 웹 앱의 기본 출처와 연결된 출처 간에 합의된 경우 다른 출처를 포함하도록 웹 앱의 동작을 확장할 수 있습니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 다음 링크에서 Chrome 121의 추가 변경사항

최신 소식을 받아보려면 Chrome 개발자 YouTube 채널 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

아드리아나 자라님, Chrome 122가 출시되면 바로 Chrome의 새로운 기능에 대해 알려드리겠습니다.