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
特性你是否知道。