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()，以便在 DOM 更改完成时通知 API。

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 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

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