CSS中总有些属性容易被我们忽视，但是他们却能巧妙的解决我们工作中的一些问题。本文从Lesser-Known And Underused CSS Features In 2022整理出4个工作中会用到但是你却可能不知道的CSS属性，并举例介绍他们的应用场景及具体使用方法，希望能在以后的工作中帮助到你。
currentColor
currentColor经常被叫做『第一个CSS变量』。currentColor从字面上理解就是"当前颜色"，即currentColor的值等于当前元素的color属性值，看上去有些像继承。它可以被应用于任何可以接收color值的属性中，比如border-color, background, box-shadow等。
当在同一个CSS选择器中，需要将同一个颜色值应用到多个接收color值的CSS属性上（例如border-color，background, box-shadow）时，currentColor就派上用场了。
下面我们来看一个具体例子。
如上所示，对于段落的border和box-shadow属性，我们可以直接这样设置就可以了。
aside {
border-left: 5px solid currentColor;
box-shadow: 5px 5px 10px currentColor;
}
.success {
color: darkgreen;
}
.warning {
color: darkgoldenrod;
}
.error {
color: darkred;
}
而不用针对每一个class中每一个带有color的属性分别设置一次。
.success {
color: darkgreen;
border-left: 5px solid darkgreen;
box-shadow: 5px 5px 10px darkgreen;
}
.warning {
color: darkgoldenrod;
border-left: 5px solid darkgoldenrod;
box-shadow: 5px 5px 10px darkgoldenrod;
}
.error {
color: darkred;
border-left: 5px solid darkred;
box-shadow: 5px 5px 10px darkred;
}
currentColor最好用的是设置内联样式的SVG颜色。当从UI那里拿到icon时通常都带有fill属性（比如fill: #333），我们可以在使用前将fill属性的值替换成currentColor。这样就可以不用深入到SVG内部（icon -> path -> fill）去覆盖fill属性了。
<!-- Before -->
<path fill="#bbdb44" d="..."/>
<!-- After -->
<path fill="currentColor" d="..."/>
/* Before */
.icon:hover path {
fill: #112244;
}
/* After */
.icon {
color: #bbdb44;
}
.icon:hover {
color: #112244;
}
浏览器支持情况
isolation
isolation是CSS3的属性之一，顾名思意就是"隔离"的意思，它可以决定一个元素是否要创建一个新的层叠上下文。它在与mix-blend-mode 和 z-index属性一起使用时特别有用。mix-blend-mode属性平时开发中也许不会用到，在这里就不做过多介绍了，感兴趣的小伙伴可以看看这篇文章。
接下来我们来说一说isolation与z-index结合使用的场景。
我们在写tooltip提示类的通用组件时，通常会设置其z-index属性。在使用的时候，有可能会发生tooltip的z-index值小于页面中某些元素的z-index值，造成tooltip被遮挡。通常我们会增加tooltip的z-index值，但是这有可能又会引起其他的元素被遮挡。
让我们来看一个例子。
h1有一个黄色的装饰背景，用伪元素before实现的。为了让装饰背景展示在h1的下面，我们给before设置了z-index: 1，给h1 span设置了z-index: 2，一切正常。
有一天，在文章中某一个部分加了一个tooltip的提示。正常情况下tooltip的z-index设置为1即可。但是当文章滚动使得tooltip出现在h1旁边的时候，就会发现tooltip会被遮挡。
通常这种问题的解决方案有两种：
- 重新设置
tooltip和h1 span的z-index值 - 使用
position: relative为它们各自的父元素设置z-index以创建新的层叠上下文
但是有没有更好的解决办法呢？isolation来了。它可以创建一个新的层叠上下文或者分组来起到隔离的作用。
接下来让我们分别在h1和tooltip上使用isolation：isolate来看看效果。
h1 {
isolation: isolate;
/* ... */
}
.tooltip {
isolation: isolate;
/* ... */
}
可以看到这时即使把h1 span的z-index设置为999999也没关系。大功告成。
浏览器支持情况
font-variant-numeric
当我们在做倒计时或者从0开始增加到某一个数值的动画效果时，由于不同数字的宽度不同，在动画执行期间会发生文字不停的左右摆动的现象。
以下图片中的数字使用的是Fira Sans字体，可以看出数字的宽度不同导致第二行可以多容纳下一个字符。
我们可以通过font-variant-numeric这个属性来解决这个问题。font-variant-numeric属性用来控制数字、分数和序号标记的替代字形的展示形式。这个属性有很多取值，具体的可以看看这里。其中的tabular-nums就可以使所有的数字都变成一样的宽度。但是有一点需要注意，这些特征受字体的影响，有些字体可能不支持。
除了tabular-nums取值之外，以下是使用Source Sans 3字体在font-variant-numeric其他几个不同取值下展示情况。
浏览器支持情况
scroll-padding-top
当遇到页面顶部header固定的布局结构时，如果在页面中加入了锚点链接的跳转动作，不做处理的情况下点击锚点链接跳到的位置会被header覆盖一部分区域。
这个时候scroll-padding-top属性就派上用场了。scroll-padding-top属性用来定义滚动窗口的最佳查看区域对于顶部的偏移量。我们可以通过给html设置scroll-padding-top的值为一个固定的高度来解决这个问题。
html {
scroll-padding-top: 6rem;
}
具体有关scroll-padding-top的介绍可以点击这里。
浏览器支持情况
总结
文章中所描述的几个问题通过其他途径基本上都能得到解决。CSS的世界就是这样，条条大路通罗马，但是我们要是能找到走直线的那一条，就可以留着时间快乐的去摸鱼呀~
传送门
看完了上面的几个小技巧，不妨再来看看这几篇文章中介绍的CSS特性你是否知道。
