CSS Compat 2021 和 Interop 2022中部分特性介绍
最近看到了一些关于 CSS 新特性的一些推文，觉得值得关注。本文是广泛阅读后的笔记，根据理解搭建了文章结构，对名词概念进行了说明，特性的介绍附有在实际中的使用场景，特性和属性值介绍附上浅显的demo，最终整理出来了这篇文章。最终成文尤其感谢 2022 年的 CSS 全览 ，本文的颜色空间和方法章节和:has()摘自这篇文章，还有部分例子和配图。
本文分享的主题是关于 CSS compat 2021 和 interop 2022 中部分特性的介绍。进入正题前我们先进入背景介绍。
背景
当我首先看到这个 compat 2021 和 interop 2022 的时候，我会想说它是什么名词呢？和 CSS 版本的迭代有什么关系？为什么不合到 CSS 4 或者 CSS 5 这种大的版本进行一个统一的迭代呢？那么先解答一下为什么不会有 CSS 4。
为什么不会有CSS4？
因为从 CSS3 开始， CSS 规范被拆成了众多的 module 单独的进行升级，如果有新的需求的话，将作为一个新的模块来立项并且标准化。所以针对 CSS ，后面不会再有像 4 或 5 这样所谓的大版本号的一个变更，有的只是 CSS 某个模块级别的发布。
关于 CSS 的一些提案阶段以及拆分模块，可以去看一下下面的这个参考链接，这边就简单带过了。
那么第二个问题，compact 2021 和这个 interop 2022 是什么呢？
Compat 2021 和 Interop 2022 是什么
Compat 2021 和 Interop 2022 是所有的主要的浏览器供应商和其他利益相关者来一起开发解决 web 开发人员发现的高优先级的浏览器兼容性问题的两个基准。因为是主要的浏览器供应商都有参加，所以这样的规模是前所未有的。
英文名词解释一下这两个单词。这个 compat 的意思是 compatible 语义为兼容。在这个语境下更多的是指的站点的兼容。这个 interop 的意思是 interoperability，语义是互操作性，更多的是指向于两个或者更多浏览器中间的表现的一致性。
The terms "compatibility" and "interoperability" are typically distinguished by browser vendors, where compat refers to site compat, and interop refers to two or more browsers behaving the same.
Compat 2021
早在 2019 年，Mozilla、Google 和其他公司就开始以MDN 开发者需求评估调查和浏览器兼容性报告的形式，了解开发者的痛点。这些报告提供了详细且可操作的信息，以解决 Web 平台开发人员面临的挑战，并促成了Compat 2021 。具体问卷和这个详情可以点链接去了解，这里就不展开了。
Compat 2021 为强大的功能打下了坚实的基础，例如CSS 网格（12% 的使用率并稳步增长）和CSS flexbox（77% 的使用率），包括gap（flexbox 中的属性）它解决了开发人员采用新的布局方法时的痛点。
最终的结果是在 21 年的年底，在所有的浏览器中的实现程度跑分超过 90% 。
Interop 2022
Interop 2022 是一个基准，由三个主要浏览器实现的代表商定，并通过公开提名和审查过程以及支持者， Apple、Bocoup、Google、Igalia、Microsoft和Mozilla的意见而开发。
该基准侧重于 15 个缺失或跨浏览器存在兼容性问题时会特别麻烦的领域。
Interop 2022 和 Compat 2021 做了什么
那在我们了解到它们是什么之后，下一个部分就是他们都做了什么。下面就来看看 Interop 2022 和 Compat 2021 分别做出了哪些努力。
Compat 2021
2021 年的目标是提高浏览器在五个功能方面的通过分数：
- sticky 定位
- aspect-ratio 尺寸
- flex 布局
- grid 布局
- transform 定位和动画
测试分数全面提高，显示出更高的稳定性和可靠性。
Interop 2022
计划为开发者提供或优化以下 web 功能：
- 级联层
@layer - 颜色空间和方法
- 容器查询
<dialog>- 表单兼容性
- 滚动
- 子网格
subgrid - 排版优化
- 视口单位
- Web 兼容
Compat 2021部分特性介绍
在我们完成背景的基本了解后，再针对某个点来展开一下。下面的这一part是关于Compat 2021的部分特性的介绍。
CSS 等比缩放
背景
介绍的第一个特性是等比缩放。等比缩放，一般是指容器的高度按比例根据宽度改变，即容器保持一定的宽高比，这种的适配需求还是比较常见的。最普遍的是媒体素材，它本身就有一个特定的宽高比。这是一个网图，说明我们现在的媒体素材宽高比有很多，而兼容起来也是场景比较多的。
//摘自 2022 年的 CSS 全览
CSS 在还没有 aspect-ratio 之前，常使用一些 Hack 手段来实现实类似的效果。
padding-top特性
第一个 hack 手段是用这个margin 或者 padding 的百分比值。使用margin/padding的百分比值来解决自适应高度的关键在于：容器margin/padding的百分比参照物是父元素的宽度，而容器的width的百分比参照物也是父元素的宽度。
#container {
width: 50%; //父元素宽度的一半
background-color: red; //仅为了方便演示
}
.placeholder {
padding-top: 50%; //与width: 50%;的值保持一致，也就是相当于父元素宽度的一半。
}
自定义属性和calc()
第二种解决方案是有了 CSS 自定义属性之后，可以结合 calc() 函数来实现容器等比缩放的效果：
.container {
--ratio: 16/9;
height: calc(var(--width) / (var(--ratio)));
width: 100%;
}
方案
我们有了这个aspect-ratio 属性就可以为 box 容器规定了一个期待的宽高比可以用来计算尺寸，只需要下面实例中那样的增加一行代码。
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
更多场景是在在不同的终端上，如果我们期望不同的宽高比例，也可以通过媒体查询让元素在不同的终端上按不同的比例进行展示。
.transition-it {
aspect-ratio: 1/1;
transition: aspect-ratio .5s ease;
@media (orientation: landscape) { & {
aspect-ratio: 16/9;
}}
}
Demo
下面这个示例演示了这三种不同方案实现宽比的效果：
Demo: codepen.io/airen/full/…
兼容性（截止20220613）：
这个属性的兼容性看起来还是不错的，在主流的浏览器比较新的版本还是可以使用的。
CSS Gap（沟槽）
接下来介绍的一个属性是 CSS 沟槽。
背景
可以看一下下图就是一个常见的需求，大概意思是在一个模块里面，每个字段之间是有间距的，但是每个字段的上下的话又是没有间距的。那在以前的话，我们可能需要通过容器负 marding 或者是通过第一个和最后一个的伪类去处理这种情况。
方案
当有了 gap 以后，只需要一行代码就可以搞定。gap可以帮我们解决以前比较麻烦的一种布局效果，即紧邻容器边缘要求是没有间距的，但是相邻的项目之间在水平或者垂直方向是要求有间距的。
gap 属性属性是 row-gap 和 column-gap 的简写形式。如果 gap 仅有一个值时，表示 row-gap 和 column-gap 相同。
该属性 gap 到目前为止只能运用于多列布局，Flexbox布局和网格布局的容器上，可以支持物理尺寸单位，也可以支持相对尺寸单位，还可以支持百分比。
// 多列布局
.multi__column {
gap: 5ch
}
// Flexbox布局
.flexbox {
display: flex;
gap: 20px
}
// Grid布局
.grid {
display: grid;
gap: 10vh 20%
}
Demo
这个 gap 的 demo 演示一下它的几个写法。
developer.mozilla.org/zh-CN/docs/…
兼容性（截止20220613）：
Interop 2022部分特性介绍
关于Compat 2021就简单介绍一下上面两个，然后进行下一部分，对 Interop 2022的部分的属特性做一个介绍。第一个特性是级联层@layer。
级联层@layer
背景
在 @layer 之前，加载样式表的顺序是很重要的，因为加载的过程中样式是会覆盖的。这样的话开发人员就需要先加载不太重要的样式，之后再加载更重要的样式。
方案
@layer 特性是 W3C 层叠和继承规范 Level5 中提出来的，允许预先定义图层及其顺序。在多个图层之间无论CSS代码的顺序仍然保留相对其他图层的优先级，同时在某一个图层中的无论 CSS 代码的先后仍然允许保留层内样式的覆盖。
//摘自 2022 年的 CSS 全览
Demo
一些使用语法示例如下：
@layer default, theme;
@import url(theme.css) layer(theme);
@import url(headings.css) layer(default);
@layer framework.theme {
p {
color: rebeccapurple;
}
}
@layer framework {
@layer theme {
p { color: cyan; }
}
}
这里有个简单的例子，是说 special 里面的颜色是紫色，base的话是绿色。当我们通过@layer定义完 special 的优先级是高于 base 的，即使 special 的代码是写在上面的，最终的文字的渲染也是紫色的。实现了 CSS 展示和它的位置解耦的目的。
Chrome DevTools 可视化了哪些样式来自哪些图层：
兼容性（截止20220613）
容器查询
下一个属性是容器查询。之前我们经常会遇到的需求是要根据不同的屏幕宽度去适配布局。比如说这个需求里面就要根据屏幕的宽度去调整左右两部分中间的距离。甚至说在一个 iPad 竖屏的情况下，会隐藏一部分。
但假如说设计师提出了一个更局部的适配要求，比如说是只针对某一个局部的时候，内容小于一个值，然后本来应该一行放俩变成一行放一个，同时产生换行。
背景
在没有容器查询之前，似乎也只有@media的方式。
在 @container 之前，@media只能响应整个视口的大小。但对于外部容器不是整个视口的小型布局，需要转化为整个视口的计算数值（假如其他相关的部分有自适应，还需要折算）。
方案
不同于@media，@container根据容器的大小而不是视口的大小进行判断。
@container元素可以响应父容器的大小或样式的基础是：容器必须将自己声明为可能的查询目标，即容器查询。
容器查询， 将成为css containment规范的一部分，并向contain属性添加新值。该contain属性最初是为了性能优化而设计的。它为Web开发人员提供了一种方法来隔离DOM的各个部分，并向浏览器声明这些部分与文档的其余部分无关。
声明contain属性，并且把layout和size的值叠加, 浏览器便会在该元素上创建一个containment上下文。
声明了这个属性，就意味着浏览器知道： 我以后可能要查询此容器。
Demo
我们需要给容器设置一个 contain 属性，来支持对该容器的宽度进行查询。这里给 .card-container 容器设置 contain 属性，值为 layout inline-size：
- layout 是说容器外部的布局不会影响它内部的布局，反之亦然
- inline-size 是说，容器在宽度上不会被子元素撑开，子元素可以获取容器的宽度，调整自己的布局。
拓展一点题外话，contain目前有七个值，有三个是组合属性值。四个单维度属性值分别是 layout，size，paint还有 style，代表在这指定维度，这个容器和文档的其余部分是区别处理的。三个组合属性值就是把上面的提到的四个单维度属性值进行了组合。更多参数含义参见：developer.mozilla.org/zh-CN/docs/…
.product {
contain: layout inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
可以看一下这个视频，是网上找的一个例子。可以看到随着这个内部的 div 的变化，而不是随着屏幕变化，更小的卡片在发生展示宽度甚至有无的变化。
//摘自 2022 年的 CSS 全览
Demo: codepen.io/una/pen/LYb…
兼容性（截止20220613）
颜色空间和方法
接下来再介绍的是颜色空间和方法。这一部分会相对简略，如果想了解更多，请自行深入了解。这一部分摘自 2022 年的 CSS 全览 。
accent-color
背景
在accent-color之前，表单组件样式需要库或CSS解决方案来实现个性化。
方案
在accent-color之后，可以用一行 CSS 来为内置组件带来了主题颜色，除了色调之外，浏览器还会智能地为组件的辅助部分选择适当的对比色，并适应系统配色方案（亮暗）。
/* 为所有颜色着色 */
:root {
accent-color: hotpink;
}
/* 为一个元素着色 */
progress {
accent-color: indigo;
}
demo
下面这个 demo 演示可以针对不同的表单组件去写不同的颜色。使用accent-color后hover 和切换这种相关的颜色是不需要我们再去指定的，包括进度条的长按和拖拽中阴影部分的调整。他的实用性有多大呢？也不确定，要看视觉是设计师是不是觉得浏览器提供的解决方案是他们期望的视觉效果。
兼容性（截止20220613）
Color level 4 and 5
关于颜色的下一part是关于 color 的 level 4 和 level 5，即 color 这个 module 的升级。首先是颜色空间。
颜色空间
在过去的几十年里，web 一直由 sRGB 主导，但在高清显示器和预先配备 OLED 或 QLED 屏幕的移动设备不断扩大的数字世界中，sRGB 是不够的。
色彩空间（英語：Color space）是对色彩的组织方式。 借助色彩空间和针对物理设备的测试，可以得到色彩的固定模拟和数字表示。 色彩空间可以只通过任意挑选一些颜色来定义，比如像彩通系统就只是把一组特定的颜色作为样本，然后给每个颜色定义名字和代码；也可以是基于严谨的数学定义，比如Adobe RGB、sRGB。
颜色的表示方式是通过颜色空间完成的。每个颜色空间都为使用颜色提供了各种功能和权衡。有些人可能会将所有鲜艳的颜色打包在一起；有些人可能会先根据它们的亮度排列它们。
2022年，将提供 10 个新的颜色空间，每个都有独特的功能来帮助设计师和开发人员显示、挑选和混合颜色。以前，sRGB 是处理颜色的唯一选项，但现在 CSS 释放了新的潜力和新的默认颜色空间 LCH。
关于LCH：lea.verou.me/2020/04/lch…
渐变颜色空间
在渐变颜色空间之前，sRGB 是使用的默认颜色空间。sRGB 通常是可靠的，但确实有一些弱点，例如灰色死区。
在渐变颜色空间之后，告诉浏览器使用哪个颜色空间进行颜色插值。这使开发人员和设计人员能够选择他们喜欢的渐变。默认色彩空间也更改为 LCH 而不是 sRGB。
颜色表示方法
hwb()
HWB代表色调、白度和黑度。它表现为一种对人类友好的表达颜色的方式，因为它只是一种色调，加上一定量的白色或黑色以使其变亮或变暗。
三个值中的第一个——色调分量——代表色环的角度。您可以将值指定为以度为单位的角度（例如180deg）或简单地指定为数字（例如180）。例如，如果你看色环，蓝色是 240 度，所以它可以写为240deg或240。
第二个值以百分比表示。它表示与颜色混合的白色量。例如，100%具有全白，而0表示无白。
第三个值也以百分比表示。它表示添加到颜色中的黑色量。例如，100%有全黑，而0表示无黑。
:root {
--hwb-swatch-1: hwb(200 75% 0%);
--hwb-swatch-2: hwb(200 50% 25%);
--hwb-swatch-3: hwb(200 25% 50%);
--hwb-swatch-4: hwb(200 0% 75%);
--hwb-swatch-5: hwb(200 0% 90%);
}
.swatch:nth-of-type(1) {
background: var(--hwb-swatch-1);
}
.swatch:nth-of-type(2) {
background: var(--hwb-swatch-2);
}
.swatch:nth-of-type(3) {
background: var(--hwb-swatch-3);
}
.swatch:nth-of-type(4) {
background: var(--hwb-swatch-4);
}
.swatch:nth-of-type(5) {
background: var(--hwb-swatch-5);
}
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
}
效果如下：
使用此颜色函数会产生来自 sRGB 颜色空间的颜色，与 HSL 和 RGB 相同。就 2022 年的新意而言，这并没有给你带来新的色彩，但它可能会让语法和心智模型的粉丝更容易完成一些任务。
相关资源：
color-mix()
开发人员和设计人员可以在浏览器中混合颜色以及所有其他样式，而无需运行构建过程。此外，可以指定在哪个颜色空间中进行混合，或者使用 LCH 的默认混合颜色空间。
兼容性（截止20220613）
color-contrast()
它设置元素中颜色的对比度，并更改亮和暗值之间的差异。 它有以下参数：
| color | 它代表一个颜色对象。 |
|---|---|
| dark | 这是一个设置深色的可选参数。 |
| light | 这是一个设置光色的可选参数。 |
| 阈值 | 它是一个可选参数，包含0 - 100%之间的百分比，并指定从黑暗到浅色的转换。 |
兼容性（截止20220613）
相对颜色语法
相对颜色语法类似于混合颜色，但它更像是改变而不是混合。你可以从另一种颜色创建一种颜色，访问所用颜色函数命名的三个通道值，并有机会调整这些通道
lch(from var(--color) l calc(c-20%) h)
兼容性（截止20220613）
视口单位
背景
web提供了物理单位来描述视口。有高度、宽度、最小尺寸 (vmin) 和最大边 (vmax)。这些对很多web有效，但移动浏览器带来了复杂性。
- vi和vb，vi是沿着包含块的
内联轴方向尺寸的1%，vb是沿着包含块的块轴方向尺寸的1% 对这两个单位的兼容性比较差，基本在所有浏览器上都不兼容。但是这两个单位引出了两个比较有趣的概念包含块和块轴，内联轴。
- vh和vw，视口高度的1%和视口宽度的1%。可用来做可伸缩布局，但是兼容性没有rem好。所以目前还是rem布局居多。
- vmin，vmax, 视口宽度和高度之间的最小值的1%，视口宽度和高度之间的最大值的1%。
ex和ch单位，与em和rem相似，依赖于当前字体和字体大小。然而，与em和rem不同的是，这两个单位只也依赖于font-family，因为它们被定为基于特殊字体的法案。ch单位被定义为0字符的宽度,ex单位被定义为”当前字体的小写x的高度。
方案
在物理视口单元的基础上添加小型、大型和动态视口单位。这个想法是让开发人员和设计人员能够针对动态视口高度改变一下不协调的布局。
以下是新视口变体提供的所有新视口单位选项的完整列表：
/* 高度视口单位 */
.new-height-viewport-units {
height: 100vh;
height: 100dvh;
height: 100svh;
height: 100lvh;
block-size: 100vb;
block-size: 100dvb;
block-size: 100svb;
block-size: 100lvb;
}
/* 宽度视口单位 */
.new-width-viewport-units {
width: 100vw;
width: 100dvw;
width: 100svw;
width: 100lvw;
inline-size: 100vi;
inline-size: 100dvi;
inline-size: 100svi;
inline-size: 100lvi;
}
/* 最小视口单位 */
.new-min-viewport-units {
--size: 100vmin;
--size: 100dvmin;
--size: 100svmin;
--size: 100lvmin;
}
/* 最大视口单位 */
.new-max-viewport-units {
--size: 100vmax;
--size: 100dvmax;
--size: 100svmax;
--size: 100lvmax;
}
兼容性（截止20220613）
滚动捕捉
背景
在 Web 布局中，时常会碰到内容溢出容器的现状，如果 overflow 设置为 auto 或 scroll 时容器会出现水平或垂直滚动条，伴随着内容可能是展示不全的。
方案
为了给用户提供更好的滚动体验，CSS 提供了一些优化滚动体验的 CSS 特性，其中滚动捕捉就是其中之一。下面这张图比较全地讲了一些基础的概念，比如滚动容器、滚动轴以及捕捉。
有了滚动捕捉特性，我们要实现类似下图的效果就可以不需要依赖任何 JavaScript 库或脚本：
就是每次滚动时，图片的中心位置和容器中心位置对齐（想象一下 Swiper 的效果）。关键代码就下面这几行：
.contai ner {
scroll-behavior: smooth;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding: 20px;
}
img {
scroll-snap-align: center;
scroll-snap-stop: always;
}
Demo
Demo: codepen.io/airen/full/…
兼容性（截止20220613）
子网格subgrid
下一个介绍的是子网格。首先介绍一下相关的布局知识。
flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上。
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址。
参考资料：CSS Grid 网格布局教程
我们的需求出现，在 grid 中要画一个矩形，然后这个矩形中如果需要布局怎么办？一种方式是我们就把这个小的矩形中需要布局的dom提到大的 grid 里面去写，但这样就会缺失一些层级关系。
背景
另外一种解决方案是display: contents 。它类似于就是一个template，当设为contents 的时候，这个元素本身不会被渲染，但子元素能够正常渲染。这个方式可以让子矩形内部的元素被渲染，但是子矩形本身不被渲染。
如果我们在.outer 元素上显式设置 display: contents ，该元素本身不会被渲染，但子元素能够正常渲染：
Demo: codepen.io/airen/full/…
在某些布局中，特别是不希望调整 HTML 的结构的时候，我们就可以使用该特性。比如在 Flexbox 或 Grid 中，希望把其他后代元素变成网格项目或 Flex项目，那就可以这样做。
兼容性（截止20220613）
方案
display: contents 在规范讨论阶段和 display: subgrid 的讨论中是非常的激烈，最终是 display： contents 获胜了。你现在在Grid的布局中，也没有单独的display: subgrid ，而是将subgrid 移入到 grid-template-columns 和 grid-template-rows 中。
grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，这两个属性在 Grid 布局中尤为重要，它们的值是有多种多样的，而且它们的设置是比较相似的。子网格的实现，通过给这两个属性赋值，比如grid-template-columns: subgrid。
参见：developer.mozilla.org/en-US/docs/…
兼容性（截止20220613）
:has()
这一部分摘自 2022 年的 CSS 全览
背景
在 :has() 之前，选择器的主体总是在最后。例如，这个选择器的主体是一个列表项：ul > li。伪选择器可以改变选择器，但它们不会改变主体：ul > li:hover 或 ul >
li:not(.selected)。
方案
在 :has() 之后，元素树中较高的主体可以保留为主体，同时提供有关子项的查询：ul:has(> li)。很容易理解 :has() 是如何获得“父选择器”的通用名称的，因为在这种情况下，选择器的主体现在是父级。
Demo
这是一个基本语法示例，其中 .parent 类仍然是主体，但仅在子元素具有 .child 类时才被选中：
.parent:has(.child) {...}
这是一个示例，其中 <section> 元素是主体，但选择器仅在其中一个子元素具有 :focus-visible 时才匹配：
section:has(*:focus-visible) {...}
使用 @supports 及其 selector() 函数使检查支持变得简单，该函数在使用之前测试浏览器是否支持该语法：
@supports (selector(:has(works))) {
/* safe to use :has() */
}
Demo: codepen.io/wangning_el…
兼容性（截止20220613）
参考链接
加入我们
我们来自字节跳动飞书商业应用研发部(Lark Business Applications)，目前我们在北京、深圳、上海、武汉、杭州、成都、广州、三亚都设立了办公区域。我们关注的产品领域主要在企业经验管理软件上，包括飞书 OKR、飞书绩效、飞书招聘、飞书人事等 HCM 领域系统，也包括飞书审批、OA、法务、财务、采购、差旅与报销等系统。欢迎各位加入我们。
扫码发现职位&投递简历
