CSS 모션 경로, 뒤로-앞으로 캐시 NotRestoredReason API, Document PIP 모드 등
달리 명시되지 않는 한, 설명된 변경사항은 Android, ChromeOS, Linux, macOS, Windows용 최신 Chrome 베타 채널 출시에 적용됩니다. 제공된 링크 또는 ChromeStatus.com의 목록을 통해 여기에 표시된 기능을 자세히 알아보세요. Chrome 116은 2023년 7월 19일 현재 베타 버전입니다. 데스크톱용 Google.com 또는 Android의 Google Play 스토어에서 최신 앱을 다운로드할 수 있습니다.
CSS
이 버전에는 두 가지 새로운 CSS 기능이 추가되었습니다.
CSS 모션 경로
모션 경로를 사용하면 작성자가 그래픽 객체를 배치하고 개발자가 지정한 경로를 따라 애니메이션을 적용할 수 있습니다. 이를 통해 translate() 함수에서 사용하는 표준 직사각형 좌표 대신 극좌표 (ray() 함수 사용)를 사용하여 위치를 지정하거나 정의된 경로를 따라 요소에 애니메이션을 적용하는 등 여러 가지 강력한 새 변환이 가능합니다. 이를 통해 복잡하고 아름다운 2D 공간 전환을 더 쉽게 정의할 수 있습니다. 경로는 circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray(), url()로 지정할 수 있습니다.
표시 및 콘텐츠 가시성 애니메이션
Chrome 116에서는 키프레임 애니메이션에서 display 및 content-visibility 속성을 지원합니다. 이 지원을 통해 개발자는 애니메이션이 완료된 후 스위치를 처리하기 위해 자바스크립트를 작성하지 않아도 요소가 자동으로 display: none 또는 content-visibility: hidden가 되면 종료 애니메이션을 만들 수 있습니다. 따라서 요소의 종료 애니메이션을 CSS에만 추가할 수 있습니다.
Web API
AbortSignal.any()
소스 신호 중 하나라도 취소되면 취소된 신호를 반환합니다. 개발자는 이를 사용하여 독립적인 취소 소스(예: AbortSignal.timeout()로 지정된 제한 시간 및 AbortController와 연결된 신호)를 결합하여 fetch()와 같은 비동기 API에 전달할 수 있습니다.
가져오기에 대한 BYOB 지원
Chrome의 ReadableStream 구현은 읽을 수 있는 바이트 스트림을 위한 BYOB (Bring Your Own-Buffer) 리더를 지원합니다. 이제 Response.body는 '기본' 읽기 가능 스트림 대신 읽을 수 있는 바이트 스트림입니다. 이를 통해 Fetch API를 BYOB 리더와 함께 사용할 수 있으므로 가비지 컬렉션 오버헤드와 사본을 줄이고 사용자의 응답성을 개선할 수 있습니다. 이제 Blob.stream()도 이 최적화의 이점을 누릴 수 있습니다.
뒤로-앞으로 캐시 NotRestoredReason API
NotRestoredReason API는 PerformanceNavigationTiming API를 통해 BFcache에서 페이지가 제공되지 않는 이유 목록을 프레임 트리 구조로 보고합니다.
PIP 모드 문서
문서 PIP 모드는 임의의 HTMLElements로 채워질 수 있는 상시 사용 설정 창을 여는 새 API를 추가합니다. 이는 HTMLVideoElement를 PIP 모드 창에만 배치할 수 있게 하는 기존 HTMLVideoElement API를 확장합니다. 이를 통해 웹 개발자는 사용자에게 더 나은 PIP 환경을 제공할 수 있습니다.
권한 정책 출처의 확장된 와일드 카드
허용 목록에 있는 하위 도메인 와일드 카드는 어느 정도 유연성을 제공했지만, 기존 와일드 카드 파서와는 다르며 새로운 코드 및 사양 작업이 필요했습니다. 이 인텐트는 기존 콘텐츠 보안 정책 사양의 일부를 재사용하고 허용 목록에 있는 scheme + wildcard domain 및 wildcard port을 허용하여 오버헤드를 줄입니다. 특히 이 인텐트는 허용 목록 정의에서 출처 대신 host-source 및 scheme-source의 정의를 채택하며 경로 부분이 비어 있어야 합니다 (권한 정책이 일치하는 출처에 적용되기 때문).
FedCM 번들: Login Hint API, User Info API, RP Context API
이 번들 업데이트를 통해 Federated Credential Management API (FedCM)를 사용하는 제휴 로그인 흐름을 맞춤설정할 수 있습니다.
Login Hint API를 사용하면 신뢰 당사자 (RP)가 FedCM UI에 표시하려는 사용자 계정에 대한 힌트를 지정할 수 있습니다. 이는 주로 재사용자에게 더 나은 UX를 제공하는 데 사용됩니다.
User Info API를 사용하면 ID 공급업체(IdP)에서 사용자 정보를 가져와 재사용자를 위한 로그인 환경을 맞춤설정할 수 있습니다(예: 맞춤설정된 'IdP로 로그인' 버튼 사용).
RP Context API를 사용하면 RP가 FedCM 대화상자에 제목을 '가입', '사용' 또는 '계속'으로 대체하여 사용자의 실제 인텐트를 일치시키도록 요청할 수 있습니다.
구성되지 않은 마우스 및 포인터 들어가기/나가기 이벤트
사양을 준수하고 상호 운용성 격차를 해결하려면 mouseenter, mouseleave, pointerenter, pointerleave 이벤트의 event.composed 속성을 "false"로 설정합니다. 마우스 이벤트의 UI 이벤트 사양과 포인터 이벤트 사양은 모두 이러한 이벤트를 구성되지 않은 이벤트로 정의합니다. 두 사양은 몇 년 전 원래 정의에서 벗어났습니다(https://github.com/w3c/uievents/pull/210 https://github.com/w3c/pointerevents/pull/461). 이 변경사항은 상호 운용성 격차를 해결하는 것 외에도 Chrome이 shadow DOM 호스트에 이벤트를 수신할 때 이러한 이벤트를 Shadow DOM 호스트에 잘못 전달하는 문제를 해결합니다.
document.open 샌드박스 상속 삭제
현재는 document.open가 다른 창을 타겟팅할 때 호출자의 샌드박스 플래그가 피호출자에게 적용됩니다. 이번 변경 이후에는 더 이상 그렇지 않습니다.
NavigationTiming에서 다시 시작을 유발한 중요-CH 보고
웹사이트는 특정 클라이언트 힌트를 Critical-CH HTTP 응답 헤더에 포함하여 페이지에 중요하다고 표시할 수 있습니다. 이렇게 하면 Critical-CH HTTP 응답 헤더에 나열된 힌트가 처음 전송된 HTTP 요청에 포함될 수 있지만 포함되지 않은 경우 연결 다시 시작이 트리거됩니다. 이 인텐트는 PerformanceNavigationTiming 인터페이스에 readonly attribute DOMHighResTimeStamp criticalCHRestart;를 추가할 것을 제안합니다.
오리진 트라이얼 진행 중
Chrome 116에서는 다음과 같은 새로운 오리진 트라이얼을 선택할 수 있습니다.
COOP: 제한 속성
Cross-Origin-Opener-Policy는 팝업과 오프너 간의 관계를 끊고 보안을 강화하는 데 사용됩니다. 'restrict-properties'는 관계를 완전히 분리하는 대신 제한하는 제안된 값입니다. COEP와 페어링하면 CrossOriginIsolated를 사용 설정합니다.
FedCM 로그인 상태 API
Federated Credential Management API (FedCM)의 IdP 로그인 상태 API를 사용하면 ID 공급업체 (IdP)에서 사용자가 로그인 또는 로그아웃할 때 브라우저에 신호를 보낼 수 있으므로 FedCM이 UX를 최적화하여 개인 정보 보호 속성을 높일 수 있습니다.
EditContext API
EditContext API는 웹 앱을 VK 도형 작성, 필기 입력 패널, 음성 인식 및 IME 컴포지션과 같은 고급 텍스트 입력 방법과 통합하는 프로세스를 간소화합니다. 이 API는 접근성과 성능을 개선하고 웹 기반 편집기를 위한 새로운 기능을 제공합니다.
긴 애니메이션 프레임 타이밍
이는 장기 태스크의 확장입니다. 후속 렌더링 업데이트와 함께 작업을 측정하여 장기 실행 스크립트, 렌더링 시간, 강제 레이아웃 및 스타일에 소요된 시간(레이아웃 스래싱이라고 함)과 같은 정보를 추가합니다.
개발자는 보통 잘못된 INP의 원인인 기본 스레드 정체의 원인을 찾아 INP로 측정하는 '느림'의 진단으로 이를 사용할 수 있습니다.