Baseline 即将登陆 caniuse.com！在本博文中，您将了解这一集成以及 2023 年已纳入“基准”的部分功能。
根据基准的新定义，功能生命周期分为两个阶段：一个是新功能“新发布”，另一个是“30 个月后”广泛提供。当一项功能在以下浏览器中实现互操作性时，将成为 Baseline 新提供的功能的一部分：
- Safari（macOS 和 iOS）
- Firefox（桌面版和 Android 版）
- Chrome（桌面版和 Android 版）
- Edge（桌面设备）
Baseline 针对“Can I Use”推出
作为阐明功能可用性的下一步，Baseline 从今天开始逐步推出“我可以使用”功能。访问“Can I Use”上的某些页面时，您会看到一个标志，告诉您相应功能是否已在 Baseline 中广泛提供。
Baseline 中新提供的功能还会显示一个标志，以及这些功能的推出年份。今年在核心浏览器中实现可互操作性的所有指标均已纳入 2023 年基准计划。
在本文的其余部分，了解在 2023 年达到此里程碑的功能。所有这些功能都是最新提供的 Baseline 2023。
调整容器查询和容器查询单元大小
使用尺寸容器查询可以查询元素的尺寸，方式与媒体查询查询视口尺寸大致相同。借助它们，您可以创建能够根据放置区域大小做出响应的组件，从而更轻松地创建可重复使用的组件。
以下卡片的设计因组件的宽度而异。如需了解详情，请参阅容器查询登陆稳定版浏览器。
新的颜色空间和函数
CSS 现在支持颜色空间，以便您访问 sRGB 色域之外的颜色。这意味着您可以支持使用 HD 色域中的颜色的高清显示屏。
新的颜色模型
现在，在 Baseline 中，颜色函数 lch()、lab()、oklch() 和 oklab() 可以访问 LCH、Lab、OKLCH 和 OKLab 颜色模型。
color-mix() 函数
此外，新的颜色函数已纳入 Baseline。借助 color-mix() 函数，您可以在任何颜色空间中将一种颜色混合到另一种颜色中。在以下 CSS 中，在 srgb 颜色空间中，25% 的蓝色混合到了白色中。
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
color() 函数
color() 函数可用于任何使用 R、G 和 B 通道指定颜色的颜色空间。color() 首先接受颜色空间参数，然后接受一系列 RGB 通道值，以及一些 alpha 值（可选）。您可以使用以下任何一项：srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50 和 xyz-d65。例如：
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
CSS 高清颜色指南提供了更多有关新颜色空间和函数的更多示例，以及适合在何时使用的信息。
压缩流
Compression Streams API 是一种用于压缩和解压缩数据流的 JavaScript API。使用此内置压缩功能的应用无需再包含压缩库。
有关详情，请参阅所有浏览器现在都支持压缩流。
屏幕外画布
在 OffscreenCanvas 之前，画布绘制功能与 <canvas> 元素相关联，这意味着它直接依赖于 DOM。OffscreenCanvas 通过将画布移出屏幕，将 DOM 与 Canvas API 分离。
得益于这种分离，OffscreenCanvas 的渲染会与 DOM 完全分离，因此与常规画布相比，OffscreenCanvas 的速度会有所提升，因为两者之间不同步。它还可用于将渲染工作移至 Web 工作器（即使没有可用的 DOM 也是如此），从而释放主线程并提高应用响应速度。
有关详情，请参阅 OffscreenCanvas - 借助 Web Worker 加快画布操作速度
模块预加载
预加载模块可以减少下载和处理时间。将 rel="modulepreload" 添加到引用某个 JavaScript 模块的 link 元素中，浏览器会获取该模块，对其进行解析和编译，然后将结果放入准备执行的模块映射中。
如需了解详情，请参阅预加载模块。
CSS 中的三角函数
2023 年，CSS 值和单位级别 4 规范中的三角函数变得具有互操作性。这意味着函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 已纳入 Baseline 2023。
请参阅 CSS 中的三角函数，了解如何使用这些函数以及探索一些用例。
inert 属性
当您将某个 DOM 元素标记为 inert 时，会移除该元素中的移动或互动。inert 属性会导致浏览器忽略该元素：
- 用户点击元素时，
click事件不会触发。 - 元素不会获得焦点。
- 相应元素及其内容已从无障碍功能树中排除。
将此属性添加到屏幕外或以其他方式隐藏的元素。如需了解详情，请参阅 inert 属性。
CSS 网格布局中的子网格
通过 grid-template-columns 和 grid-template-rows 的 subgrid 值，您可以在嵌套网格上使用父网格上定义的轨迹。这意味着，您可以在单独的嵌套网格中相互对齐元素。
在 CSS subgrid 中，您会发现一些示例和指向许多其他博文的链接，以及重点介绍 subgrid 用例的示例。
NumberFormat V3
Intl.NumberFormat V3 是 Intl.NumberFormat 的一组新功能，在 2023 年成为基准的一部分。其他功能包括：
- 三个用于设置数字范围格式的新函数：
formatRange、formatRangeToParts和selectRange - 分组枚举
- 新的舍入和精度选项
- 舍入优先级
- 将字符串解释为小数
- 舍入模式
- 签署展示负片
NumberFormat V3 提案详细介绍了这些新功能。
Fullscreen API
借助 Fullscreen API，您可以通过调用 requestFullscreen() 方法将 <video> 等元素置于全屏模式中。它还提供了一些方法，用于检测某个元素是否处于全屏模式，以及文档是否处于允许您请求全屏模式的状态。
如需了解详情，请参阅在 MDN 上使用 Fullscreen API 指南。
CSS :has() 选择器
仅让 Baseline 2023 成为 :has() 选择器，并将于 12 月 19 日在 Firefox 121 中推出。其中一个用途是此选择器充当父选择器，让您能够根据元素所含的内容选择元素。例如，您可以根据元素内是否有图片来应用不同的 CSS。
如需了解详情，请参阅 :has()：家庭选择器。
今年加入 Baseline 的更多功能
今年纳入 Baseline 的其他功能包括：
- 可构造的样式表
- CSS 中复杂的第 n 个子选择器
- 媒体查询的范围语法
- 导入地图
- CSS 展示广告的多个值
- @counter-style
counter-setCSS 属性linear()加/减速函数- 源私有文件系统 (OPFS)
- CSS 嵌套，包括添加放宽解析的更改。
- CSS
:dir()伪类选择器 - CSS
cap长度单位 - CSS 遮罩
- 为 HTML 视频
<source>元素提供媒体查询支持 - HTML
<search>元素 - 延迟加载
<iframe>元素（将于 12 月 19 日在 Firefox 121 中推出） lh和rlhCSS 行高单位
其中许多功能都是通过 2023 年互操作性协作所带来的互操作性实现的。我们很高兴看到，如何通过该流程引入功能，并以新功能的形式在 Baseline 中推出新功能，这为功能广泛推出启动一个计时器。这样，您就可以更清晰地确定何时在自己的项目中采用功能。