게시일: 2025년 10월 1일
달리 명시되지 않는 한 이러한 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 Chrome 142 베타 채널 출시에 적용됩니다. 제공된 링크 또는 ChromeStatus.com에서 이러한 기능에 관해 자세히 알아보세요. 데스크톱용 Chrome 142 베타는 Google.com에서, Android용 Chrome 142 베타는 Google Play 스토어에서 다운로드하세요.
CSS 및 UI
:target-before 및 :target-after 가상 클래스
이러한 가상 클래스는 플랫 트리 순서에 따라 결정되는 동일한 스크롤 마커 그룹 내에서 활성 마커 (:target-current와 일치) 앞이나 뒤에 있는 스크롤 마커와 일치합니다.
:target-before: 그룹 내 플랫 트리 순서에서 활성 마커 앞에 있는 모든 스크롤 마커와 일치합니다.:target-after: 그룹 내 플랫 트리 순서에서 활성 마커 뒤에 있는 모든 스크롤 마커와 일치합니다.
::view-transition 요소의 절대 위치 지정
뷰 전환은 요소의 가상 하위 트리를 사용하며 ::view-transition이 전환의 루트입니다. 이전에는 ::view-transition 요소가 position: fixed로 지정되었습니다. CSS 작업 그룹은 이를 position: absolute로 만들기로 결정했으며 이제 Chrome에서 이 변경사항을 반영합니다.
이 요소의 포함 블록은 절대 또는 고정 사례에서 스냅샷 포함 블록으로 유지되므로 이 변경사항은 눈에 띄지 않습니다. 눈에 띄는 유일한 차이점은 getComputedStyle에 있습니다.
문서의 activeViewTransition 속성
뷰 전환 API를 사용하면 개발자가 서로 다른 상태 간에 시각적 전환을 시작할 수 있습니다. 기본 SPA 진입점은 전환 객체를 반환하는 startViewTransition()입니다. 이 객체에는 전환 진행률을 추적하는 여러 Promise와 기능이 포함되어 있으며 전환을 건너뛰거나 유형을 수정하는 등의 방식으로 전환을 조작할 수 있습니다.
Chrome 142부터 개발자는 더 이상 이 객체를 저장할 필요가 없습니다. document.activeViewTransition 속성은 이 객체를 나타내거나 전환이 진행 중이 아닌 경우 null을 나타냅니다.
이는 객체가 pageswap 및 pagereveal 이벤트를 통해서만 제공되는 MPA 전환에도 적용됩니다. 이 업데이트에서 document.activeViewTransition은 전환 기간 동안 이 객체로 설정됩니다.
스타일 컨테이너 쿼리 및 if()의 범위 구문
Chrome은 범위 구문 지원을 추가하여 CSS 스타일 쿼리 및 if() 함수를 개선합니다.
스타일 쿼리를 정확한 값 일치(예: style(--theme: dark)) 이상으로 확장합니다. 개발자는 비교 연산자(예: > 및 <)를 사용하여 맞춤 속성, 리터럴 값(예: 10px 또는 25%), 대체 함수(예: attr() 및 env())의 값을 비교할 수 있습니다. 비교가 유효하려면 양쪽이 동일한 데이터 유형으로 확인되어야 합니다. 다음 숫자 유형으로 제한됩니다. <length>, <number>, <percentage>, <angle>, <time>, <frequency>, <resolution>.
예:
맞춤 속성을 리터럴 길이와 비교합니다.
@container style(--inner-padding > 1em) {
.card {
border: 2px solid;
}
}
두 리터럴 값을 비교합니다.
@container style(1em < 20px) {
/* ... */
}
if()에서 스타일 범위 사용:
.item-grid {
background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}
관심 인보커 (interestfor 속성)
Chrome은 interestfor 속성을 <button> 및 <a> 요소에 추가합니다. 이 속성은 요소에 '관심' 동작을 추가합니다. 사용자가 요소에 '관심을 표시'하면 대상 요소에서 작업이 트리거됩니다(예: 팝오버 표시). 사용자 에이전트는 사용자가 요소 위에 포인터를 올려놓거나, 키보드에서 특수 단축키를 누르거나, 터치스크린에서 요소를 길게 누르는 등의 방법을 통해 요소에 '관심을 표시'하는 시점을 감지합니다. 관심이 표시되거나 사라지면 대상에서 InterestEvent가 발생하며, 여기에는 팝오버를 표시하고 숨기는 등의 팝오버의 기본 작업이 있습니다.
font-language-override 속성
Chrome은 font-language-override CSS 속성 지원을 도입합니다. 이 속성을 사용하면 개발자가 CSS에서 직접 4자 언어 태그를 지정하여 OpenType 글리프 대체에 사용되는 시스템 언어를 재정의할 수 있습니다.
이를 통해 세분화된 타이포그래피 제어가 가능하며, 이는 다국어 콘텐츠 또는 언어별 글리프 대안이 있는 글꼴에 특히 유용합니다.
SVG <a> 요소의 download 속성
Chrome은 SVG 2 사양에 맞춰 SVGAElement 인터페이스에서 download 속성 지원을 도입합니다. download 속성을 사용하면 작성자가 SVG 하이퍼링크의 대상이 이동하는 대신 다운로드하도록 지정할 수 있습니다. 이는 이미 HTMLAnchorElement에서 지원되는 동작을 반영합니다. 주요 브라우저 간의 상호 운용성을 높이고 HTML과 SVG <a> 요소 간의 일관된 동작을 보장하며 개발자 경험과 사용자 기대치를 개선합니다.
선택 요소 렌더링 모드의 모바일 및 데스크톱 패리티
size 및 multiple 속성을 사용하면 <select> 요소를 인페이지 목록 상자 또는 팝업이 있는 버튼으로 렌더링할 수 있습니다. 하지만 이러한 모드는 모바일 및 데스크톱 Chrome에서 일관되게 사용할 수 없습니다. 인페이지 목록 상자 렌더링은 모바일에서 사용할 수 없으며 multiple 속성이 있는 경우 팝업이 있는 버튼은 데스크톱에서 사용할 수 없습니다.
이 업데이트는 목록 상자를 모바일에 추가하고 다중 선택 팝업을 데스크톱에 추가하며 size 및 multiple 속성이 있는 선택사항이 모바일과 데스크톱에서 동일한 렌더링 모드를 생성하도록 합니다. 변경사항은 다음과 같이 요약됩니다.
size속성의 값이1보다 크면 항상 인페이지 렌더링이 사용됩니다. 이전에는 모바일 기기에서 이를 무시했습니다.size속성 없이multiple속성이 설정되면 인페이지 렌더링이 사용됩니다. 이전에는 모바일 기기에서 인페이지 목록 상자 대신 팝업을 사용했습니다.size=1로multiple속성이 설정되면 팝업이 사용됩니다. 이전에는 데스크톱 기기에서 인페이지 목록 상자를 사용했습니다.
동일 출처 렌더러에서 시작된 탐색 전반에서 고정 사용자 활성화
Chrome은 페이지가 동일 출처의 다른 페이지로 이동한 후에도 고정 사용자 활성화 상태를 유지합니다. 탐색 후 페이지에서 사용자 활성화가 유지되지 않으면 자동 초점 시 가상 키보드를 표시하는 등의 일부 사용 사례가 제한됩니다. 이는 SPA 대신 MPA를 빌드하려는 개발자를 차단해 왔습니다.
여기에는 브라우저에서 시작된 탐색 요청 (새로고침, 방문 기록 탐색, 주소 표시줄에 입력된 URL 등)이 포함되지 않습니다.
Web API
WebGPU: primitive_index 기능
WebGPU는 새로운 WGSL 셰이더 기본 제공 primitive_index를 노출하는 새로운 선택적 기능을 추가합니다. 이는 vertex_index 및 instance_index 기본 제공과 마찬가지로 지원되는 하드웨어의 프래그먼트 셰이더에 기본 요소별 색인을 제공합니다. 기본 요소 색인은 가상화된 지오메트리와 같은 고급 그래픽 기법에 유용합니다.
WebGPU: 텍스처 형식 tier1 및 tier2
렌더링 연결, 혼합, 멀티샘플링, 해결, storage_binding과 같은 기능으로 GPU 텍스처 형식 지원을 확장합니다.
insertFromPaste, insertFromDrop, insertReplacementText 입력 이벤트의 DataTransfer 속성
contenteditable 요소의 편집 작업 중에 클립보드 및 드래그 앤 드롭 데이터에 액세스할 수 있도록 insertFromPaste, insertFromDrop, insertReplacementText의 inputType 값을 사용하여 입력 이벤트의 dataTransfer 속성을 채웁니다.
dataTransfer 객체에는 beforeinput 이벤트 중에 사용 가능한 동일한 데이터가 포함되어 있습니다.
이 기능은 contenteditable 요소에만 적용됩니다. 양식 컨트롤
(textarea, input)의 경우 동작은 변경되지 않습니다.
이 속성을 사용하면 Chrome이 Safari 및 Firefox와 상호 운용될 수 있습니다.
미디어 세션: enterpictureinpicture 작업 세부정보에 이유 추가
미디어 세션 API의 enterpictureinpicture 작업으로 전송되는 MediaSessionActionDetails에 enterPictureInPictureReason을 추가합니다. 이를 통해 개발자는 사용자가 명시적으로 트리거한 enterpictureinpicture 작업 (예: 사용자 에이전트의 버튼)과 콘텐츠가 가려지기 때문에 사용자 에이전트에서 자동으로 트리거한 enterpictureinpicture 작업을 구분할 수 있습니다.
웹 음성 API 컨텍스트 편향
이 업데이트를 사용하면 웹사이트에서 웹 음성 API에 인식 구문 목록을 추가하여 음성 인식의 컨텍스트 편향을 지원할 수 있습니다.
개발자는 구문 목록을 제공하고 업데이트하여 이러한 구문을 선호하도록 음성 인식 모델에 편향을 적용할 수 있습니다. 이를 통해 도메인별 및 맞춤형 음성 인식의 정확성과 관련성을 개선할 수 있습니다.
JSON 모듈의 더 엄격한 *+json MIME 토큰 유효성 검사
*+json과 일치할 때 MIME 유형의 유형 또는 하위 유형에 HTTP가 아닌 토큰 코드 포인트 (예: 공백)가 포함된 JSON 모듈 스크립트 응답을 거부합니다. 이는 MIME 스니핑 사양 및 기타 엔진과 일치합니다. Interop2025 모듈 포커스 영역의 일부입니다.
FedCM: UI에 서드 파티 iframe 출처 표시 지원
Chrome 142 이전에는 FedCM이 항상 UI에 최상위 사이트를 표시했습니다.
이는 iframe이 개념적으로 퍼스트 파티인 경우에 잘 작동합니다 (예: foo.com에 사용자에게 의미가 없는 iframe foostatic.com이 있을 수 있음).
하지만 iframe이 실제로 서드 파티인 경우 사용자가 사용자 인증 정보를 공유하는 대상을 더 잘 이해할 수 있도록 UI에 iframe 출처를 표시하는 것이 좋습니다. 예를 들어 사진 편집기가 도서 출판 웹 앱에 삽입되어 있으며 사용자가 이전에 사진 편집기로 저장한 파일에 액세스할 수 있도록 허용할 수 있습니다. 이제 이 기능을 사용할 수 있습니다.
출처 기반 프로세스 격리
프로세스 격리 정책을 프로세스를 사이트 (예: example.com)에 잠그는 방식에서 특정 출처 (예: foo.example.com)에 잠그는 방식으로 변경합니다.
보안을 더욱 강화하기 위해 Chrome은 '출처 격리'라는 더 세분화된 프로세스 격리 모델로 전환하고 있습니다. Chrome은 동일한 사이트의 서로 다른 출처(예: a.example.com 및 b.example.com)를 단일 렌더러 프로세스로 그룹화하는 '사이트 격리'를 사용했습니다.
출처 격리를 사용하면 각 개별 출처 (예: https://foo.example.com)가 자체 렌더러 프로세스에 격리됩니다. 프로세스의 경계를 웹의 기본 출처 기반 보안 모델에 맞춤으로써 Chrome의 보안 아키텍처를 강화하여 사이트 내 잠재적 취약점을 더욱 효과적으로 보호할 수 있습니다.
보안 컨텍스트에서만 노출되는 상호 운용 가능한 pointerrawupdate 이벤트
PointerEvents 사양은 2020년에 pointerrawupdate를 보안 컨텍스트로 제한하여, 안전하지 않은 컨텍스트에서 이벤트 실행과 글로벌 이벤트 리스너를 모두 숨겼습니다. 이 업데이트를 통해 Chrome은 업데이트된 사양을 준수하게 되어 다른 주요 브라우저와의 상호 운용성을 확보할 수 있습니다.
진행 중인 오리진 트라이얼
Chrome 142에서는 다음 새로운 오리진 트라이얼을 선택할 수 있습니다.
기기 바인딩 세션 사용자 인증 정보
웹사이트에서 세션을 단일 기기에 안전하게 바인드하는 방법입니다.
서버에서 세션을 기기에 안전하게 바인드할 수 있습니다. 브라우저는 서버에서 요청할 때 비공개 키 소유 증명을 사용하여 세션을 주기적으로 갱신합니다.
최상위 사이트별 TCP 소켓 풀
이 실험에서는 탭 두 개가 풀을 소진하지 않도록 최상위 사이트별 한도 256을 추가하면서 프로필별 TCP 소켓 풀 크기를 256(기본값)에서 513으로 변경하는 것이 미치는 영향을 평가합니다. 프로필별 한도를 512로 올리는 것이 가능한지 연구했으며 부정적인 결과는 나오지 않았습니다. 최상위 사이트별 한도 256은 기본 프로필별 한도와 동일하므로 성능에 부정적인 영향을 미치지 않습니다. 이러한 한도는 WebSocket 풀과 일반 (HTTP) 소켓 풀에 독립적으로 적용됩니다.
부정적인 영향이 없으면 이 실험을 직접 시작할 계획입니다.