2022年最好的CSS新功能
从鲜为人知的滚动捕捉属性到令人惊讶的新调色板，这里有七个你不想错过的层叠样式表更新
层叠样式表（CSS）于1996年首次推出，它仍然是网络开发堆栈中不可或缺、不断发展的一部分。像其他有生命力的语言一样，CSS也在不断引入新的功能以应对现实世界的实践。这种快速的演变会使专门的开发人员也很容易错过新功能。下面我们就来看看CSS中最有用的新功能和即将推出的功能。
子网格
自从CSS诞生以来，开发者们一直在抱怨CSS中某些畸形的缺点。一些司空见惯的任务，比如在CSS中居中的东西，需要过于复杂的变通和修饰。另一个大问题是如何获得一个合理的网格布局，至少在CSS网格布局模块出现之前是这样的。
网格布局用display: grid 声明表示，它是Flexbox的一种表亲，因为它可以让你定义矩形布局，但也可以在两个维度上控制你的网格。研究表明，大多数使用CSS的开发者都知道网格布局，而且我们中的许多人都在使用它。(如果你还没有使用它，就去看看吧！）。
Subgrid是Grid Layout模块的一个新的、非常有用的功能。subgrid 功能让你定义一个子网格，它将继承其父的布局。这与在另一个网格中嵌套显示不同；在这种情况下，子网格定义了自己的尺寸和间隙。使用subgrid ，父网格的布局被应用于子网格，但子网格仍然可以在必要时覆盖布局的各个方面。
在撰写本文时，subgrid 只在 Firefox 71 或更高版本中实现，但它在Safari WebKit、Google Chrome 和Microsoft Edge 的路线图上。Subgrid将是一个非常有用的布局功能。
重点颜色
一些显示元素尽管被普遍使用，但传统上却很难进行样式设计。例如，复选框和单选按钮经常被替换成一个自定义小部件，模仿这些元素的行为，同时隐藏浏览器的实现。新的CSSaccent-color 选项允许你针对这些元素。
例如，你可以给你页面上的所有单选按钮应用洋红色，如清单1所示（也可以看这个实时例子）。
清单1.在CSS中控制单选按钮的颜色
<style>
input[type="radio"] {
accent-color: magenta;
}
</style>
<form action="/foo.bar">
<p>Select your favorite outdoor adventure type</p>
<input type="radio" id="mountain" name="type" value="mountain">
<label for="mountain">Mountain</label><br>
<input type="radio" id="ocean" name="type" value="ocean">
<label for="ocean">Ocean</label><br>
<input type="radio" id="desert" name="type" value="desert">
<label for="desert">Desert</label>
</form>
滚动捕捉
CSS提供了一组方便的属性来控制网页浏览器中的滚动快照动作。这个功能的某些部分已经存在了几年，而另一些部分还在向最近的浏览器版本推广。
有趣的是，超过三分之一的CSS用户仍然不知道滚动快照的存在。
scroll-snap-* properties 命令为你提供了相当多的方法来微调容器上的滚动位置的工作方式。开发人员可以获得更高的精度，而最终用户则可以获得更流畅、更可控的用户体验。
清单2给出了一个控制div 上的滚动快照的小例子（也可以看这个实时例子）。
清单2.简单的滚动捕捉例子
<style>
.scroll-container,
.scroll-area {
max-width: 850px;
height: 300px;
font-size: 60px;
}
.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
height: 500px;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-container,
.scroll-area {
margin: 0 auto;
}
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(1) { background: IndianRed; }
.scroll-area:nth-of-type(2) { background: Moccasin; }
.scroll-area:nth-of-type(3) { background: thistle; }
.scroll-area:nth-of-type(4) { background: seagreen; }
</style>
<div class="scroll-container">
<div class="scroll-area">1</div>
<div class="scroll-area">2</div>
<div class="scroll-area">3</div>
<div class="scroll-area">4</div>
</div>
无论你在哪里释放滚动移动，清单3中的y 滚动位置会自动移动到子元素上。这是因为滚动容器的scroll-snap-type 属性设置为y mandatory ，而子元素的声明为scroll-snap-align: start 。
你也可以修改这种行为。例如，你可以把scroll-snap-type 属性设置为y proximity 。这就像你所期望的那样，只有在滚动接近元素的时候才会扣住。
顺便提一下，相关的overscroll-behavior属性可以让你定义嵌套滚动容器的行为。
CSS逻辑属性
如果你曾经想在左边和右边，或者底部和顶部设置一个容器的边框，你一定经历过不得不逐字逐句写出border-left 和border-right ，或者border-top ，border-bottom 属性的烦人事情。问题是，没有办法在不影响你不想操作的边框的情况下利用快捷键属性。这种不便也适用于padding和margin等元素。
CSS逻辑属性模块让你使用inline 和block 关键字来抽象地指代事物。当你想谈论左和右时，使用inline ；当你想指代顶部和底部时，使用block 。例如，要在一个div 的左边和右边设置一个边框，你可以使用清单3中的代码（也可以在这里看到一个实时的例子）。
清单3.使用逻辑内联的左和右填充
div {
border-inline: 10px dashed seagreen;
}
这些是对边框有用的快捷方式，但你也可以在许多其他属性中找到inline 和block 逻辑关键字。
大多数开发者使用这些快捷方式来处理文本方向和书写模式的考虑。在这些情况下，使用像padding-inline-end 这样的属性可以让你以尾部填充为目标，而不管文本方向是什么活动。基本上，对inline和block的抽象允许编写适用于各种设置的通用样式。更深入的讨论请参见CSS逻辑属性和值。
容器查询
容器查询在CSS中还没有完全稳定下来，但它们即将到来。它们将对我们思考响应式设计的方式产生重大影响。其基本思想是，你将能够不仅根据视口和媒体，而且根据父容器的大小来设置断点。
语法还没有完全定义，但可能会像清单4那样。
清单4.@container
@container (max-width: 650px){ … }
想想看，根据不同容器的大小来微调布局将是多么强大，这些容器体现在整个UI的嵌套层中。这是一个相当全面的变化，可能会激起一波界面创新。
@when和@else
当我们在考虑新的@container 查询时，你是否知道有条件的@when和@else查询支持也即将到来？它还没有被任何主要的浏览器所支持，但这是一个在不远的将来会出现的功能。
@when 和@else 查询在处理媒体和支持查询时，能够实现条件性的if/then风格的逻辑流。它们将在许多复杂的CSS情况和布局中简化你的生活。
三个新的调色板
自古以来，CSS从业者都使用RGB、HEX和命名颜色来美化和活跃他们的设备显示。最近，HSL风格的颜色声明被引入。现在，CSS规范正在引入新的方法来表示颜色；即hwb 、lab 、lch 。
HWB代表色相、白度和黑度。这是一个整洁的补充，因其人类可读性而引人注目--你选择一种颜色，然后加上白色和黑色。最近版本的Chrome、Firefox和Safari都支持它。(见hwb()--人类的颜色符号？以了解更多关于HWB的信息。像RGB和HWL一样，它支持一个透明的alpha通道。
LCH是亮度、色度和色调的简称，它的特点是增加了可用颜色的范围。CSS中的LCH颜色：是什么，为什么，怎么做？"这是一个很好的概述，对CSS中的色彩理论进行了开阔眼界的讨论。目前，只有Safari支持LCH。
源自CIE LAB色彩理论的LAB，是新的色彩空间中最令人心动的理论。lab 颜色描述符声称包含了整个人类可感知的颜色范围，这是个相当大的主张。和LCH一样，它目前只被Safari支持。你可以从Mozilla CSS文档中了解更多关于CSS的LAB。
