게시일: 2024년 1월 15일
별도로 명시되지 않는 한 다음 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 출시에 적용됩니다. 여기에 나열된 기능에 관해 자세히 알아보려면 제공된 링크 또는 ChromeStatus.com의 목록을 참고하세요. Chrome 133은 2024년 1월 15일 기준으로 베타 버전입니다. 데스크톱용은 Google.com에서, Android용은 Google Play 스토어에서 최신 버전을 다운로드할 수 있습니다.
CSS 및 UI
이 출시 버전에는 7가지 새로운 CSS 및 UI 기능이 추가되었습니다.
CSS 고급 attr() 함수
CSS 수준 5에 지정된 attr()에 증강을 구현합니다. 이 증강은
<string> 이외의 유형을 허용하고 모든 CSS 속성에서 사용할 수 있도록 합니다 (가상 요소 content에 대한
기존 지원 외에도).
CSS attr() 업그레이드에서 자세히 알아보세요.
CSS :open 가상 클래스
:open 가상 클래스는 <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 값
팝오버 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() 메서드
현재 코드가 스핀락을 실행 중임을 CPU에 알리기 위해 pause() 메서드를 Atomics 네임스페이스 객체에 추가합니다.
스크립트의 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 헤더를 요구하여 교차 출처 이미지에 대해 보호됩니다. 하지만 이 제한사항은 쉽게 해결할 수 있습니다 (예: 동일한 프레임에 동일 출처 및 교차 출처 이미지 표시).
이로 인해 혼동이 발생했으므로 이 제한사항을 삭제하고 대신 문서가 교차 출처 분리되지 않은 경우 모든 렌더링 시간을 4ms로 대략적으로 조정할 계획입니다. 이는 교차 출처 이미지에 관한 유용한 디코딩 시간 정보가 유출되지 않도록 대략적으로 조정하는 데 충분합니다.
responseStart 되돌리고 firstResponseHeadersStart 도입
103 조기 힌트가 사용 설정된 경우 응답에는 두 개의 타임스탬프가 있습니다.
- 조기 힌트가 도착하는 경우 (103)
- 최종 헤더가 도착하는 경우 (예: 200)
Chrome 115에서 이러한 두 타임스탬프를 측정할 수 있도록
firstInterimResponseStart
를 제공했을 때
responseStart (used by
첫 바이트까지의 시간 (TTFB))에서 사용하는 의미도
"the final headers"로 변경했습니다. 이로 인해 흔히 사용되는 이 측정항목에 대해 유사한 변경사항을 적용하지 않은 브라우저 및 도구와의 웹 호환성 문제가 발생했습니다.
Chrome 133은 이 호환성 문제를 해결하기 위해 이 responseStart 변경사항을 되돌리고 대신 사이트에서 최종 헤더까지의 시간을 측정할 수 있도록 firstResponseHeadersStart를 도입하면서 TTFB의 원래 정의를 유지합니다.
FileSystemObserver 인터페이스
FileSystemObserver 인터페이스는
웹사이트에 파일 시스템 변경사항을 알립니다. 사이트는 사용자가 이전에 권한을 부여한 파일 및 디렉터리의 변경사항을 사용자의 로컬 기기 또는 버킷 파일 시스템 (Origin Private File System이라고도 함)에서 관찰하고 변경 유형과 같은 기본 변경 정보를 알립니다.
에너지 절약 모드에서 정지
에너지 절약 모드가 활성화되어 있는 경우, 동일 출처 프레임의 하위 그룹이 CPU 사용량 한도를 초과하면 5분 넘게 숨겨져 있고 비활성화 상태인 '브라우징 컨텍스트 그룹'이 Chrome에서 정지됩니다. 단, 다음과 같은 경우는 예외입니다.
- 오디오 또는 화상 회의 기능을 제공합니다 (마이크, 카메라, 화면/창/탭 캡처 또는 '열린' RTCDataChannel 또는 '실시간' MediaStreamTrack이 있는 RTCPeerConnection을 식별하여 감지됨).
- 외부 기기 (WebUSB, Web 블루투스, WebHID 또는 Web Serial을 사용하여 감지됨)를 제어합니다.
- 버전 업데이트 또는 다른 연결의 트랜잭션을 차단하는 Web Lock 또는 IndexedDB 연결을 보유합니다.
정지는 실행을 일시중지하는 것으로 구성됩니다. 페이지 수명 주기 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로 인코딩된 정점 색상을 더 편리하게 로드할 수 있습니다.
웹 암호화 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 캐시 의미 체계를 사용합니다.
즉, 웹 개발자는 적절한 캐싱 헤더
(Cache-Control 또는 Expires)를 포함해야 <link rel=prefetch>의 이점을 확인할 수 있습니다.
이는 비표준 <link rel=prerender>에도 영향을 미칩니다.
초기 환경설정 첫 번째 실행 탭을 통한 Chrome 시작 페이지 트리거 삭제
initial_preferences 파일의 first_run_tabs 속성에 chrome://welcome을 포함해도 이제는 아무런 효과가 없습니다. 이 페이지는 데스크톱 플랫폼에서 트리거되는 첫 실행 환경과 중복되므로 삭제되었습니다.