Chrome 104 的新变化

Pete LePage

以下是您需要知晓的相关信息：

我是 Pete LePage。我们来深入了解一下 Chrome 104 中面向开发者的新功能。

使用区域截取功能指定剪裁区域

借助 getDisplayMedia()，您可以从当前标签页创建视频串流。但有时，您并不需要整个标签页，只想要其中一小部分。到目前为止，实现此目的的唯一方法是手动剪裁每个视频帧。

借助区域截图功能，Web 应用可以定义要共享的屏幕的特定区域。例如，在 Google 幻灯片中 您可以留在标准编辑视图中，只共享当前幻灯片

浏览器窗口的屏幕截图，其中显示了一个 Web 应用，突出显示了主要内容区域和跨源 iframe。
主要内容区域以蓝色显示，跨源 iframe 以红色显示。

如需使用它，请选择要共享的元素，然后根据该元素创建新的 CropTarget。接下来，通过调用 getDisplayMedia() 启动屏幕共享。它会提示用户授予共享屏幕的权限。然后，调用 track.cropTo() 并传递之前创建的 cropTarget。

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

如需了解详情，请参阅借助区域截取功能更好地分享标签页。

通过第 4 级语法和评估功能，更轻松地使用媒体查询

媒体查询对自适应设计至关重要，可让您为不同的视口尺寸定义特定样式。不过，除非您每天都使用这些命令，否则语法可能会有点混乱。

Chrome 104 增加了对媒体查询 - 第 4 级 - 语法和评估的支持，让您可以使用普通的数学比较运算符编写媒体查询。

因此，您不应使用以下代码来指示视口大小介于 400 到 600 像素之间：

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

可以这样编写：

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

除了简化媒体查询，新语法还可以提高准确性。min- 和 max- 查询包括在内，例如：min-width: 400px 测试宽度是否大于 400px。新语法可让您更明确地表达自己的意思。

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Firefox 已支持该语法，并且有一个 PostCSS 插件，可将新语法重写为旧语法，从而确保浏览器兼容性！

如需了解详情，请参阅 Rachel 撰写的文章Chrome 104 中范围媒体查询的新语法。

共享元素转换开始新的源试用

特定于平台的应用通常在不同视图之间进行流畅的转换，外观美观，可让用户保持在上下文中，并有助于提升体验性能。而在 Web 上，完整导航可能会很粗糙，有时会导致屏幕瞬间空白。对于单页应用，情况可能会有所改善，但转换仍然很难。

借助在 Chrome 104 中启动新的源试用的共享元素转换，无论转换是跨文档（例如在多页面应用中）还是文档内（例如在单页面应用中），您都可以提供流畅的转换。

下面是一个粗略示例，展示了转场效果在单页应用中的运作方式。在导航函数中，获取新页面内容，然后检查是否支持转场效果，如果不支持，则在不使用转场效果的情况下更新页面。如果是，请创建一个 transition() 并对其调用 start()，告知 API 何时完成 DOM 更改。

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

在后台，共享元素过渡使用 CSS 动画，因此您可以从淡入效果、滑入效果等各种方式进行更改。

我只是触及了皮毛，请观看 Jake 的视频“Bringing Page Transitions to the Web”（将页面转场到 Web 上），或者深入了解解释器。

等等！

当然，还有许多其他功能。

  • 使用显式 Expires 或 Max-Age 属性设置 Cookie 时，该值现在的上限为 400 天。
  • 跨屏窗口展示位置 API 有多项增强功能。
  • overflow-clip-margin CSS 属性用于指定元素的内容在被剪裁之前允许绘制的距离。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 104 中的其他变更，请点击以下链接。

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，Chrome 105 发布后，我会立即为您介绍 Chrome 中的新变化！