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 中广泛提供。
Baseline 中新提供的功能还会显示一个标志,以及这些功能的推出年份。因此,今年在核心浏览器中实现互操作性的所有指标均纳入了 2023 年基准计划。
在本文的其余部分,了解在 2023 年达到此里程碑的功能。所有这些功能都是最新提供的 Baseline 2023。
调整容器查询和容器查询单元的大小
借助尺寸容器查询,您可以查询元素的尺寸,方式与媒体查询可让您查询视口的尺寸大致相同。它们可以大幅简化可重复使用的组件的创建,因为您创建的组件可根据其所在区域的大小做出反应。
以下卡片的设计因组件的宽度而异。如需了解详情,请参阅容器查询登陆稳定版浏览器。
新的颜色空间和函数
CSS 现在支持颜色空间,让您可以访问 sRGB 色域之外的颜色。这意味着,您可以支持高清显示屏,使用高清色域中的颜色。
新的颜色模型
现在,在 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 完全分离,因此与常规画布相比,速度会有所提升,因为两者之间没有同步。更重要的是,它可用于将渲染工作移至 Web Worker(即使没有可用的 DOM),从而释放主线程并提高应用响应速度。
有关详情,请参阅 OffscreenCanvas - 借助 Web Worker 加快画布操作速度
模块预加载
预加载模块可以减少下载和处理时间。将 rel="modulepreload"
添加到引用某个 JavaScript 模块的 link 元素中,浏览器会获取该模块,对其进行解析和编译,然后将结果放入准备执行的模块映射中。
如需了解详情,请参阅预加载模块一文。
CSS 中的三角函数
2023 年,CSS 值和单位级别 4 规范中的三角函数变得可以互操作。这意味着函数 sin()
、cos()
、tan()
、asin()
、acos()
、atan()
和 atan2()
已纳入 Baseline 2023。
了解如何使用这些函数,并在 CSS 中的三角函数中探索一些用例。
inert 属性
Inert 表示无法移动,因此,当您将某个元素标记为 inert 时,会移除这些 DOM 元素的移动或互动。inert 属性会导致浏览器忽略该元素。
- 用户点击元素时,
click
事件不会触发。 - 元素不会获得焦点。
- 相应元素及其内容已从无障碍功能树中排除。
此属性应添加到屏幕外或以其他方式隐藏的元素。如需了解详情,请参阅 inert 属性。
CSS 网格布局中的子网格
通过 grid-template-columns
和 grid-template-rows
的 subgrid
值,您可以在嵌套网格上使用父网格中定义的轨迹。这意味着,您可以使这些嵌套网格内的元素相互对齐。
在 CSS subgrid 一文中,您会看到一些示例和指向许多其他博文的链接,以及重点介绍 subgrid 使用情形的示例。
NumberFormat V3
Intl.NumberFormat V3 是 Intl.NumberFormat 的一组新功能,在 2023 年成为 Baseline 的一部分。其他功能包括:
- 三个用于设置数字范围格式的新函数: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-set
CSS 属性linear()
加/减速函数- 源私有文件系统 (OPFS)
- CSS 嵌套,包括添加了放宽解析方式的更改。
- CSS
:dir()
伪类选择器 - CSS
cap
长度单位 - CSS 遮罩
- 为 HTML 视频
<source>
元素提供媒体查询支持 - HTML
<search>
元素 - 延迟加载
<iframe>
元素(将于 12 月 19 日在 Firefox 121 中推出) lh
和rlh
CSS 行高单位
其中许多功能都是通过 Interop 2023 的协作成果来实现的。我们很高兴看到,如何在这个过程中引入功能,以及如何以新增功能的形式在 Baseline 中推出这些功能,这为功能广泛推出启动一个计时器。这样,您就可以更加清晰地确定何时在自己的项目中采用功能。