使用CSS的currentColor变量扩展颜色级联

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

如果你有使用Sass或LESS,你可能已经在你的样式表中使用过变量了,也知道它们确实非常有用。如果你没有使用预处理器,那么你就可能会好奇这到底是怎么一回事,为什么变量会如此受欢迎,它们为何会这么有用。在这篇文章中,我们先大概讲一下为什么变量如此有用,然后再认识一下另一个特殊的变量:currentColor

变量的好处在哪?

CSS中的变量很有用,因为它们允许我们写更多DRY(不再自我重复,也就是不需要一直写重复内容的代码)代码。它们对于管理和维护大型项目也有非常好用,因为它们包含了大量重复的值。

变量最常见的用例之一是网站或应用程序中的颜色主题/方案。使用变量,在CSS文件中创建并管理颜色方案会容易得多。比如说,在CSS文件中,对于不同的属性,配色方案通常需要重复使用一些颜色值。如果你想要改变某个方案的主要颜色,你就需要在样式表内所有使用了这个颜色的地方进行更改。使用CSS变量,你可以在一个位置定义一个变量(例如,定义一个名为primary-color的变量),赋给它一个颜色值,然后将这个变量作为一个值使用,你就可以在样式表中的任何地方使用它。然后,当你想要改变这个颜色的时候,你需要做的只是为这个变量分配一个不同的颜色值,这样,在样式表中所有使用了这个变量的地方都会自动地更新它们的颜色。

CSS2.1没有引入变量(不过,这也并不完全正确,正如你在这篇文章中看到的)。在2014年,和预处理器变量类似的本地CSS变量被引入了。这些变量可以说甚至比预处理器变量更好用。所有的CSS属性都可以接受一个CSS变量作为值。

除了新变量,CSS还配有一个关键字的值,几乎也相当于是一个变量:currentColor关键字。

currentColor关键字

这个currentColor关键字就像是一个CSS变量,不同的是它有一个主要的限制:你只可以在能够接受<color>的地方使用它;如果该属性不能接受<color>值,它也就不能接受currentColor作为值。

以下是属性中能够接受currentColor为值的使用示例:

box-shadow: inset 2px 2px 3px currentColor;
background-color: currentColor; /* not a good idea! */
background-image: linear-gradient(currentColor, transparent);

currentColor和其它变量之间的另一个区别是,你没办法用给其它变量赋值的方法给它赋值。currentColor的值是由当前元素使用的color属性的计算值决定的。也就是说,currentColor的值和当前color属性的值是一样的,这也是currentColor这个名字的由来。

所以,如果回到我们前面的例子中,currentColor关键字把盒阴影的颜色设置为和div一样的颜色,无论你给div设置的是什么样的color值。如果你没有设置任何的color,它会继承div的任何一个父元素的颜色。如果所有的父元素都没有color,大多数浏览器会直接把它默认设置为黑色。

换句话说:currentColor关键字就是用于设置元素的属性,然后该元素的子元素,就会继承该元素的color属性设置的颜色值。因此,它其实就是作为一个inherit值,允许那些不能通过属性或子元素继承的颜色进行继承。

这也意味着,对于已经继承了color值的属性,currentColor不会再被使用。

默认继承color值的属性和元素

当一个元素有一个color值,无论它是显示设置还是继承的,该元素的某些能够接受<color>值的前景元素将会默认继承该color值。

比如说,元素的边框是元素前景的一部分。因此,即使你没有指定边框的颜色,该边框都会得到和color属性值一样的颜色。如果元素没有color属性值,大多数浏览器通常会默认使用黑色。

这个示例中的边框颜色是紫色的:

.parent {
    color: purple;
}

.child {
    border: 5px solid; /* we didn’t specify the border color here */
}

元素中将会得到/继承元素color值的包括:

  • 元素的文本内容——正是color属性使用的地方
  • 文本的轮廓
  • 元素的边框
  • 元素的盒阴影
  • imgalt文本。也就是,当无法显示图像时,代替图像出现的文本,会继承这个颜色值。
  • 列表项的小黑点和边框
  • 一些浏览器(比如Chrome)水平线(<hr>)的边框颜色。(没有边框的话,颜色就不会受影响)。

如果你没有在某个元素的这些属性中显式地给它们设置颜色,它们就会默认继承元素的color计算值。

下面的demo展示了上述元素属性的应用,它们继承页面中body元素的color值。改变body中的color属性的值,可以看到这些元素的颜色也一起改变了。

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/extending-the-color-cascade-with-the-css-currentcolor-variable.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部