了解 2023 年 11 月在稳定版和 Beta 版网络浏览器中推出的一些有趣的功能。
浏览器稳定版
2023 年 11 月，我们只有一个包含 Firefox 120 的稳定版浏览器。本博文介绍了这对 Web 平台意味着什么。
支持 <source> 元素中的 media 属性
Firefox 重新引入了对 <source> 元素中的 media 属性的支持。支持扩展，以包含 <audio> 和 <video> 元素。在此版本中，媒体属性可在 <audio>、<video> 和 <picture> 内的 <source> 元素中使用。
Chrome 即将支持 media 属性，且 Safari 中已支持该属性，因此您很快就能在所有引擎上支持自适应 HTML 视频和音频。
CSS 颜色 light-dark() 函数
Firefox 现在支持 light-dark() CSS 颜色函数。这意味着，您无需使用 prefers-color-scheme 媒体功能即可设置浅色和深色方案的颜色。
lh和rlh广告单元
Firefox 支持 CSS 单位 lh 和 rlh。借助这些单位，您可以相对于元素行高设置值，这在您希望将背景图片与文本对齐时非常有用。此版本使这些库可在所有三大主要引擎之间实现互操作。
浏览器支持
- 109
- 109
- 120
- 16.4
HTTP 103 早期提示
Firefox 现在支持 103 Early Hints HTTP 信息响应状态代码。
Beta 版浏览器版本
Beta 版浏览器可让您预览下一个稳定版本浏览器中将推出的功能。不妨借此机会测试那些可能会在全球发布之前对您的网站造成影响的新功能或移除。新的 Beta 版包括 Firefox 121、Chrome 120 和 Safari 17.2。 这些版本为平台带来了许多很棒的功能。如需了解所有详细信息，请查看版本说明。这里仅介绍其中的一些亮点。
Chrome 120 和 Safari 17.2 包含针对 CSS 嵌套的放宽解析。
Chrome 120 取消了 -webkit-mask* 属性的前缀，并使其与当前规范保持一致。其中包括 mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size 和 mask-composite，以及 mask 简写形式。支持本地 mask-image 引用，序列化现在符合规范，接受的值也符合规范。
Chrome 120 和 Safari 17.2 支持对 <details> 元素使用 name 属性。
Firefox 121 包含 CSS :has() 选择器。此版本使 :has() 可在所有主要引擎上实现互操作。
“网络新体验”系列视频的一部分