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-set
CSS 属性linear()
加/减速函数- 源私有文件系统 (OPFS)
- CSS 嵌套,包括添加放宽解析的更改。
- CSS
:dir()
伪类选择器 - CSS
cap
长度单位 - CSS 遮罩
- 为 HTML 视频
<source>
元素提供媒体查询支持 - HTML
<search>
元素 - 延迟加载
<iframe>
元素(将于 12 月 19 日在 Firefox 121 中推出) lh
和rlh
CSS 行高单位
其中许多功能都是通过 2023 年互操作性协作所带来的互操作性实现的。我们很高兴看到,如何通过该流程引入功能,并以新功能的形式在 Baseline 中推出新功能,这为功能广泛推出启动一个计时器。这样,您就可以更清晰地确定何时在自己的项目中采用功能。