大漠老师：2022 年的 CSS，到底有哪些特性

关于2022年的CSS新特性，自己之前也有篇原创，CSS 的未来：Cascade Layers (CSS @layer)，专门是在介绍@layer（级联层）的文章，而新的一年会有更多的CSS的新特性会出现在浏览器中。

今天分享一篇大漠老师的文章，主要内容是2022年哪些CSS特性将在浏览器中出现，以下是正文。

原文: https://www.w3cplus.com/css/what-is-new-css-in-2022.html

作者：大漠老师，请联系作者获得授权,非商业转载请注明出处。

虽然近些年 CSS 变化很快，但我认为 2021 年是 CSS 的元年。在即将过去的 2021 年，CSS 变化非常地大，其中新增了很多特性，比如 CSS 容器查询、CSS 父选择器、CSS 层叠控制规则、CSS 子网格等等。而且这些特性已经在个别，甚至是在大部分主流浏览器已经可以看到了。几大主流浏览器（Chrome、Firefox、Safari和Edge）还专注于修复浏览器兼容性痛点，让 Web 开发者的工作变得更轻松。

浏览器兼容性方面的修复，在 Web.dev 上发布了 2021 年的年中和年终报告，报告虽然简单，但我们可以看到浏览器厂商都在致于力磨平 CSS 特性在浏览器上的兼容性。为此，我们应该感谢他们的付出！

随着 2021 年的结束，让我们一起来看看 2022 年，我们可以期待哪些 CSS 特性将会在浏览器中出现。这了是我连续第三年整理有关于 CSS 新特性方面的文章了，另外两篇是（可自行搜索）：

• 2020年CSS有哪些新特性
• 应用于下一代Web的样式
• 2021年你可能不知道的 CSS 特性

你即将看到是 2022 年的，你会发现这三篇文章提到的 CSS 特性有相同的，但他们也是有变化的。

回顾近两年的 CSS 发展

@Bramus 前两天在Twitter 上发了一条信息，他整理了一份 2022 年的将会出现在浏览器的 CSS 清单：

有关于清单中列出的 CSS 相关介绍，可以阅读他的文章：《CSS In 2022》

这份清单中列出的 CSS 特性和 @Adam Argyle 分别在 2020 年 和 2021 年分享的 CSS 新特性列的出的清单差不多，不同的是，在2021年，有些CSS特性已经得到了浏览器的支持，有些已经进入了浏览器的实验属性列表清单，说不定2022年，你就能看到了！

有关于 @Adam Argyle 在 2020 和 2021 分享的 CSS 新特性，我也曾整理过一份，清单有些类似，但内容还是有差异，主要涵盖了一些我自己在 CSS 方面的认识和尝试，分别记录在《2020年CSS有哪些新特性》和《2021年你可能不知道的 CSS 特性》以及《应用于下一代Web的样式》

当然，如果你也是 CSS 的忠实爱好者，不断的在关注和推进 CSS 向前发展，那么你可能已经知道了，自 2019 年开始，每年年低都会有一份关于 CSS 发展状态相关的报告（2019、2020 和 2021）呈现给你。在每年的报告中，我们都可以看到一项关于”开发者期待的CSS特性“的统计：

在第一份报告出来的时候，我特意还花了一点时间去理解这份有关于 CSS的报告：《从9102年的CSS状态报告中看CSS特性的使用》，另外有幸运在 2020年年底和一些大学生一起聊了一个关于CSS状态和学习的话题！如果你对该话题感兴趣的话，可以阅读《CSS现状和如何学习》，文章中附有分享时录制的视频！

除此之外，W3C 的 CSS 工作小组，这两年也都出了 CSS 规范的重点报告，最新的是 2020年 和 2021年的。注意，W3C 关于 CSS 规范的重点报告并不是每年都有的！接下来，我将按着 @Bramus 的 《CSS In 2022》大纲往下梳理，其中会加入一些我自己对这方面的认识和见解。

我需要额外提出的是，接下来内容中提到的 CSS 特性只会涉及到那些全新的或仍然没有得到浏览器支持的（哪怕是实验性方面的）特性。但这并不代表着它们不值得期待，说不定在2022年你就能使用了！如果你对这方面感兴趣的话，请继续往下阅读！

热门的 CSS 特性

在这节中提到的 CSS 特性是近些年来，Web 开发者一直期待的特性（或者说 CSS 中遗失的特性）。这些特性将在 2022 年的某个时候就得到了主流浏览器的支持。庆幸的是，有些特性已经在一个或多个主流浏览器中得到了支持，其他特性也将随着时间的推移也会随之而来。在 2022 年，学习或了解这些 CSS 特性，我想你会获得收益的！

有意思的是，CSSWG一直还维护着一份关于 CSS 设计中不完整的错语列表。感兴趣的可以点击这里阅读！

CSS 容器查询

CSS 容器查询的特性一直以来都是 Web 设计师和开发者所期待的功能之一，从这几年的 CSS 发展状态的报告就可以看得出来。在没有容器查询之前，Web 开发者大多是依赖于 JavaScript 脚本来做判断，从而改变 UI 网格。虽然 CSS 容器查询存在于 CSS Containment Module 中有些年头，但一直未得到浏览器的支持。庆幸的是，在 2021 年，该特性得到了飞速的发展，时至今日，能在主流浏览器中看到 CSS 容器查询功能。这一切，都离不开 @TerribleMia ，是她为我们带来了这么好的 CSS 特性，并且一直在推进该特性向前发展。

@TerribleMia 除了设计 CSS 容器查询特性之外，还设计了 CSS 另外两个非常优秀的特性，那就是 CSS 的 @layer 和 @scoped 两个 @ （At rule）规则。详细的可以阅读《Miriam's CSS Sandbox》。

CSS 容器查询 @container 有点类似于 CSS 的媒体查询 @media ，只是它将根据元素的父容器（或祖先元素）的尺寸（size）或样式（style）来调整自己或自己后代元素的样式规则。在没有 CSS 容器查询，Web 开发者为了能在不同容器下调整 UI，大多都是依赖于媒体查询来做。也就是说，有了该特性之后，不需要再依赖视窗大小加添加类名的方式来调整UI了：

上图演示了，基于视窗的设计和基于容器的尺寸设计。可以说， CSS 容器查询的出现，除了改变 Web 开发者的开发方式之外，也将给 Web 设计带来变革命。这个论点在 2021 年的 GDS 大会上，@Una Kravets 在分享的 《The New Responsive: Web design in a compoent-driven world》主题（该主题视频可以在 YouTube上访问）中就提出这样的观点：

CSS 容器查询将会成为下一代响应式 Web 设计必不可少的特性之一。

有了 CSS 容器查询之后，我们就可以基于同一个组件，在不同尺寸下调整其UI，比如我们手淘 APP 顶部的搜索框效果：

上面效果的关键性代码如下：

.form__container {
    container: inline-size;
}

.form {
    display: grid;
    align-items: center;
}

@container (min-width: 480px) {
    .form {
        grid-template-columns: min-content 1fr 200px;
        grid-template-areas: "searchIcon searchInput button";
        grid-template-rows: 88px;
        gap: 10px;
    }
}

@container (min-width: 768px) {
    .form {
        grid-template-columns: min-content 1fr min-content 200px;
        grid-template-areas: "searchIcon searchInput cameraIcon button";
        grid-template-rows: 88px;
        gap: 10px;
    }
}

详细代码可以点击这里阅读或获取。

CSS 容器查询在主流浏览器都能体验效果了，但需要开启其相关标记。如果你要运用于生产环境，可以考虑其相应的 Polyfill：

CSS容器查询特性绝对是众望所归的一个特性，在2022年更会全速向前！

有关于 CSS 容器查询更多的介绍可以移步阅读下面这些文章：

• 初探CSS容器查询
• 容器查询中的 container 和 @container
• 容器查询给设计带来的变化
• 现代Web技术让我们离容器查询更近一步

CSS的父选择器 :has()

CSS 选择器是 CSS 中最基础的知识，也是必不可少的一部分，如果你没掌握好 CSS 选择器的话，那么你将会在 CSS 的世界中有那种”众里寻她千百度，蓦然回首，那人却在灯火阑珊处“的感觉！也正因此，CSS 选择器模块的迭代非常的快，现在已经进入 Level 4 版本了。在 Level 4 版本中，添加了多个伪类选择器，比如 :is() 、:where() 、:not() 和 :has() 等，而其中 :has() 选择器也是我们期待已久的一个选择器。@SaraSoueidan 在 Twitter 上引用 @Jen Simmons 的话说：

:has()选择器本质上就是CSS中期待已久的父选择器！

CSS 的 :has() 伪类选择器和 :not() 有点相似，也被称为结构性伪类选择器，在 CSS 的函数中也称之为 动态伪类函数。它允许你更精细地匹配元素：

:has() 伪类代表一个元素，如果作为参数传递的任何选择器至少与一个元素相匹配！

简单地说，元素只有在传递到 :has() 中的选择器至少匹配一个元素时才会被选中。这样理解起来似乎有点晕，我们来看个简单地示例：

figure img { 
    aspect-ratio: 21 / 9; 
    border: 5px solid #3f51b5; 
}

figure:has(figcaption) img { 
    border: 5px solid #9c27b0; 
}

上面示例中的 figure img 选择器大家应该都明白，表示选中