게시일: 2025년 10월 1일
별도로 명시되지 않는 한 이러한 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 Chrome 142 베타 채널 출시에 적용됩니다. 제공된 링크 또는 ChromeStatus.com에서 이러한 기능에 대해 자세히 알아보세요. 데스크톱의 경우 Google.com에서, Android의 경우 Google Play 스토어에서 Chrome 142 베타를 다운로드하세요.
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 속성
View Transitions API를 사용하면 개발자가 여러 상태 간에 시각적 전환을 시작할 수 있습니다. 기본 SPA 진입점은 startViewTransition()이며, 전환 객체를 반환합니다. 이 객체에는 전환 진행 상황을 추적하는 여러 프로미스와 기능이 포함되어 있으며 전환을 조작할 수 있습니다(예: 전환을 건너뛰거나 유형을 수정).
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에서 <button> 및 <a> 요소에 interestfor 속성을 추가합니다. 이 속성은 요소에 '관심분야' 동작을 추가합니다. 사용자가 요소에 '관심을 보이면' 타겟 요소에서 팝오버 표시와 같은 작업이 트리거됩니다. 사용자 에이전트는 사용자가 요소 위로 포인터를 가져가거나, 키보드의 특수 단축키를 누르거나, 터치 스크린에서 요소를 길게 누르는 등의 방법을 통해 요소에 '관심을 보이는' 경우를 감지합니다. 관심이 표시되거나 사라지면 InterestEvent가 타겟에서 실행되며, 여기에는 팝오버를 표시하고 숨기는 등의 팝오버의 기본 작업이 있습니다.
font-language-override 속성
Chrome에서 font-language-override CSS 속성을 지원합니다. 이 속성을 사용하면 개발자가 CSS에서 직접 4자리 언어 태그를 지정하여 OpenType 글리프 대체에 사용되는 시스템 언어를 재정의할 수 있습니다.
이를 통해 세부적인 서체 제어가 가능하며, 이는 다국어 콘텐츠나 언어별 글리프 변형이 있는 글꼴에 특히 유용합니다.
SVG <a> 요소의 download 속성
Chrome은 SVG 2 사양에 따라 SVGAElement 인터페이스에서 download 속성을 지원합니다. download 속성을 사용하면 작성자가 SVG 하이퍼링크로 이동하는 대신 SVG 하이퍼링크의 타겟을 다운로드하도록 지정할 수 있습니다. 이는 이미 HTMLAnchorElement에서 지원되는 동작을 반영합니다. 주요 브라우저 간 상호 운용성을 촉진하고 HTML과 SVG <a> 요소 간의 일관된 동작을 보장하며 개발자 환경과 사용자 기대치를 개선합니다.
선택한 요소 렌더링 모드의 모바일 및 데스크톱 패리티
size 및 multiple 속성을 사용하면 <select> 요소를 인페이지 목록 상자 또는 팝업이 있는 버튼으로 렌더링할 수 있습니다. 하지만 이러한 모드는 모바일과 데스크톱 Chrome에서 일관되게 사용할 수 없습니다. 모바일에서는 페이지 내 목록 상자 렌더링을 사용할 수 없으며, multiple 속성이 있으면 데스크톱에서 팝업이 있는 버튼을 사용할 수 없습니다.
이 업데이트를 통해 모바일에 목록 상자가 추가되고 데스크톱에 다중 선택 팝업이 추가되며, size 및 multiple 속성이 있는 선택이 모바일과 데스크톱에서 동일한 렌더링 모드를 생성하도록 보장합니다. 변경사항은 다음과 같이 요약됩니다.
size속성 값이1보다 큰 경우 항상 인페이지 렌더링이 사용됩니다. 이전에는 휴대기기에서 이를 무시했습니다.size속성 없이multiple속성이 설정되면 인페이지 렌더링이 사용됩니다. 이전에는 모바일 기기에서 페이지 내 목록 상자 대신 팝업을 사용했습니다.multiple속성이size=1로 설정된 경우 팝업이 사용됩니다. 이전에는 데스크톱 기기에서 인페이지 목록 상자를 사용했습니다.
동일 출처 렌더러 시작 탐색 전반에서 사용자 활성화 유지
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 작업을 구분할 수 있습니다.
Web Speech API 컨텍스트 편향
이번 업데이트를 통해 웹사이트는 Web Speech 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) 소켓 풀에 독립적으로 적용됩니다.
부정적인 효과가 발생하지 않으면 이 실험을 직접 실행하는 것이 목표입니다.