Baseline 2023

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

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

  • Safari(macOS 和 iOS)
  • Firefox(桌面版和 Android 版)
  • Chrome(桌面版和 Android 版)
  • Edge(桌面设备)

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

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

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

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

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

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

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

浏览器支持

  • Chrome:105。 <ph type="x-smartling-placeholder">
  • 边缘:105。 <ph type="x-smartling-placeholder">
  • Firefox:110。 <ph type="x-smartling-placeholder">
  • Safari:16. <ph type="x-smartling-placeholder">

来源

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

新的颜色空间和函数

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

新的颜色模型

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

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <ph type="x-smartling-placeholder">

来源

<ph type="x-smartling-placeholder">
</ph> gradient.style 编辑器的屏幕截图,其中显示了从粉色到蓝色的鲜明渐变色。
使用 gradient.style 尝试新的颜色空间。

color-mix() 函数

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

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

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:15。 <ph type="x-smartling-placeholder">

来源

详细了解 color-mix()

color() 函数

color() 函数可用于以 R、G 和 B 为单位指定颜色的任何颜色空间。 渠道。color() 首先接受一个颜色空间参数,然后是一系列 通道值。您可以使用以下任意一项:srgbsrgb-lineardisplay-p3a98-rgbprophoto-rgbrec2020xyzxyz-d50xyz-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。应用 便不再需要包含压缩库。

浏览器支持

  • Chrome:80。 <ph type="x-smartling-placeholder">
  • 边缘:80。 <ph type="x-smartling-placeholder">
  • Firefox:113。 <ph type="x-smartling-placeholder">
  • Safari:16.4. <ph type="x-smartling-placeholder">

来源

有关详情,请参阅所有浏览器现已支持压缩流

屏幕外画布

在 OffscreenCanvas 之前,画布绘制功能与 <canvas>相关联 元素,这意味着它直接依赖于 DOM。OffscreenCanvas 分离 从而通过 Canvas API 将画布移出屏幕。

由于这种分离,OffscreenCanvas 的渲染与 与常规画布相比,它在速度方面有所提升 两者之间不同步。它还可以用于移动 即使没有 DOM 可用,也能将渲染工作交给 Web Worker,从而 从而提升应用的响应速度

浏览器支持

  • Chrome:69。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:105。 <ph type="x-smartling-placeholder">
  • Safari:16.4. <ph type="x-smartling-placeholder">

来源

如需了解详情,请参阅 OffscreenCanvas - 借助 Web Worker 加快画布操作速度

模块预加载

预加载模块可以缩短下载和处理时间。将 rel="modulepreload" 引用了某个 JavaScript 模块的 link 元素中,浏览器将获取 解析和编译模块,然后将结果放入模块映射中 调用。

浏览器支持

  • Chrome:66。 <ph type="x-smartling-placeholder">
  • 边缘:≤ 79。 <ph type="x-smartling-placeholder">
  • Firefox:115。 <ph type="x-smartling-placeholder">
  • Safari:17. <ph type="x-smartling-placeholder">

来源

如需了解详情,请参阅预加载模块

CSS 中的三角函数

2023 年,CSS 值和单位级别 4 中的三角函数 变得具有互操作性这意味着函数 sin()cos()tan()asin()acos()atan()atan2() 是 Baseline 2023 的一部分。

浏览器支持

  • Chrome:111。 <ph type="x-smartling-placeholder">
  • Edge:111。 <ph type="x-smartling-placeholder">
  • Firefox:108。 <ph type="x-smartling-placeholder">
  • Safari:15.4. <ph type="x-smartling-placeholder">

来源

<ph type="x-smartling-placeholder">
</ph>
此演示版使用三角函数沿着圆形路径移动项目,使其围绕中心点。

了解如何在 CSS 中的三角函数

inert 属性

将 DOM 元素标记为 inert 后,即会从该元素中移除移动或互动元素, 。inert 属性会导致浏览器忽略该元素:

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

浏览器支持

  • Chrome:102。 <ph type="x-smartling-placeholder">
  • Edge:102。 <ph type="x-smartling-placeholder">
  • Firefox:112。 <ph type="x-smartling-placeholder">
  • Safari:15.5。 <ph type="x-smartling-placeholder">

来源

将此属性添加到在屏幕外或以其他方式隐藏的元素。有关 相关信息,请参阅 inert 属性

CSS 网格布局中的子网格

通过使用 grid-template-columnsgrid-template-rowssubgrid 值, 可以使用父网格、嵌套网格上定义的轨迹。这意味着您可以 对齐独立嵌套网格中的元素。

浏览器支持

  • Chrome:117。 <ph type="x-smartling-placeholder">
  • Edge:117。 <ph type="x-smartling-placeholder">
  • Firefox:71。 <ph type="x-smartling-placeholder">
  • Safari:16. <ph type="x-smartling-placeholder">

来源

CSS subgrid 中,您可以查看一些示例和链接 许多其他重点介绍 subgrid 应用场景的帖子和示例。

数字格式 V3

Intl.NumberFormat V3 是 Intl.NumberFormat 的一系列新功能, 纳入 Baseline 中。其他功能包括:

  • 三个用于设置数字范围格式的新函数:formatRangeformatRangeToPartsselectRange
  • 分组枚举
  • 新的舍入和精度选项
  • 舍入优先级
  • 将字符串解释为小数
  • 舍入模式
  • 签字显示屏底座

浏览器支持

  • Chrome:106。 <ph type="x-smartling-placeholder">
  • Edge:106。 <ph type="x-smartling-placeholder">
  • Firefox:116。 <ph type="x-smartling-placeholder">
  • Safari:15.4. <ph type="x-smartling-placeholder">

来源

NumberFormat V3 提案 我们将详细介绍这些新功能

Fullscreen API

借助 Fullscreen API,您可以将 <video> 等元素置于全屏 模式。requestFullscreen()它还提供 检测元素是否处于全屏模式,以及文档是否处于全屏模式 处于允许您请求全屏模式的状态下

浏览器支持

  • Chrome:71。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:64。 <ph type="x-smartling-placeholder">
  • Safari:16.4. <ph type="x-smartling-placeholder">

来源

如需了解详情,请参阅有关 MDN 的 Fullscreen API 指南

CSS :has() 选择器

只需将 Baseline 2023 设为 :has() 选择器,即可在 Firefox 中实现 发送提醒除了其他用途外,此选择器还可用作 父级选择器,可让您根据其中的元素来选择元素 。例如,您可以根据网站 元素内的图片

浏览器支持

  • Chrome:105。 <ph type="x-smartling-placeholder">
  • 边缘:105。 <ph type="x-smartling-placeholder">
  • Firefox:121。 <ph type="x-smartling-placeholder">
  • Safari:15.4. <ph type="x-smartling-placeholder">

来源

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

今年加入了 Baseline 的更多功能

今年 Baseline 的其他功能包括:

其中许多功能都是通过协同合作来实现互操作性 Interop 2023。我们很高兴看到这些功能 通过该流程,在 Baseline 中作为新可用应用, 这为它们广泛地投入使用。这会创建一个 在决定何时在项目中采用功能方面有了更清晰的途径。