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

Chrome 133 베타

Rachel Andrew

게시일: 2024년 1월 15일

별도로 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 출시에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록에서 여기에 나열된 기능에 대해 자세히 알아보세요. Chrome 133은 2024년 1월 15일부터 베타 버전입니다. 데스크톱의 Google.com 또는 Android의 Google Play 스토어에서 최신 버전을 다운로드할 수 있습니다.

CSS 및 UI

이 출시에서는 새로운 CSS 및 UI 기능 7개를 추가합니다.

CSS 고급 `attr()` 함수

CSS 수준 5에 지정된 attr()에 대한 증강을 구현합니다. 이를 통해 <string> 이외의 유형을 허용하고 모든 CSS 속성에서 사용할 수 있습니다 (의사 요소 content에 대한 기존 지원 외에도).

CSS attr() 업그레이드에서 자세히 알아보세요.

CSS `:open` 가상 클래스

:open 가상 클래스는 <dialog> 및 <details>가 열려 있는 상태일 때는 <dialog> 및 <details>와 일치하고, 선택 도구가 있고 선택 도구가 표시되는 모드일 때는 <select> 및 <input>와 일치합니다.

CSS 스크롤 상태 컨테이너 쿼리

컨테이너 쿼리를 사용하여 스크롤 상태에 따라 컨테이너의 자손에 스타일을 지정합니다.

쿼리 컨테이너는 스크롤 컨테이너이거나 스크롤 컨테이너의 스크롤 위치의 영향을 받는 요소입니다. 다음 상태를 쿼리할 수 있습니다.

stuck: 고정된 위치의 컨테이너가 스크롤 상자의 가장자리 중 하나에 고정됩니다.
snapped: 스크롤 스냅 정렬 컨테이너가 현재 가로 또는 세로로 스냅되었습니다.
scrollable: 스크롤 컨테이너를 쿼리된 방향으로 스크롤할 수 있는지 여부입니다.

새 container-type: scroll-state를 사용하면 컨테이너를 쿼리할 수 있습니다.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

CSS scroll-state()에서 자세히 알아보세요.

CSS `text-box`, `text-box-trim`, `text-box-edge`

텍스트 콘텐츠의 균형을 최적화하려면 text-box-trim 및 text-box-edge 속성과 함께 text-box 약어 속성을 사용하여 텍스트의 세로 정렬을 더 세부적으로 제어할 수 있습니다.

text-box-trim 속성은 위 또는 아래에서 자르려는 측면을 지정하고 text-box-edge 속성은 가장자리가 어떻게 잘려야 하는지 지정합니다.

이 속성을 사용하면 글꼴 측정값을 사용하여 세로 간격을 정확하게 제어할 수 있습니다. CSS text-box-trim에서 자세히 알아보세요.

`popover` 속성의 `hint` 값

Popover API는 popover 속성의 두 값(auto 및 manual)에 대한 동작을 지정합니다. 이 기능은 세 번째 값인 popover=hint를 설명합니다. '도움말' 유형 동작과 가장 자주 연결되는 힌트는 약간 다른 동작을 보입니다. 기본적으로 차이점은 hint가 중첩된 팝오버 스택을 열 때 auto에 종속된다는 것입니다. 따라서 기존 auto 팝오버 스택이 열려 있는 동안 관련 없는 hint 팝오버를 열 수 있습니다.

표준적인 예는 <select> 선택 도구가 열려 있고 (popover=auto) 마우스 오버 트리거 도움말 (popover=hint)이 표시된 경우입니다. 이 작업으로 <select> 선택 도구가 닫히지 않습니다.

popover.showPopover({source})를 사용하여 팝오버 간에 호출자 관계를 설정하는 명령형 방법을 추가합니다. 호출자 관계가 암시적 앵커 요소 참조를 만들 수 있도록 합니다.

다음 경우에는 버튼을 클릭하면 팝오버가 제대로 활성화되지만 그 후 팝오버 자체를 클릭해도 팝오버가 닫히지 않아야 합니다.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

이전에는 팝오버 클릭이 <button>로 전달되고 호출자를 활성화하여 팝오버를 닫았다가 열었다가 하기 때문입니다. 이제 예상되는 동작으로 변경되었습니다.

Web API

`Animation.overallProgress`

개발자에게 타임라인의 특성과 관계없이 반복 횟수에 따라 애니메이션이 얼마나 진행되었는지 편리하고 일관된 방식으로 보여줍니다. overallProgress 속성이 없으면 애니메이션의 반복 횟수와 애니메이션의 currentTime가 총 시간의 비율인지 (스크롤 기반 애니메이션의 경우) 아니면 절대 시간 수량인지 (시간 기반 애니메이션의 경우)를 고려하여 애니메이션이 얼마나 진행되었는지 수동으로 계산해야 합니다.

`Atomics` 객체의 `pause()` 메서드

pause() 메서드를 Atomics 네임스페이스 객체에 추가하여 CPU에 현재 코드가 스핀락을 실행하고 있다고 힌트합니다.

스크립트의 CSP 해시 보고

복잡한 웹 애플리케이션은 보안상의 이유로 다운로드하는 하위 리소스를 추적해야 하는 경우가 많습니다.

특히 향후 업계 표준 및 권장사항 (예: PCI-DSS v4)에 따라 웹 애플리케이션은 다운로드하고 실행하는 모든 스크립트의 인벤토리를 유지해야 합니다.

이 기능은 CSP 및 Reporting API를 기반으로 문서에서 로드하는 모든 스크립트 리소스의 URL 및 해시(CORS/동일 출처의 경우)를 보고합니다.

DOM 상태 보존 이동

요소의 상태를 재설정하지 않고 DOM 트리에서 요소를 이동할 수 있는 DOM 원시 (Node.prototype.moveBefore)를 추가합니다.

삭제 및 삽입 대신 이동하면 다음과 같은 상태가 보존됩니다.

<iframe> 요소는 로드된 상태로 유지됩니다.
활성 요소는 포커스를 유지합니다.
팝오버, 전체 화면, 모달 대화상자는 계속 열려 있습니다.
CSS 전환 및 애니메이션이 계속됩니다.

`<area>`에 `attributionsrc` 속성 노출

<area>의 attributionsrc 속성 노출을 노출되지 않은 경우에도 속성의 기존 처리 동작과 정렬합니다.

또한 <area>에서 이 속성을 지원하는 것이 좋습니다. 이 요소는 기본 탐색 노출 영역이며 Chrome은 이미 <a> 및 window.open의 다른 노출 영역에서 이를 지원합니다.

요소 타이밍 및 LCP에서 대략적인 교차 출처 `renderTime` 노출 (`Timing-Allow-Origin`와 관계없음)

요소 타이밍 및 LCP 항목에는 이미지 또는 텍스트가 페인트된 첫 번째 프레임에 맞춰 정렬된 renderTime 속성이 있습니다.

이 속성은 현재 이미지 리소스에 Timing-Allow-Origin 헤더를 요구하여 교차 출처 이미지에 대해 보호됩니다. 하지만 이 제한사항은 쉽게 해결할 수 있습니다 (예: 동일한 프레임에 동일한 출처 이미지와 교차 출처 이미지를 표시).

이로 인해 혼란이 발생했으므로 대신 이 제한을 삭제하고 문서가 교차 출처 격리되지 않은 경우 모든 렌더링 시간을 4밀리초씩 대략화할 계획입니다. 이는 교차 출처 이미지에 관한 유용한 디코딩 시간 정보를 유출하지 않을 만큼 대략적인 것 같습니다.

`FileSystemObserver` 인터페이스

FileSystemObserver 인터페이스는 웹사이트에 파일 시스템 변경사항을 알립니다. 사이트는 사용자가 이전에 권한을 부여한 파일 및 디렉터리의 변경사항을 사용자의 로컬 기기 또는 버킷 파일 시스템 (원본 비공개 파일 시스템이라고도 함)에서 관찰하고 변경 유형과 같은 기본 변경 정보에 관해 알림을 받습니다.

에너지 절약 모드에서 화면 멈춤

에너지 절약 모드가 활성화되어 있는 경우 Chrome은 5분 넘게 숨겨져 있고 비활성화 상태인 '브라우징 컨텍스트 그룹'을 정지합니다. 단, 다음에 해당하는 경우는 예외입니다.

오디오 또는 화상 회의 기능을 제공합니다 (마이크, 카메라, 화면/창/탭 캡처 또는 '열린' RTCDataChannel 또는 '실시간' MediaStreamTrack이 있는 RTCPeerConnection을 식별하여 감지됨).
외부 기기 (WebUSB, Web 블루투스, WebHID 또는 Web Serial을 사용하여 감지됨)를 제어합니다.
다른 연결에서 버전 업데이트 또는 트랜잭션을 차단하는 웹 잠금 또는 IndexedDB 연결을 보유합니다.

동결은 실행을 일시중지하는 것으로 구성됩니다. PageLifecycle API에 공식적으로 정의되어 있습니다.

CPU 사용량 기준점은 에너지 절약 모드가 활성화되어 있을 때 백그라운드 탭의 약 10% 를 정지하도록 보정됩니다.

여러 가져오기 맵

현재 가져오기 맵은 ES 모듈 전에 로드해야 하며 문서당 하나의 가져오기 맵만 있을 수 있습니다. 따라서 실제 시나리오에서 사용하기에는 취약하고 느릴 수 있습니다. 이보다 먼저 로드되는 모듈은 전체 앱을 손상시키고, 모듈이 많은 앱에서는 가능한 모든 모듈의 전체 맵을 먼저 로드해야 하므로 큰 차단 리소스가 됩니다.

이 기능을 사용하면 문서당 여러 가져오기 맵을 일관되고 결정론적인 방식으로 병합할 수 있습니다.

저장소 액세스 헤더

인증된 삽입이 파티션되지 않은 쿠키를 선택하는 다른 방법을 제공합니다. 이러한 헤더는 파티션되지 않은 쿠키가 특정 네트워크 요청에 포함되어 있는지 또는 포함될 수 있는지 나타내며 서버가 이미 부여된 'storage-access' 권한을 활성화할 수 있도록 합니다. 'storage-access' 권한을 활성화하는 다른 방법을 제공하면 iframe이 아닌 리소스에서 사용할 수 있고 인증된 삽입의 지연 시간을 줄일 수 있습니다.

`Promise<DOMString>`로 `ClipboardItem` 생성 지원

비동기 클립보드 write() 메서드의 입력인 ClipboardItem는 이제 생성자에서 Blob 외에도 문자열 값을 허용합니다. ClipboardItemData는 Blob, 문자열 또는 Blob 또는 문자열로 확인되는 Promise일 수 있습니다.

WebAssembly Memory64

memory64 제안서는 크기가 2^32비트보다 큰 선형 WebAssembly 메모리에 대한 지원을 추가합니다. 새로운 명령어를 제공하지는 않지만 메모리 및 테이블에 64비트 색인을 허용하도록 기존 명령어를 확장합니다.

웹 인증 API: PublicKeyCredential `getClientCapabilities()` 메서드

PublicKeyCredential getClientCapabilities() 메서드를 사용하면 사용자 클라이언트에서 지원되는 WebAuthn 기능을 확인할 수 있습니다. 이 메서드는 지원되는 기능 목록을 반환하므로 개발자는 클라이언트의 특정 기능에 따라 인증 환경과 워크플로를 조정할 수 있습니다.

WebGPU: 1개 구성요소 정점 형식 (및 unorm8x4-bgra)

지원 부족 또는 더 이상 어떤 브라우저에서도 지원되지 않는 이전 macOS 버전으로 인해 WebGPU의 초기 출시에 포함되지 않은 추가 정점 형식을 추가합니다. 1개 구성요소 정점 형식을 사용하면 애플리케이션이 이전에는 8비트 및 16비트 데이터 유형에 대해 2배 이상 더 요청해야 했던 필요한 데이터만 요청할 수 있습니다. unorm8x4-bgra 형식을 사용하면 동일한 셰이더를 유지하면서 BGRA로 인코딩된 꼭짓점 색상을 로드하는 것이 약간 더 편리합니다.

Web Cryptography API의 X25519 알고리즘

'X25519' 알고리즘은 [RFC7748]에 지정된 X25519 함수를 사용하여 키 계약을 실행하는 도구를 제공합니다. 'X25519' 알고리즘 식별자는 SubtleCrypto 인터페이스에서 구현된 작업(generateKey, importKey, exportKey, deriveKey, deriveBits)에 액세스하는 데 사용할 수 있습니다.

새로운 오리진 트라이얼

Chrome 133에서는 다음과 같은 새로운 출처 무료 체험판을 선택할 수 있습니다.

에너지 절약 모드에서 화면 멈춤 선택 해제하기

이 선택 해제 체험판을 사용하면 사이트에서 Chrome 133에 제공되는 에너지 절약 모드 동작의 정지를 선택 해제할 수 있습니다.

지원 중단 및 삭제

이 버전의 Chrome에서는 아래에 나열된 지원 중단 및 삭제가 적용됩니다. ChromeStatus.com에서 예정된 지원 중단, 현재 지원 중단, 이전 삭제 목록을 확인하세요.

이 Chrome 출시에서는 한 가지 기능이 지원 중단됩니다.

WebGPU `maxInterStageShaderComponents` 한도 지원 중단

maxInterStageShaderComponents limit는 여러 요소로 인해 지원 중단되었습니다. Chrome 135에서 의도된 삭제일입니다.

maxInterStageShaderVariables 중복: 이 한도는 이미 셰이더 단계 간에 전달되는 데이터의 양을 제어하는 유사한 목적으로 사용됩니다.
경미한 불일치: 두 제한을 계산하는 방법에는 약간의 차이가 있지만 이러한 차이는 미미하며 maxInterStageShaderVariables 제한 내에서 효과적으로 관리할 수 있습니다.
간소화: maxInterStageShaderComponents를 삭제하면 셰이더 인터페이스가 간소화되고 개발자의 복잡성이 줄어듭니다. 미묘한 차이가 있는 두 가지 제한을 별도로 관리하는 대신 더 적절한 이름을 지정하고 포괄적인 maxInterStageShaderVariables에 집중할 수 있습니다.

이 Chrome 출시에서는 두 가지 기능이 삭제됩니다.

`<link rel=prefetch>` 5분 규칙 삭제

이전에는 <link rel=prefetch>를 사용하여 리소스를 미리 가져올 때 Chrome에서 재가져오기를 방지하기 위해 5분 이내에 처음 사용할 때 캐시 시맨틱 (max-age 및 no-cache)을 무시했습니다. 이제 Chrome은 이 특수 사례를 삭제하고 일반 HTTP 캐시 시맨틱을 사용합니다.

즉, 웹 개발자는 <link rel=prefetch>의 이점을 누리려면 적절한 캐싱 헤더(Cache-Control 또는 Expires)를 포함해야 합니다.

이는 비표준 <link rel=prerender>에도 영향을 미칩니다.

초기 환경설정 첫 실행 탭으로 Chrome 시작 페이지 트리거 삭제

이제 initial_preferences 파일의 first_run_tabs 속성에 chrome://welcome를 포함해도 효과가 없습니다. 이 페이지는 데스크톱 플랫폼에서 트리거되는 첫 실행 환경과 중복되므로 삭제되었습니다.

Chrome 133 베타

CSS 및 UI

CSS 고급 `attr()` 함수

CSS `:open` 가상 클래스

CSS 스크롤 상태 컨테이너 쿼리

CSS `text-box`, `text-box-trim`, `text-box-edge`

`popover` 속성의 `hint` 값

팝오버 호출자 및 앵커 위치 지정 개선

호출자 내에 중첩된 팝오버가 호출자를 다시 호출하면 안 됨

Web API

`Animation.overallProgress`

`Atomics` 객체의 `pause()` 메서드

스크립트의 CSP 해시 보고

DOM 상태 보존 이동

`<area>`에 `attributionsrc` 속성 노출

요소 타이밍 및 LCP에서 대략적인 교차 출처 `renderTime` 노출 (`Timing-Allow-Origin`와 관계없음)

`FileSystemObserver` 인터페이스

에너지 절약 모드에서 화면 멈춤

여러 가져오기 맵

저장소 액세스 헤더

`Promise<DOMString>`로 `ClipboardItem` 생성 지원

WebAssembly Memory64

웹 인증 API: PublicKeyCredential `getClientCapabilities()` 메서드

WebGPU: 1개 구성요소 정점 형식 (및 unorm8x4-bgra)

Web Cryptography API의 X25519 알고리즘

새로운 오리진 트라이얼

에너지 절약 모드에서 화면 멈춤 선택 해제하기

지원 중단 및 삭제

WebGPU `maxInterStageShaderComponents` 한도 지원 중단

`<link rel=prefetch>` 5분 규칙 삭제

초기 환경설정 첫 실행 탭으로 Chrome 시작 페이지 트리거 삭제

Chrome 133 베타

CSS 및 UI

CSS 고급 attr() 함수

CSS :open 가상 클래스

CSS 스크롤 상태 컨테이너 쿼리

CSS text-box, text-box-trim, text-box-edge

popover 속성의 hint 값

팝오버 호출자 및 앵커 위치 지정 개선

호출자 내에 중첩된 팝오버가 호출자를 다시 호출하면 안 됨

Web API

Animation.overallProgress

Atomics 객체의 pause() 메서드

스크립트의 CSP 해시 보고

DOM 상태 보존 이동

<area>에 attributionsrc 속성 노출

요소 타이밍 및 LCP에서 대략적인 교차 출처 renderTime 노출 (Timing-Allow-Origin와 관계없음)

FileSystemObserver 인터페이스

에너지 절약 모드에서 화면 멈춤

여러 가져오기 맵

저장소 액세스 헤더

Promise<DOMString>로 ClipboardItem 생성 지원

WebAssembly Memory64

​​웹 인증 API: PublicKeyCredential getClientCapabilities() 메서드

WebGPU: 1개 구성요소 정점 형식 (및 unorm8x4-bgra)

Web Cryptography API의 X25519 알고리즘

새로운 오리진 트라이얼

에너지 절약 모드에서 화면 멈춤 선택 해제하기

지원 중단 및 삭제

WebGPU maxInterStageShaderComponents 한도 지원 중단

<link rel=prefetch> 5분 규칙 삭제

초기 환경설정 첫 실행 탭으로 Chrome 시작 페이지 트리거 삭제

CSS 고급 `attr()` 함수

CSS `:open` 가상 클래스

CSS `text-box`, `text-box-trim`, `text-box-edge`

`popover` 속성의 `hint` 값

`Animation.overallProgress`

`Atomics` 객체의 `pause()` 메서드

`<area>`에 `attributionsrc` 속성 노출

요소 타이밍 및 LCP에서 대략적인 교차 출처 `renderTime` 노출 (`Timing-Allow-Origin`와 관계없음)

`FileSystemObserver` 인터페이스

`Promise<DOMString>`로 `ClipboardItem` 생성 지원

웹 인증 API: PublicKeyCredential `getClientCapabilities()` 메서드

WebGPU `maxInterStageShaderComponents` 한도 지원 중단

`<link rel=prefetch>` 5분 규칙 삭제