2022年你不应该错过的CSS新特性
2022-03-09 10:05:04来源：前端充电宝
对于CSS来说，2022年是非常值得期待的一年，大量的新功能即将出现，有些已经开始登录浏览器，有些可能会在2022年获得浏览器的广泛支持。下面就来看看2022年有哪些值得期待的 CSS 新特性吧!
一、容器查询1. 基本概念容器查询使我们能够根据其父元素的大小设置元素的样式，它类似于 @media查询，不同之处在于它根据容器的大小而不是视口的大小进行判断。这一直是响应式设计的一个问题，因为我们有时候希望组件能够适应它的上下文。
2. 使用方法对于容器查询，需要使用 container 属性(它是 container-type 和 container-name 的缩写)指定一个元素作为容器。container-type 可以是width、height、inline-size、block-size。inline-size 和 block-size 是逻辑属性，根据文档的写入模式，它们可能会产生不同的结果。
main, aside { container: inline-size;}可以使用类似于媒体查询的方式来使用@container。需要注意，两者在括号中表达规则的方式有所不同(在容器查询中应该使用 inline-size > 30em 而不是 min-width: 30em)。这是媒体查询 4 级规范的一部分。当容器宽度大于 30rem 时，就切换到 flex 布局：
@container (inline-size > 30em) { .card { display: flex; }}CSS Containment Level 3 规范目前处于工作草案中，这意味着语法可能随时改变。
3. 当前状态目前容器查询在主流浏览器是不可用的，可以期待一下容器查询在浏览器的实现。
CSS Containment Module Level 3 (官方规范)：https://www.w3.org/TR/css-contain-3
二、:has()1. 基本概念:has()通常被称为“父选择器”，这个伪类使我们能够根据其后代选择一个元素。它有一些非常有趣的用例。例如，可以根据图像是否包含 ，而在中对图像进行不同的样式设置。
2. 使用方法要设置包含
的元素的样式，可以执行以下操作：section:has(h2) { background: lightgray;}当 ![]()
的父级 包含 时，设置 ![]()
的样式：
section:has(h2) img { border: 5px solid lime;}3 当前状态目前还没有主流浏览器支持该属性，但可以在 Safari 技术预览版中使用它。
Safari 技术预览版：https://developer.apple.com/safari/technology-preview/CSS Selectors Level 4 (官方规范)：https://www.w3.org/TR/selectors-4/
三、@when/@else1. 基本概念@when/@else 是CSS中的条件规则，类似于其他编程语言中的if/else 逻辑。它可以使编写复杂的媒体查询更加符合逻辑。这里选择使用@when而不是@if是为了避免与 Sass 产生冲突。
2. 使用方法可以查询多种媒体条件或支持的功能，例如用户的视口是否超过一定宽度，用户浏览器是否支持 subgrid。
@when media(min-width: 30em) and supports(display: subgrid) { } @else { }3. 当前状态现在该属性还没有在浏览器得到支持。现在还为时过早，仍在讨论中。预计今年不会广泛被浏览器支持，但它肯定是值得关注的一个非常实用的属性。
CSS Conditional Rules Module Level 5(官方规范)：https://www.w3.org/TR/css-conditional-5
四、accent-color1. 基本概念color-scheme 属性允许元素指示它可以轻松呈现的配色方案。操作系统配色方案的常见选择是“亮”和“暗”，或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时，操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。
2. 使用方法用法很简单，而且该属性是可继承的。所以可以在根级别设置它，以在任何地方应用它：
:root { accent-color: lime;}可以在单个元素上使用：
form { accent-color: lime;}input[type="checkbox"] { accent-color: hotpink;}3. 当前状态目前，accent-color 在 Chrome、Edge、Firefox 和 Safari 技术预览版中已经得到了支持。不支持该属性的的浏览器会直接使用默认颜色，并且输入是完全可用的。
CSS Basic User Interface Module Level 4(官方规范)：https://www.w3.org/TR/css-ui-4/
五、颜色函数1. 基本概念我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数，使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括：
hwb()：色相、白度、黑度。lab()：亮度以及决定色调的 a和b值。lch()：亮度、色度、色调。color-mix()：将两种颜色混合在一起。color-contrast()：从颜色列表中，输出与第一个参数相比对比度最高的颜色。color()：指定不同颜色空间中的颜色(例如display-p3)。2. 使用方法hwb(), lab() 和 lch() 的使用方式与我 rgb() 和 hsl() 函数基本相同，都有一个可选的alpha 参数：
.my-element { background-color: lch(80% 100 50); }.my-element { background-color: lch(80% 100 50 / 0.5); }color-mix() 将其他两种颜色混合后输出一种颜色。我们需要指定颜色插值方法作为第一个参数：
.my-element { background-color: color-mix(in lch, blue, lime);}color-contrast() 需要一个基色来比较其他颜色。它将输出对比度最高的颜色，或者在提供额外关键字的情况下，输出列表中符合相应对比度的第一种颜色：
/* 输出对比度最高的颜色 */.my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue);}/* 输出符合AA对比度的第一种颜色 */.my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue to AA);}3. 当前状态Safari 目前在浏览器支持方面处于领先地位，从版本 15 就开始支持hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通过 flag 启用。Firefox 支持 hwb()，并且还标记了对 color-mix() 和 color-contrast() 的支持。令人惊讶的是，Chrome 现在还不支持这些函数。
在代码中提供样式兼容并不难：给定两种颜色规则，如果浏览器不支持第二种颜色规则，它将忽略第二种颜色规则：
.my-element { background-color: rgb(84.08% 0% 77.36%); background-color: lch(50% 100 331);}这样，当浏览器支持该函数时，就可以直接使用了。
CSS Color Module Level 4(官方规范)：https://www.w3.org/TR/css-color-4/CSS Color Module Level 5(官方规范)：https://www.w3.org/TR/css-color-5
六、层叠层1. 基本概念层叠层让我们有更多的能力来管理CSS的“层叠”部分。目前，有几个因素决定了 CSS 代码中将应用哪些样式，包括选择器群众和出现的顺序。层叠层允许我们有效地将CSS分组(或者“分层”)。顺序较低的层中的代码将优先于较高层中的代码，即使较高层中的选择器具有更高的权重。
2. 使用方法下面来看看层叠层的基本使用：
/* 按顺序创建图层 */@layer reset, base, theme;/* 将CSS添加到每个层 */@layer reset { }@layer base { h1.title { font-size: 5rem; }}@layer theme { h1 { font-size: 3rem; }}theme 层中的CSS字体大小声明将覆盖base层中的字体大小声明，尽管后者选择器具有更高的权重。
3. 当前状态最新版本的 Firefox 已经支持了层叠层，并且可以在 Chrome 和 Edge 中使用 flag 启用(Chrome 99 版本将全面支持层叠层)。看起来所有主流浏览器都在使用这个规范，所以希望尽快能得到更广泛的支持。
CSS Cascading and Inheritance Level 5(官方规范)：https://www.w3.org/TR/css-cascade-5/
七、subgrid1. 基本概念作为 CSS Grid Layout Module 2 规范的一部分，subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。
例如，以下面这个带有标题的图像为例。标题的长度各不相同，使用 subgrid 可以直接让它们对齐，而无需设置固定的高度。
2. 使用方法首先将父元素设置为grid布局，将子元素的“grid-template-columns”或“grid-template-rows”属性设置为 subgrid：
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto);}.grid > figure { display: grid; grid-template-rows: subgrid;}.grid figcaption { grid-row: 2;}实现效果：
完整代码：https://codepen.io/michellebarker/embed/YzERyor
3. 当前状态值得注意的是，自 2019 年以来，Firefox 已经支持了 subgrid，但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它，所以可能有幸在今年看到它登陆 Chrome 和 Edge。
CSS Grid Layout Module Level 2(官方规范)：https://www.w3.org/TR/css-grid-2/
八、@scroll-timeline1. 基本概念@scroll-timeline 属性定义了一个AnimationTimeline，其时间值由滚动容器中的滚动进度决定(而不是时间决定)。一旦指定，@scroll-timeline 将通过使用animation-timeline 属性与CSS Animation相关联。
2. 使用方法这里来看一个简单的例子：
/* 设置关键帧动画 */@keyframes slide { to { transform: translateX(calc(100vw - 2rem)); }}/* 配置scroll timeline，这里将它命名为了slide-timeline */@scroll-timeline slide-timeline { source: auto; orientation: vertical; scroll-offsets: 0%, 100%; /* 指定关键帧动画和 scroll-timeline */.animated-element { animation: 1s linear forwards slide slide-timeline;}我们也可以对scroll-offsets属性使用基于元素的偏移量，以在特定元素滚动到视图中时触发 timeline：
@scroll-timeline slide-timeline { scroll-offsets: selector(#element) end 0, selector(#element) start 1;}3. 当前状态如果对 @scroll-timeline 感兴趣，可以在 Chrome 中使用 flag 来启用它。当我们遇到一个复杂的动画时，可能需要使用 JavaScript 动画库来实现，但是对于相对简单的动画，使用该属性就可以减少不必要的import。
Scroll-linked Animations(官方规范)：https://drafts.csswg.org/scroll-animations-1/
九、嵌套1. 基本概念如果你熟悉 Sass，就会知道嵌套选择器的便利性。本质上，就是在父级中编写子级规则。嵌套可以使编写CSS代码更加方便，现在嵌套终于来到了原生 CSS!
2. 使用方法从语法上讲，它与 Sass 相似。下面来给 class 为 card 中的 h2 子元素定义样式规则：
.card { color: red; & h2 { color: blue; }}可以将其用于伪类和伪元素：
.link { color: red; &:hover, &:focus { color: blue; }}这些就等价于下列 CSS 代码：
.link { color: red;}.link:hover,.link:focus { color: blue;}3. 当前状态目前还没有浏览器支持嵌套。如果你使用PostCSS，可以通过预置的 postcss-preset-env 插件来尝试嵌套。
CSS Nesting Module(官方规范)：https://www.w3.org/TR/css-nesting-1/
十、总结现在正处于 CSS 蓬勃发展的时代。在写这篇文章时，我注意到这些新功能有一些共同点，它们都是为了帮助我们编写更好、更干净、更高效的代码。随着时间的推移，预处理工具(如 Sass)可能会变得不再重要。让我们一起期待更多 CSS 新特性出现吧!
section:has(h2) { background: lightgray;}当 的父级
时，设置
的样式：
section:has(h2) img { border: 5px solid lime;}3 当前状态目前还没有主流浏览器支持该属性，但可以在 Safari 技术预览版中使用它。
Safari 技术预览版：https://developer.apple.com/safari/technology-preview/CSS Selectors Level 4 (官方规范)：https://www.w3.org/TR/selectors-4/
三、@when/@else1. 基本概念@when/@else 是CSS中的条件规则，类似于其他编程语言中的if/else 逻辑。它可以使编写复杂的媒体查询更加符合逻辑。这里选择使用@when而不是@if是为了避免与 Sass 产生冲突。
2. 使用方法可以查询多种媒体条件或支持的功能，例如用户的视口是否超过一定宽度，用户浏览器是否支持 subgrid。
@when media(min-width: 30em) and supports(display: subgrid) { } @else { }3. 当前状态现在该属性还没有在浏览器得到支持。现在还为时过早，仍在讨论中。预计今年不会广泛被浏览器支持，但它肯定是值得关注的一个非常实用的属性。
CSS Conditional Rules Module Level 5(官方规范)：https://www.w3.org/TR/css-conditional-5
四、accent-color1. 基本概念color-scheme 属性允许元素指示它可以轻松呈现的配色方案。操作系统配色方案的常见选择是“亮”和“暗”，或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时，操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。
2. 使用方法用法很简单，而且该属性是可继承的。所以可以在根级别设置它，以在任何地方应用它：
:root { accent-color: lime;}可以在单个元素上使用：
form { accent-color: lime;}input[type="checkbox"] { accent-color: hotpink;}3. 当前状态目前，accent-color 在 Chrome、Edge、Firefox 和 Safari 技术预览版中已经得到了支持。不支持该属性的的浏览器会直接使用默认颜色，并且输入是完全可用的。
CSS Basic User Interface Module Level 4(官方规范)：https://www.w3.org/TR/css-ui-4/
五、颜色函数1. 基本概念我们可能已经很熟悉 Hex、RGB 和 HSL 颜色格式。CSS Color Module Levels 4 和 5 中包括一整套新的颜色函数，使我们能够以前所未有的方式在 CSS 中指定和操作颜色。它们包括：
hwb()：色相、白度、黑度。lab()：亮度以及决定色调的 a和b值。lch()：亮度、色度、色调。color-mix()：将两种颜色混合在一起。color-contrast()：从颜色列表中，输出与第一个参数相比对比度最高的颜色。color()：指定不同颜色空间中的颜色(例如display-p3)。2. 使用方法hwb(), lab() 和 lch() 的使用方式与我 rgb() 和 hsl() 函数基本相同，都有一个可选的alpha 参数：
.my-element { background-color: lch(80% 100 50); }.my-element { background-color: lch(80% 100 50 / 0.5); }color-mix() 将其他两种颜色混合后输出一种颜色。我们需要指定颜色插值方法作为第一个参数：
.my-element { background-color: color-mix(in lch, blue, lime);}color-contrast() 需要一个基色来比较其他颜色。它将输出对比度最高的颜色，或者在提供额外关键字的情况下，输出列表中符合相应对比度的第一种颜色：
/* 输出对比度最高的颜色 */.my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue);}/* 输出符合AA对比度的第一种颜色 */.my-element { color: white; background-color: color-contrast(white vs, lightblue, lime, blue to AA);}3. 当前状态Safari 目前在浏览器支持方面处于领先地位，从版本 15 就开始支持hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通过 flag 启用。Firefox 支持 hwb()，并且还标记了对 color-mix() 和 color-contrast() 的支持。令人惊讶的是，Chrome 现在还不支持这些函数。
在代码中提供样式兼容并不难：给定两种颜色规则，如果浏览器不支持第二种颜色规则，它将忽略第二种颜色规则：
.my-element { background-color: rgb(84.08% 0% 77.36%); background-color: lch(50% 100 331);}这样，当浏览器支持该函数时，就可以直接使用了。
CSS Color Module Level 4(官方规范)：https://www.w3.org/TR/css-color-4/CSS Color Module Level 5(官方规范)：https://www.w3.org/TR/css-color-5
六、层叠层1. 基本概念层叠层让我们有更多的能力来管理CSS的“层叠”部分。目前，有几个因素决定了 CSS 代码中将应用哪些样式，包括选择器群众和出现的顺序。层叠层允许我们有效地将CSS分组(或者“分层”)。顺序较低的层中的代码将优先于较高层中的代码，即使较高层中的选择器具有更高的权重。
2. 使用方法下面来看看层叠层的基本使用：
/* 按顺序创建图层 */@layer reset, base, theme;/* 将CSS添加到每个层 */@layer reset { }@layer base { h1.title { font-size: 5rem; }}@layer theme { h1 { font-size: 3rem; }}theme 层中的CSS字体大小声明将覆盖base层中的字体大小声明，尽管后者选择器具有更高的权重。
3. 当前状态最新版本的 Firefox 已经支持了层叠层，并且可以在 Chrome 和 Edge 中使用 flag 启用(Chrome 99 版本将全面支持层叠层)。看起来所有主流浏览器都在使用这个规范，所以希望尽快能得到更广泛的支持。
CSS Cascading and Inheritance Level 5(官方规范)：https://www.w3.org/TR/css-cascade-5/
七、subgrid1. 基本概念作为 CSS Grid Layout Module 2 规范的一部分，subgrid 允许元素在行轴或列轴上继承其父元素的网格。subgrid 对于解决各种用户界面挑战非常有用。
例如，以下面这个带有标题的图像为例。标题的长度各不相同，使用 subgrid 可以直接让它们对齐，而无需设置固定的高度。
2. 使用方法首先将父元素设置为grid布局，将子元素的“grid-template-columns”或“grid-template-rows”属性设置为 subgrid：
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto);}.grid > figure { display: grid; grid-template-rows: subgrid;}.grid figcaption { grid-row: 2;}实现效果：
完整代码：https://codepen.io/michellebarker/embed/YzERyor
3. 当前状态值得注意的是，自 2019 年以来，Firefox 已经支持了 subgrid，但近三年后还没有其他浏览器跟进。有迹象表明 Chromium 团队已经开始着手实现它，所以可能有幸在今年看到它登陆 Chrome 和 Edge。
CSS Grid Layout Module Level 2(官方规范)：https://www.w3.org/TR/css-grid-2/
八、@scroll-timeline1. 基本概念@scroll-timeline 属性定义了一个AnimationTimeline，其时间值由滚动容器中的滚动进度决定(而不是时间决定)。一旦指定，@scroll-timeline 将通过使用animation-timeline 属性与CSS Animation相关联。
2. 使用方法这里来看一个简单的例子：
/* 设置关键帧动画 */@keyframes slide { to { transform: translateX(calc(100vw - 2rem)); }}/* 配置scroll timeline，这里将它命名为了slide-timeline */@scroll-timeline slide-timeline { source: auto; orientation: vertical; scroll-offsets: 0%, 100%; /* 指定关键帧动画和 scroll-timeline */.animated-element { animation: 1s linear forwards slide slide-timeline;}我们也可以对scroll-offsets属性使用基于元素的偏移量，以在特定元素滚动到视图中时触发 timeline：
@scroll-timeline slide-timeline { scroll-offsets: selector(#element) end 0, selector(#element) start 1;}3. 当前状态如果对 @scroll-timeline 感兴趣，可以在 Chrome 中使用 flag 来启用它。当我们遇到一个复杂的动画时，可能需要使用 JavaScript 动画库来实现，但是对于相对简单的动画，使用该属性就可以减少不必要的import。
Scroll-linked Animations(官方规范)：https://drafts.csswg.org/scroll-animations-1/
九、嵌套1. 基本概念如果你熟悉 Sass，就会知道嵌套选择器的便利性。本质上，就是在父级中编写子级规则。嵌套可以使编写CSS代码更加方便，现在嵌套终于来到了原生 CSS!
2. 使用方法从语法上讲，它与 Sass 相似。下面来给 class 为 card 中的 h2 子元素定义样式规则：
.card { color: red; & h2 { color: blue; }}可以将其用于伪类和伪元素：
.link { color: red; &:hover, &:focus { color: blue; }}这些就等价于下列 CSS 代码：
.link { color: red;}.link:hover,.link:focus { color: blue;}3. 当前状态目前还没有浏览器支持嵌套。如果你使用PostCSS，可以通过预置的 postcss-preset-env 插件来尝试嵌套。
CSS Nesting Module(官方规范)：https://www.w3.org/TR/css-nesting-1/
十、总结现在正处于 CSS 蓬勃发展的时代。在写这篇文章时，我注意到这些新功能有一些共同点，它们都是为了帮助我们编写更好、更干净、更高效的代码。随着时间的推移，预处理工具(如 Sass)可能会变得不再重要。让我们一起期待更多 CSS 新特性出现吧!
