快速总结 ↬ CSS 不断发展，一些很酷且有用的属性要么完全被忽视，要么由于某种原因没有像其他属性那样被广泛讨论。在本文中，我们将介绍这些 CSS 属性和选择器的一部分。
all属性
这是一个简写属性，通常用于通过有效地停止继承将所有属性重置为其各自的初始值，或强制所有属性继承。
-
initial 将所有属性设置为其各自的初始值。 -
inherit 将所有属性设置为其继承的值。 -
unset 将所有值更改为其各自的默认值，即inherit或initial。 -
revert 结果值取决于此属性所在的样式表来源。 -
revert-layer 结果值将匹配上一个级联层或下一个匹配规则。
此属性可有效地用于重置样式或重构 CSS以停止继承并防止不需要的样式泄漏。
currentColor
通常被称为“第一个 CSS 变量”，currentColor是一个等于元素color属性的值。它可用于将与属性值相等的值分配color给任何接受颜色值的 CSS 属性。它强制 CSS 属性继承该color属性的值。
该值对于避免将相同的值分配给在同一选择器中接受颜色（如border-color、background、box-shadow等）的多个 CSS 属性非常有用。
自定义属性后备值
自定义属性允许开发人员在样式表中创建可重用的值，而无需像 SASS 这样的 CSS 预处理器，从而为 CSS 带来了显着的改进。自定义属性立即被采用，并在今天被广泛使用，效果非常好，尤其是在主题和与 JavaScript 的交互中。
但是，我觉得后备值有些被忽略了。如果您不熟悉后备值，则它是可以分配给var功能的第二个值，如果未设置第一个值，则应用该值。
计数器
CSS 允许开发人员定义可以使用 CSS属性递增、递减和显示的命名计数器。content
-
counter-reset 此属性用于初始化单个或多个计数器。也可以分配一个默认的起始值。 -
reversed 定义计数器时使用的函数，用于counter-reset使计数器向下计数而不是向上计数。 -
counter-increment 指定要递增的计数器（如果将计数器定义为reversed或将负值传递给 ，则指定递减counter-increment）。默认增量值为 1，但也可以将自定义值传递给此属性。 -
counter 用于访问计数器值。通常用于content属性。
互动媒体查询
在创建响应式网站时，我们经常根据屏幕大小对输入机制做出假设。我们假设屏幕尺寸1920px属于台式电脑或笔记本电脑，并且用户正在使用鼠标和键盘与网站进行交互，但是带有触摸屏或智能电视屏幕的笔记本电脑呢？
这就是交互媒体功能的用武之地，它允许我们微调用户可以交互的组件的可用性（输入、画布菜单、下拉菜单、模式等），具体取决于主要输入机制——触摸、触控笔、鼠标指针等
@media (pointer: fine) {
/* using a mouse or stylus */
}
@media (pointer: coarse) {
/* using touch */
}
@media (hover: hover) {
/* can be hovered */
}
@media (hover: none) {
/* can't be hovered */
}
aspect-ratio尺寸控制
最初发布时aspect-ratio，我认为我不会在图像和视频元素之外以及非常狭窄的用例中使用它。我惊讶地发现自己以类似的方式使用它currentColor——以避免不必要地设置具有相同值的多个属性。
有了aspect-ratio，我们可以轻松控制元素的大小。例如，等宽和等高按钮的纵横比为1. 这样，我们可以轻松地创建适应其内容和不同图标大小的按钮，同时保持所需的形状。
:where和:is伪选择器
去年，这两个伪选择器获得了更广泛的浏览器支持，尽管围绕它们进行了很多讨论，但我还没有看到 Web 上的所有这些用途。
这两个选择器都处理分组和特异性，所以让我们从:is伪选择器开始。
让我们看一下下面的例子。我们要为列表项和嵌套列表设置以下默认样式。我们需要涵盖有序列表和无序列表及其组合。
ol li,
ul li {
margin-bottom: 0.25em;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin: 0.25em 0 1em;
}
scroll-padding
在实现固定页眉时，我最讨厌的一个问题是页面滚动链接如何导致固定页眉覆盖部分内容。我们必须使用 JavaScript 来解决这个问题并实现自定义滚动逻辑以考虑固定的标题偏移量。如果断点上的标头高度发生变化，事情只会变得更加复杂，所以我们也需要用 JavaScript 覆盖这些情况。
幸运的是，我们不必再依赖 JavaScript。我们可以scroll-padding-top使用标准 CSS 媒体查询来指定和更改它的值。
字体渲染选项
我最近在一个项目中为数值设置动画，其中一个值将从零增加到最终值。我注意到，由于各个字符具有不同的宽度，因此在动画过程中文本一直在左右跳跃。
请注意 Fira Sans 字体如何具有不同的数值字符宽度。（第二行多了一个字符）（大预览）
我认为这个问题无法解决，然后我继续前进。社区民意调查中的一条推文建议我应该研究一下font-variant-numeric: tabular-nums，我惊讶地发现有太多影响字体渲染的选项。
例如，tabular-nums通过为所有数字字符设置相等的宽度来解决上述问题。
