在今年的谷歌 I/O 大会上推出了 Baseline，旨在明确说明网络平台功能是否可供使用。近日 Baseline 已正式登陆 caniuse.com 网站，为广大开发者提供功能使用参考。

1.Baseline 介绍

Baseline 的最初定义是，当所有主流浏览器（Chrome、Edge、Firefox 和 Safari）的现行版本和以往版本均支持这些功能时，这些功能就成为基线的一部分。

在与社区的讨论中，了解到网络平台上功能的生命周期中有两个值得注意的点：

• 该功能在所有主要引擎上都具有互操作性。
• 大多数网站可以安全地实现该功能，而无需担心支持问题。

第一个阶段定义非常简单，我们知道什么时候一项功能可以在所有主要引擎中使用。第二个阶段则更难定义。根据网站或应用程序受众的不同，您可能很乐意在功能实现互操作后很快就开始使用它们，也可能需要等待数年，等足够多的用户升级到支持这些功能的浏览器版本。

为了对 Baseline 进行监督，WebDX 社区小组（其中包括所有主要浏览器供应商的代表）为网络功能项目成立了一个管理小组。经过整个小组的反复讨论，管理小组重新定义了基线，以反映功能时间表中的两个关键点。

• 最新可用：当一个项目可以在主要浏览器中互操作时，它就是基线中的新可用项目。
• 广泛可用：该功能可安全使用的时间点。此线设定为新可用点之后的 30 个月。

同时，还扩展了核心浏览器集，明确包含这些浏览器的移动版。这意味着，只有以下国家/地区可以使用相应功能时，才能将其归类为新提供的功能：

• Chrome（桌面设备和 Android）
• Firefox（桌面设备和 Android）
• Safari（macOS 和 iOS）
• Edge（桌面设备）

在研究浏览器版本采用情况方面的可用数据时，发现对于大多数功能，只需等待 30 个月，即可供全球约 95% 的用户使用。您可能愿意更早使用功能，但在互操作性 30 个月过后，您不太可能使用功能。

您可以介于新推出和广泛提供之间。至少，新的可用积分可以很好地表明，您可能想要开始学习此功能。这样，当它越来越广泛时，您便可以在生产环境中使用它。

2.Baseline 登陆 caniuse.com

作为明确功能可用性的下一步，Baseline 已正式登陆 Can I Use。访问 Can I Use 上的某些页面时，您会看到一个徽章，告诉您该功能是否在 Baseline 中广泛可用。

基线中最新可用的功能也会显示一个徽章，以及这些功能可用的年份。因此，今年所有核心浏览器上具备互操作性的任何功能都将纳入 Baseline 2023。

3.加入 Baseline 2023 的主要功能

3.1.Size container queries

通过容器查询，可以根据元素容器的大小对元素应用样式。例如，如果容器周围的可用空间较小，就可以隐藏某些元素或使用较小的字体。容器查询是媒体查询的一种替代方法，后者可根据视口大小或其他设备特性对元素应用样式。

代码示例：

详细阅读：

现代CSS：网页暗黑模式实现完整指南

3.2.color-mix function

有了 color-mix() 您不仅可以将白色或黑色混合成一种颜色，还可以将透明度混合成一种颜色，并且可以在您选择的任何色彩空间中实现这一切。这既是基本的色彩功能，也是高级的色彩功能。

代码示例：

详细阅读：

现代CSS：纯 CSS 实现3D导航栏，现代CSS：纯 CSS 实现倒计时效果

3.3.Compression Streams

Compression Streams API 用于使用 gzip 或 deflate（或 deflate-raw）格式压缩和解压缩数据流。

使用 Compression Streams API 的内置压缩功能，JavaScript 应用无需包含压缩库，即可减小应用的下载文件大小。现在，所有浏览器都支持这个实用的 API。

3.4.Offscreen canvas

在 OffscreenCanvas 推出之前，画布绘制功能与 <canvas> 元素相关联，这意味着它直接依赖于 DOM。顾名思义，OffscreenCanvas 将 DOM 和 Canvas API 移出了屏幕，从而分离了该 DOM 和 Canvas API。

得益于这种分离，OffscreenCanvas 的渲染与 DOM 完全分离，因此与常规画布相比，速度可以得到一定程度的提升，因为两者之间没有同步。但更重要的是，即使没有可用的 DOM，它也可用于将渲染工作移至 Web Worker，从而释放主线程并提高应用的响应速度。

3.5.Module preload

预加载模块可以减少下载和处理时间。将 rel="modulepreload" 添加到引用某个 JavaScript 模块的 link 元素，浏览器会获取该模块，对其进行解析和编译，然后将结果放入准备执行的模块映射中。

3.6.Trigonometric functions in CSS

2023 年，CSS 值和单位级别 4 规范中的三角函数开始实现互操作。这意味着，sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 函数已纳入 Baseline 2023。

3.7.The inert attribute

Inert 表示缺少移动能力，因此，当您标记某个惰化元素时，系统会移除这些 DOM 元素中的移动或互动。inert 属性会导致浏览器忽略该元素。

• 如果用户点击元素，click 事件不会触发。
• 元素不会获得焦点。
• 相应元素及其内容已从无障碍功能树中排除

3.8.Subgrid in CSS grid layout

通过 grid-template-columns 和 grid-template-rows 的 subgrid 值，您可以在嵌套网格上使用父网格中定义的轨迹。这意味着，您可以使这些嵌套网格内的元素相互对齐。

3.9.NumberFormat V3

Intl.NumberFormat V3 是 Intl.NumberFormat 中的一组新功能，于 2023 年纳入 Baseline。其他功能包括：

• 三个用于设置数字范围格式的新函数：formatRange、formatRangeToParts 和 selectRange。
• 分组枚举
• 新的舍入和精度选项
• 舍入优先级
• 将字符串解释为小数
• 舍入模式
• 为显示否定关键字签名

3.10.The Fullscreen API

借助 Fullscreen API，您可以通过调用 requestFullscreen() 方法将某个元素（例如 <video>）置于全屏模式。它还提供了一些方法，用于检测元素是否处于全屏模式，以及文档是否处于允许您请求全屏模式的状态。

3.11.The CSS :has() selector

仅制作 Baseline 2023 是 :has() 选择器，该选择器将于 12 月 19 日在 Firefox 121 中推出。此选择器有其他用途，可充当父级选择器，以便您根据元素所含的内容来选择元素。例如，您可以根据元素内是否包含图片来应用不同的 CSS。

4.加入 Baseline 2023 的其它功能

• Constructable Stylesheets
• Complex nth-child selectors in CSS
• The range syntax for media queries
• Import Maps
• Multiple values for CSS display
• @counter-style
• The counter-set CSS property
• The linear() easing function
• Origin Private File System (OPFS)
• CSS Nesting, including the change that adds relaxed parsing.
• CSS :dir() pseudo-class selector
• CSS cap length unit
• CSS masking
• Media query support for HTML video <source> elements
• The HTML <search> element
• Lazy loading of <iframe> elements (landing in Firefox 121 on December 19th)
• The lh and rlh CSS line-height units

总结

通过与 Interop 2023 的合作，许多功能都实现了互操作性。令人兴奋的是，我们看到了如何通过该流程实现这些功能，并将其作为新可用功能添加到基线中，从而启动了这些功能广泛可用的定时器。这为您决定何时在自己的项目中采用功能提供了更清晰的路径。