- CSS 的新功能：现代 CSS 可以做什么
- @supports
- Flexbox Gaps
- content-visibility
- Transitions, Transforms, Animations
- 滚动捕捉
- :is 和 :where
- 还有其他值得一看的 CSS 新功能吗？
多年来，CSS 已经超越了背景颜色、边框、文本样式、边距和盒模型。现代 CSS 能够提供一系列的功能，而在过去，您需要 JavaScript 或变通方法来实现这些功能。
为了庆祝它在 2021 年取得的成就，在这篇文章中，我们想看看一些你可能不知道的令人惊叹的 CSS 新特性。我们将强调 web 设计人员和开发人员可以用现代 CSS 做的很酷的事情，讨论用例，浏览器支持，并给你一个快速的例子。
CSS 的新功能：现代 CSS 可以做什么
这是 CSS 如今具备的一些令人惊奇的功能
自定义属性/变量
自定义属性基本上允许你在一个集中的地方定义 CSS 属性的替身，以用于你的设计。要理解为什么这很有用，最好的方法就是去看一个例子。
通常，在构建一个主题时，你会选择一个配色方案，然后每次都要声明这些颜色。
a {
color: #cd2653;
}
.social-icons a {
background: #cd2653;
}
.wp-block-button.is-style-outline {
color: #cd2653;
}
这种方法的问题是，如果你想对其中一种颜色进行更改，你必须更改它的每一个实例。虽然代码编辑器可以通过搜索和替换轻松做到这一点，但这仍然很烦人。特别是当你只是想做一个快速的测试，而又要把所有的东西反过来的时候。
有更好的解决方案
自定义属性可以解决这个问题。在它们的帮助下，你可以将有关颜色指定给一个变量一次，然后每次使用时只需将该变量作为 CSS 属性输入即可，就像这样：
:root {
--global--color-primary: #28303d;
}
a {
color: var(--global--color-primary);
}
.social-icons a {
background: var(--global--color-primary);
}
这样，当您要进行更改时，只需要在一个地方进行更改即可。酷吧？过去，你需要采用 SASS 这样的预处理程序来使用变量，现在它是 CSS 的一个原生功能。
正如您在上面看到的，自定义属性也非常易于使用。在文档开头的 :root 选择器下定义你的变量（注意双连字符 -- 在变量前面，这就是将它们定义为自定义属性的原因，而且它们是区分大小写的！）。之后，你可以通过 var() 函数在整个文档中使用它们。
如果你想改变一个变量，只需改变 :root 下的声明就可以了。
至于此 CSS 功能的采用程度如何，浏览器支持非常好：
然而，请注意，所有可用的滚动捕捉属性的支持有点不均衡。因此，请务必检查您的特定用例。
:is 和 :where
在我们的新 CSS 特性列表中，你可能不知道的最后一个条目是 :is 和 :where 伪类。它们允许你通过缩短 CSS 选择器的列表来减少 CSS 标记的重复。
例如，比较一下：
.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
/* markup goes here */
}
对此：
:is(.main, .sidebar, .site-footer) a:hover {
/* markup goes here */
}
相同的东西适用于 :where：
:where(.main, .sidebar, .site-footer) a:hover {
/* markup goes here */
}
如果标记是一样的，有什么区别呢？不同的是 :is 更具体。它取括号中最特殊的元素的特殊性程度。相比之下，:where 的特异性永远是零。因此，再往下覆盖就容易多了。
浏览器的应用还有点不稳定，但慢慢就会有了。所以，请随意开始尝试。
还有其他值得一看的 CSS 新功能吗？
像所有其他的 Web 技术一样，CSS 标记也在不断发展。这意味着，总是有新的 CSS 功能可以发现，有新的东西可以尝试和试验。
上面，我们已经看了一些 CSS 如今已经能够做到的事情的例子，你可能会忽略。
你最喜欢现代 CSS 的什么功能？在下面的评论区分享吧!