以下是您有必要知道的信息:
- Chrome 和 Firefox 100 版倒计时只剩几周了。
- CSS 级联层可让您更好地控制 CSS,并有助于防止样式特异性冲突。
showPicker()
方法可让您以编程方式为<input>
元素(如date
、color
和datalist
)显示浏览器选择器。- 还有许多更多内容。
我是 Pete LePage。我们一起来深入了解 Chrome 99 为开发者带来了哪些新功能吧
Chrome 100 和 Firefox 100
Chrome 100 将于 2022 年 3 月底发布,Firefox 100 将在 5 月初发布。这两者都是主要的版本号里程碑,会延续到 3 位数。但是,如果您的代码应为两位数,新的版本号可能会给您带来问题。
您应检查所有用于检查版本号或解析用户代理字符串的代码,以确保没有任何问题。
在 Chrome 中,#force-major-version-to-100
标志会将当前版本号更改为 100。
在 Firefox Nightly 的“设置”菜单中,您可以启用“Firefox 100 User-Agent String”选项。最好对您的网站进行测试,以便确保一切按预期运行。
如需了解完整详情,请查看 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
,还适用于 time
、color
和带有选择器的其他 <input>
元素。
如需使用它,请对 <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 已更新,新增了以下功能:
ContextLost
和ContextRestored
有两项新活动willReadFrequently
选项- 更多 CSS 文本修饰符支持
- 以及其他凭证。
我们推出了一项新的源试用,让 PWA 在适用于深色模式的 Web 应用清单中提供备用颜色。
手写识别 API 现已发布。
深入阅读
这仅涵盖了部分重要的亮点。如需了解 Chrome 99 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (99)
- Chrome 99 弃用和移除
- 针对 Chrome 99 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需及时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage