都2022年了，还不知道这几个CSS特性该out了

阳呀呀
26,542 阅读5分钟

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;
}

浏览器支持情况

image.png

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也没关系。大功告成。

浏览器支持情况

image.png

font-variant-numeric

当我们在做倒计时或者从0开始增加到某一个数值的动画效果时，由于不同数字的宽度不同，在动画执行期间会发生文字不停的左右摆动的现象。

以下图片中的数字使用的是Fira Sans字体，可以看出数字的宽度不同导致第二行可以多容纳下一个字符。

image.png

我们可以通过font-variant-numeric这个属性来解决这个问题。font-variant-numeric属性用来控制数字、分数和序号标记的替代字形的展示形式。这个属性有很多取值，具体的可以看看这里。其中的tabular-nums就可以使所有的数字都变成一样的宽度。但是有一点需要注意，这些特征受字体的影响，有些字体可能不支持。

除了tabular-nums取值之外，以下是使用Source Sans 3字体在font-variant-numeric其他几个不同取值下展示情况。

浏览器支持情况

image.png

scroll-padding-top

当遇到页面顶部header固定的布局结构时，如果在页面中加入了锚点链接的跳转动作，不做处理的情况下点击锚点链接跳到的位置会被header覆盖一部分区域。 image.png

这个时候scroll-padding-top属性就派上用场了。scroll-padding-top属性用来定义滚动窗口的最佳查看区域对于顶部的偏移量。我们可以通过给html设置scroll-padding-top的值为一个固定的高度来解决这个问题。

html {
  scroll-padding-top: 6rem;
}

具体有关scroll-padding-top的介绍可以点击这里。

浏览器支持情况

image.png

总结

文章中所描述的几个问题通过其他途径基本上都能得到解决。CSS的世界就是这样，条条大路通罗马，但是我们要是能找到走直线的那一条，就可以留着时间快乐的去摸鱼呀~

传送门

看完了上面的几个小技巧，不妨再来看看这几篇文章中介绍的CSS特性你是否知道。

2022年CSS的6个新特性，赶快来了解一下（看过就会的那种）

12个你可能不知道的CSS小技巧

avatar
文章
阅读
粉丝