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의 새로운 기능을 바로 알려드리겠습니다.