此页面由 Cloud Translation API 翻译。

Baseline 2023

Rachel Andrew

Baseline 即将在 caniuse.com 上推出！在这篇博文中，您将了解并探索一些功能，基准。

采用基准的新定义后，是功能生命周期的两个阶段：新功能上线和之后，我们会在 30 个月后广泛推出。地图项成为在以下条件下变为可互操作性时，基准测试新可用浏览器：

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

基准阶段进入“Can I Use”（我可以使用）

作为阐明功能可用性的下一步，Baseline 开始开始学习在访问“Can I Use”（我可以使用）中的某些页面时，您会看到一个标志，告知您该功能是否在 Baseline 中广泛提供。

“Can I Use with the 广泛匹配”徽章在 CSS 网格布局中的屏幕截图。

Baseline 中新增的功能还会显示一个标志，上架日期跨不同平台、今年设置的核心浏览器属于《Baseline 2023》的一部分。

“Can I Use with the new available flag”（容器查询）的屏幕截图。

在本博文的其余部分，您将了解实现此里程碑的功能。所有这些功能 Baseline 2023 - 全新推出。

大小容器查询和容器查询单元

大小容器查询查询元素的尺寸，方法与媒体查询大致相同可用于查询视口的尺寸它们使创建可重复使用的组件成为可能创建能根据区域大小变化的组件它们所属的应用环境

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

新的颜色空间和函数

CSS 现在支持颜色空间，让您可以访问 sRGB 色域以外的颜色。也就是说，您可以使用高清的颜色来支持高清显示屏。色域。

新的颜色模型

现在，在 Baseline 中，颜色函数 lch()、lab()、oklch() 和 oklab() 授予对 LCH、Lab、OKLCH 和 OKLab 颜色模型的访问权限。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

gradient.style 编辑器的屏幕截图，其中显示了从粉色到蓝色的鲜明渐变色。 — 使用 gradient.style 尝试新的颜色空间。

`color-mix()` 函数

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

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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

详细了解 color-mix()。

`color()` 函数

color() 函数可用于以 R、G 和 B 为单位指定颜色的任何颜色空间。渠道。color() 首先接受一个颜色空间参数，然后是一系列通道值。您可以使用以下任意一项：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);
}