了解我们在 2023 年 12 月在稳定版和 Beta 版网络浏览器中推出的一些有趣的功能。
浏览器稳定版
2023 年 12 月，Firefox 121、Chrome 120 和 Safari 17.2 成为稳定版。本博文介绍了这对 Web 平台的影响。
放宽了 CSS 嵌套的解析
Chrome 120 和 Safari 17.2 包含针对 CSS 嵌套的放宽解析。由于 Firefox 117 及以上版本均支持此功能，这意味着所有主流引擎均支持这种语法更改。
包含 <details> 元素的专属手风琴
Chrome 120 和 Safari 17.2 支持对 <details> 元素使用 name 属性。这意味着，您可以通过对多个 <details> 元素进行分组，创建专属手风琴式折叠组件。
如需了解详情，请参阅专属手风琴式折叠。
浏览器支持
- 120
- 120
- x
- 17.2
:has() 选择器
Firefox 121 包含 CSS :has() 选择器。此版本使 :has() 可在所有主要引擎上实现互操作。
如需了解详情，请参阅 :has()：家庭选择器。
CSS Custom Highlight API
Safari 17.2 包含 CSS Custom Highlight API，可用于创建文本范围并为其设置样式，从而扩展 ::selection 等标准的突出显示伪类。
CloseWatcher API
Chrome 120 包含 CloseWatcher API，这是一个用于监听和响应关闭请求的新 API。
这些请求由桌面设备上的 ESC 键和 Android 上的返回手势或按钮触发，可能很难实现。
除了 API 之外，Chrome 120 还升级了 <dialog> 和 popover 属性，以响应 Android 返回按钮。
浏览器支持
- 120
- 120
- x
- x
CSS text-wrap: balance 和 stable
Firefox 121 为 text-wrap 添加了 balance 和 stable 值。balance 值适用于短内容（如标题），有助于打造更令人愉悦且便于阅读的文本。stable 值可防止可编辑内容在编辑时重新播放。
详细了解 text-wrap: balance。
延迟加载 <iframe> 元素
Firefox 121 支持对 <iframe> 元素使用 loading 属性。这意味着，所有主流引擎现在都支持延迟加载 iframe。
浏览器支持
- 77
- 79
- 121
- 16.4
支持 linear() 加/减速函数
Safari 17.2 还支持 linear() 加/减速功能，此功能可用于创建弹跳和弹簧效果。
浏览器支持
- 113
- 113
- 112
- 17.2
Beta 版浏览器版本
Beta 版浏览器可让您预览下一个稳定版本浏览器中将推出的功能。不妨借此机会测试那些可能会在全球发布之前对您的网站造成影响的新功能或移除。新的 Beta 版包括 Firefox 122、Chrome 121 和 Safari 17.3。 这些版本为平台带来了许多很棒的功能。如需了解所有详细信息，请查看版本说明。这里仅介绍其中的一些亮点。
Firefox 122 和 Chrome 121 包含适用于 HTMLSelectElement 的 showPicker() 方法。这里显示的选择器与选择元素时显示的选择器相同，但也可以通过按下按钮或其他用户互动触发。
Chrome 121 包含滚动条样式属性 scrollbar-color 和 scrollbar-width，改进了针对 SVG 的 CSS 遮罩，并突出显示了拼写错误或语法不正确的文本的伪元素。