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 Ownbuffer) 리더를 지원합니다. 이제 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)를 사용하는 제휴 로그인 흐름을 맞춤설정할 수 있습니다.
로그인 힌트 API를 사용하면 신뢰 당사자 (RP)가 FedCM UI에 표시하려는 사용자 계정에 대한 힌트를 지정할 수 있습니다. 이는 주로 재사용자에게 더 나은 UX를 제공하는 데 사용됩니다.
User Info API를 사용하면 ID 공급업체(IdP)가 사용자 정보를 가져와 재사용자의 로그인 환경을 맞춤설정할 수 있습니다(예: 맞춤설정된 'IdP로 로그인' 버튼 사용).
RP는 RP Context API를 사용하여 FedCM 대화상자에 제목을 '로그인'으로 교체하도록 요청할 수 있습니다. '가입', '사용' '계속'을 사용하여 사용자의 실제 인텐트를 정렬합니다.
구성되지 않은 마우스 및 포인터 들어가기/나가기 이벤트
mouseenter, mouseleave, pointerenter, pointerleave 이벤트의 event.composed 속성을 "false"로 설정하여 사양을 준수하고 상호 운용성 격차를 수정합니다. 마우스 이벤트의 UI 이벤트 사양과 포인터 이벤트 사양에서는 이러한 이벤트를 구성되지 않은 것으로 정의합니다. 두 사양 모두 몇 년 전 원래 정의(https://github.com/w3c/uievents/pull/210 https://github.com/w3c/pointerevents/pull/461)에서 벗어났습니다. 상호 운용성 격차를 해결하는 것 외에도 이 변경사항은 Chromium에서 DOM 이벤트를 수신 대기할 때도 DOM의 섀도우 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 Sign-in Status API를 사용하면 ID 공급업체 (IdP)가 사용자가 로그인/로그아웃할 때 브라우저에 신호를 보낼 수 있으므로 FedCM이 UX를 최적화하여 개인 정보 보호 속성을 높일 수 있습니다.
EditContext API
EditContext API는 VK 모양 쓰기, 필기 입력 패널, 음성 인식, IME 컴포지션과 같은 고급 텍스트 입력 방법을 웹 앱과 통합하는 프로세스를 단순화합니다. 이 API는 접근성과 성능을 개선하고 웹 기반 편집기를 위한 새로운 기능을 제공합니다.
긴 애니메이션 프레임 타이밍
이는 장기 작업의 확장입니다. 후속 렌더링 업데이트와 함께 작업을 측정하여 장기 실행 스크립트, 렌더링 시간, 강제 레이아웃 및 스타일에 소요된 시간(레이아웃 스래싱이라고 함)과 같은 정보를 추가합니다.
개발자는 이를 INP에서 측정하는 '느린 속도'의 진단으로 사용할 수 있습니다. 이를 통해 잘못된 INP의 원인인 기본 스레드 혼잡의 원인을 찾아낼 수 있습니다.