都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-colorbackgroundbox-shadow等。

当在同一个CSS选择器中,需要将同一个颜色值应用到多个接收color值的CSS属性上(例如border-colorbackgroundbox-shadow)时,currentColor就派上用场了。

下面我们来看一个具体例子。

如上所示,对于段落的borderbox-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

isolationCSS3的属性之一,顾名思意就是"隔离"的意思,它可以决定一个元素是否要创建一个新的层叠上下文。它在与mix-blend-mode 和 z-index属性一起使用时特别有用。mix-blend-mode属性平时开发中也许不会用到,在这里就不做过多介绍了,感兴趣的小伙伴可以看看这篇文章。 接下来我们来说一说isolationz-index结合使用的场景。

我们在写tooltip提示类的通用组件时,通常会设置其z-index属性。在使用的时候,有可能会发生tooltipz-index值小于页面中某些元素的z-index值,造成tooltip被遮挡。通常我们会增加tooltipz-index值,但是这有可能又会引起其他的元素被遮挡。

让我们来看一个例子。

h1有一个黄色的装饰背景,用伪元素before实现的。为了让装饰背景展示在h1的下面,我们给before设置了z-index: 1,给h1 span设置了z-index: 2,一切正常。

有一天,在文章中某一个部分加了一个tooltip的提示。正常情况下tooltipz-index设置为1即可。但是当文章滚动使得tooltip出现在h1旁边的时候,就会发现tooltip会被遮挡。

通常这种问题的解决方案有两种:

  • 重新设置tooltiph1 spanz-index
  • 使用 position: relative 为它们各自的父元素设置 z-index 以创建新的层叠上下文

但是有没有更好的解决办法呢?isolation来了。它可以创建一个新的层叠上下文或者分组来起到隔离的作用。

接下来让我们分别在h1tooltip上使用isolation:isolate来看看效果。

h1 {
  isolation: isolate;
  /* ... */
}

.tooltip {
  isolation: isolate;
  /* ... */
}

可以看到这时即使把h1 spanz-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小技巧