Chrome 110의 새로운 기능

Adriana Jara

다음 사항에 유의하시기 바랍니다.

  • 새 :picture-in-picture 의사 클래스를 사용하여 PIP 요소에 맞춤 스타일을 추가합니다.
  • 매니페스트에서 launch_handler를 사용하여 웹 앱 실행 동작을 설정합니다.
  • iframe에서 credentialless 속성을 사용하여 교차 출처 삽입 정책을 설정하지 않은 서드 파티 콘텐츠를 삽입
  • 그 밖에도 다양한 기능이 있습니다.

저는 아드리아나 자라입니다. 자세히 알아보고 개발자를 위한 Chrome 110의 새로운 기능을 살펴보겠습니다.

:picture-in-picture 가상 클래스

PIP API를 사용하면 웹사이트에서 항상 상단에 표시되는 플로팅 동영상 창을 만들 수 있으므로 사용자가 다른 콘텐츠와 상호작용하는 동안에도 미디어를 계속 소비할 수 있습니다.

이제 :picture-in-picture CSS 가상 클래스를 사용하여 요소에 스타일을 추가하여 환경을 개선할 수 있습니다.

아래 스니펫은 PIP 클래스를 사용하여 동영상이 다른 곳에서 재생 중임을 사용자에게 알리는 메시지를 동영상 컨테이너에 추가하는 방법을 보여줍니다.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

동영상 요소에서 의사 클래스를 다시 사용하여 요소를 투명하게 만들어 메시지를 올바르게 표시합니다.

예시를 사용해 보고 PIP 동영상 환경을 개선해 보세요.

launch_handler 매니페스트 구성원

Launch Handler API를 사용하면 웹 앱이 실행되는 방식을 제어할 수 있습니다. 예를 들어 기존 창을 사용할지 새 창을 사용할지, 선택한 창이 실행 URL로 이동할지 여부를 제어할 수 있습니다.

예를 살펴보겠습니다. 데스크톱 환경에서 앱을 설치한 후 브라우저에서 방문하면 독립형 앱 창으로 이동할 수 있는 버튼이 있습니다. 이전에는 새 창에서 앱을 실행하는 것만 가능했습니다.

이제 launch_handler 매니페스트 구성원을 사용하여 웹 앱이 실행 동작을 맞춤설정할 수 있습니다.

예를 들어 아래 스니펫을 사용하면 이 웹 앱이 실행될 때마다 항상 새 창을 실행하는 대신 기존 앱 창에 포커스를 맞추고 해당 창으로 이동합니다 (창이 있는 경우).

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless iframe

교차 출처 격리의 가장 큰 문제 중 하나는 모든 교차 출처 iframe이 COEP 및 CORP를 배포해야 한다는 것입니다 . 이러한 헤더가 없는 iframe은 브라우저에서 로드되지 않습니다.

credentialless 속성은 이러한 헤더를 설정하지 않는 서드 파티 iframe을 삽입하는 데 도움이 됩니다.

credentialless를 사용하면 iframe이 다른 빈 컨텍스트에서 로드됩니다. 특히 쿠키 없이 로드됩니다. iframe은 빈 쿠키 저장소로 시작합니다.

마찬가지로 LocalStorage, CacheStorage 등의 저장소 API는 새 임시 파티션에 데이터를 로드하고 저장합니다. 최상위 문서가 언로드되면 이러한 모든 저장소가 삭제됩니다. 이를 통해 COEP 제한을 제거할 수 있습니다.

credentialless를 안전하게 사용하여 iframe에 서드 파티 콘텐츠를 로드하는 방법에 대한 자세한 내용은 이 도움말을 참고하세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

이제 비보안 컨텍스트에서 WebSQL이 삭제됩니다.

CSS initial-letter 속성을 사용하면 첫 글자가 다음 텍스트 줄에 포함되어야 하는 줄 수를 설정할 수 있습니다.

이제 FileSystemHandle에 remove() 메서드가 포함됩니다.

추가 자료

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 110의 추가 변경사항은 아래 링크를 확인하세요.

구독

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 아드리아나 자라입니다. Chrome 111이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.