思凡资源网

思凡资源网

Chrome 110 3大新特性!CSS支持画中画!

sifan10 0 10 次浏览 技术文章

大家好，很高兴又见面了，我是"前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

前端进阶

今天带着大家一起看看最新发布的Chrome 110带来了那些新特性！

图片来自Adriana Jara的“New in Chrome 110”

1.:picture-in-picture伪类

画中画 API 允许网站创建始终位于其他窗口之上的浮动视频窗口，以便用户在与设备上的其他网站或应用程序交互时可以继续播放媒体。 在 Chrome 110 中，添加了一个 CSS 伪类，以帮助 Web 开发者自定义视频进入、退出画中画时的媒体播放器。

使用 :picture-in-picture 伪类，可以向元素添加样式以改善体验。下面的代码片段展示了如何使用画中画类向视频容器添加一条消息，提醒用户视频正在其他地方播放。

#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;
}

在视频元素上使用伪类，使元素透明以正确显示消息。

画中画视频

以下是:picture-in-picture伪类的浏览器支持情况，目前只有Chrome>110的浏览器支持，其他浏览器都不支持。

2.credentialless iframe

跨源隔离（Cross Origin Isolation）的最大挑战之一是所有跨源 iframe 都必须部署 COEP 和 CORP 。 浏览器不会加载没有这些标头的 iframe。


Cross-Origin-Embedder-Policy (COEP) 响应标头：可防止文档加载未明确授予文档权限 (通过 CORP 或者 CORS) 的任何跨域资源。

credentialless 属性有助于嵌入未设置这些标头的第三方 iframe。使用 credentialless，iframe 是从不同的空上下文加载的，而且是在没有 cookie 的情况下加载的。

同样，LocalStorage、CacheStorage 等存储 API 会在新的临时分区中加载和存储数据。 一旦顶级文档被卸载，所有这些存储都将被清除，从而允许删除 COEP 限制。