Baseline 2023

Rachel Andrew

Baseline 即将登陆 caniuse.com！在本博文中，您将了解这项集成，以及探索 2023 年 Baseline 中包含的一些功能。

根据基准的新定义，功能生命周期分为两个阶段。第一次，该资源最近上线，以及 30 个月后广泛提供时。当一项功能在以下浏览器中可互操作时，便会纳入 Baseline 新提供的功能中：

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

Baseline 针对“Can I Use”推出

作为阐明功能可用性的下一步，Baseline 将从今天开始开始推行“Can I Use”计划。访问“Can I Use”上的某些页面时，您会看到一个标志，告诉您相应功能是否已在 Baseline 中广泛提供。

“Can I Use”（我可以使用 CSS 网格布局中广泛使用的标记）的屏幕截图。

Baseline 中新提供的功能还会显示一个标志，以及这些功能的推出年份。因此，今年在核心浏览器中实现互操作性的所有指标均纳入了 2023 年基准计划。

“容器查询”上新标志的“Can I Use”屏幕截图。

在本文的其余部分，了解在 2023 年达到此里程碑的功能。所有这些功能都是最新提供的 Baseline 2023。

调整容器查询和容器查询单元的大小

借助尺寸容器查询，您可以查询元素的尺寸，方式与媒体查询可让您查询视口的尺寸大致相同。它们可以大幅简化可重复使用的组件的创建，因为您创建的组件可根据其所在区域的大小做出反应。

浏览器支持

  • 105
  • 105
  • 110
  • 16

来源

以下卡片的设计因组件的宽度而异。如需了解详情，请参阅容器查询登陆稳定版浏览器。

新的颜色空间和函数

CSS 现在支持颜色空间，让您可以访问 sRGB 色域之外的颜色。这意味着，您可以支持高清显示屏，使用高清色域中的颜色。

新的颜色模型

现在，在 Baseline 中，颜色函数 lch()、lab()、oklch() 和 oklab() 可以访问 LCH、Lab、OKLCH 和 OKLab 颜色模型。

浏览器支持

  • 111
  • 111
  • 113
  • 15

来源

gradient.style 编辑器的屏幕截图，其中粉红色到蓝色的鲜艳渐变。
使用 gradient.style 试用新的颜色空间。

color-mix() 函数

此外，新的颜色函数已纳入 Baseline。color-mix() 函数可用于将任何颜色空间中的一种颜色混合到另一种颜色中。在以下 CSS 中，在 srgb 颜色空间中，25% 的蓝色混合到了白色中。

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

浏览器支持

  • 111
  • 111
  • 113
  • 15

来源

详细了解 color-mix()。

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。通过使用该内置压缩功能，应用不再需要包含压缩库。

浏览器支持

  • 80
  • 80
  • 113
  • 16.4

来源

有关详情，请参阅所有浏览器现在都支持压缩流。

屏幕外画布

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

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

浏览器支持

  • 69
  • 79
  • 105
  • 16.4

来源

有关详情，请参阅 OffscreenCanvas - 借助 Web Worker 加快画布操作速度

模块预加载

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

浏览器支持

  • 66
  • 不超过 79
  • 115
  • 17

来源

如需了解详情，请参阅预加载模块一文。

CSS 中的三角函数

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

浏览器支持

  • 111
  • 111
  • 108
  • 15.4

来源

此演示使用三角函数，在围绕中心点的圆形路径上移动项目。

了解如何使用这些函数，并在 CSS 中的三角函数中探索一些用例。

inert 属性

Inert 表示无法移动，因此，当您将某个元素标记为 inert 时，会移除这些 DOM 元素的移动或互动。inert 属性会导致浏览器忽略该元素。

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

浏览器支持

  • 102
  • 102
  • 112
  • 15.5

来源

此属性应添加到屏幕外或以其他方式隐藏的元素。如需了解详情，请参阅 inert 属性。

CSS 网格布局中的子网格

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

浏览器支持

  • 117
  • 117
  • 71
  • 16

来源

在 CSS subgrid 一文中，您会看到一些示例和指向许多其他博文的链接，以及重点介绍 subgrid 使用情形的示例。

NumberFormat V3

Intl.NumberFormat V3 是 Intl.NumberFormat 的一组新功能，在 2023 年成为 Baseline 的一部分。其他功能包括：

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

浏览器支持

  • 106
  • 106
  • 116
  • 15.4

来源

NumberFormat V3 提案详细介绍了每项新功能。

Fullscreen API

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

浏览器支持

  • 71
  • 79
  • 64
  • 16.4

来源

如需了解详情，请参阅在 MDN 上使用 Fullscreen API 指南。

CSS :has() 选择器

刚刚推出的 Baseline 2023 是 :has() 选择器，我们将于 12 月 19 日在 Firefox 121 中推出该选择器。其中一个用途是此选择器充当父级选择器，可让您根据元素中的内容选择元素。例如，您可以根据元素内是否有图片来应用不同的 CSS。

浏览器支持

  • 105
  • 105
  • 121
  • 15.4

来源

如需了解详情，请参阅 :has()：家庭选择器。

今年加入 Baseline 的更多功能

这篇博文分享了今年纳入 Baseline 的一些关键功能，但还有更多精彩内容。

其中许多功能都是通过 Interop 2023 的协作成果来实现的。我们很高兴看到，如何在这个过程中引入功能，以及如何以新增功能的形式在 Baseline 中推出这些功能，这为功能广泛推出启动一个计时器。这样，您就可以更加清晰地确定何时在自己的项目中采用功能。