Chrome 104 的新变化

Pete LePage

以下是您有必要知道的信息：

• 现在，当您使用 getDisplayMedia() 捕获当前标签页时，可以使用区域捕获指定剪裁区域。
• 您可以使用数学比较运算符编写媒体查询语法。
• 共享元素转换会启动源试用。
• 还有许多更多内容。

我是 Pete LePage。我们一起来深入了解 Chrome 104 并为开发者带来了哪些新功能

使用区域拍摄指定剪裁区域

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

借助区域捕获功能，Web 应用可以定义其要分享的屏幕上的特定区域。例如，使用 Google 幻灯片时，您可以停留在标准编辑视图中，然后共享当前幻灯片。

主内容区域以蓝色显示，跨源 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 中范围媒体查询的新语法。

共享元素过渡开始新的源试用

平台专用应用通常可以在不同视图之间平滑过渡，这类应用看起来很美观，能够让用户处于上下文中，并且有助于提供更出色的体验。然而，在网页上，完整的导航可能会非常刺眼，有时意味着短暂的空白屏幕。对于单页应用，可能可以优化，但转换仍然困难。

通过在 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 的将页面过渡引入 Web 视频或深入了解相关解说。

还有更多其他奖励！

当然还有很多。

• 现在，使用明确的 Expires 或 Max-Age 属性设置 Cookie 时，该值的上限为 400 天。
• 跨屏窗口放置 API 得到了改进。
• overflow-clip-margin CSS 属性用于指定元素内容在被裁剪之前可以绘制的距离。

深入阅读

这仅涵盖了部分重要的亮点。如需了解 Chrome 104 中的其他更改，请访问以下链接。

• Chrome 开发者工具的新变化 (104)
• Chrome 104 弃用和移除
• 针对 Chrome 104 的 ChromeStatus.com 更新
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage