Chrome 99 的新功能

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

  • 距离 Chrome 和 Firefox 的版本 100 发布只有几周时间。
  • CSS 级联层可让您更好地控制 CSS,并有助于防止样式特异性冲突。
  • 借助 showPicker() 方法,您能够以程序化方式为 datecolordatalist<input> 元素显示浏览器选择器。
  • 还有许多其他功能。

我是 Pete LePage。我们来深入了解一下 Chrome 99 有哪些面向开发者的新功能

Chrome 100 和 Firefox 100

Chrome 100 将于 2022 年 3 月底发布,Firefox 100 则不久后于 5 月初发布。这两个版本都是主要的版本号里程碑,累计到三位数。但是,如果您的代码需要两个数字,则新版本号可能会给您带来问题。

您应检查所有用于检查版本号或解析用户代理字符串的代码,以确保它们没有任何问题。

Chrome 标志页面,突出显示了新的 #force-major-version-to-100 选项

在 Chrome 中,#force-major-version-to-100 标志会将当前版本号更改为 100。

在 Firefox 每夜的“设置”菜单中,您可以启用“Firefox 100 用户代理字符串”选项。建议您测试您的网站,以确保一切正常运行。

如需了解完整详情,请参阅 Chrome 和 Firefox 即将达到主要版本 100

CSS 级联层

Chrome 99 将支持 CSS 级联层和 CSS @layer 规则。它们可让您更明确地控制 CSS 文件,以防止样式特异性冲突。这对于大型代码库、设计系统以及管理应用中的第三方样式特别有用。

它们为 CSS 级联引入了一个新的层。对于分层样式,层级的优先级始终高于选择器的特异性。

项目演示中有关拆分界面的插图

如果您尝试设置链接的样式,那么在 .card 内的 .post 中,您会发现将应用更具体的选择器。通过使用 @layer 规则,您可以更明确地说明每个规则的样式特异性,并确保卡片中的链接样式替换帖子中的链接样式。

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

这是因为级联优先级。分层样式会创建新的级联平面。

Chrome 99、Firefox 97 和 Safari 15.4 Beta 版支持使用 CSS @layer 规则的层级叠加。如需了解详情,请参阅您的浏览器即将推出分层叠加层

针对输入元素的 showPicker()

长期以来,我们一直不得不依赖自定义 widget 库或黑客攻击来显示日期选择器。HTML InputElements 中新增了 showPicker() 方法。 这是显示浏览器选择器的规范方法,不仅适用于 date,也适用于具有选择器的 timecolor 和其他 <input> 元素。

浏览器选择器的屏幕截图
桌面版 Chrome、移动版 Chrome、桌面版 Safari、移动版 Safari 和桌面版 Firefox 中的浏览器日期选择器(2021 年 7 月)。

如需使用它,请对 <input> 元素调用 showPicker()。在此示例中,我将其封装在 try…catch 块中。这样一来,如果浏览器不支持该 API 或无法显示选择器,我就可以提供回退选项。从而确保用户仍能获得良好的体验。

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

如需了解完整详情,请参阅显示用于选择日期、时间、颜色和文件的浏览器选择器,以及您可以使用 showPicker() 处理的所有不同 <input> 类型。

等等!

当然还有很多其他功能。

Canvas2D API 已更新,添加了一些新功能,包括:

  • ContextLostContextRestored的两项新事件
  • willReadFrequently 选项
  • 对更多 CSS 文本修饰符的支持
  • 以及其他凭证。

我们推出了一项新的源试用,让 PWA 可以在适用于深色模式的 Web 应用清单中提供备用颜色。

手写识别 API 现已发布。

深入阅读

本指南仅涵盖部分重要内容。如需了解 Chrome 99 中的其他变更,请参阅以下链接。

订阅

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

我是 Pete LePage,Chrome 100 发布后,我会立即为您介绍 Chrome 中的新变化!