type
status
date
slug
summary
category
tags
password
icon
一名合格的CSS工程师,总是善于运用不常见的CSS技术。
今天我们来学习一个好用但是鲜为人知的CSS关键字——currentColor,在设计动态样式中,我们可以用它来提升样式的灵活性和一致性。
欢迎加入「🌍独立全栈开发交流群」,一起学习交流前端和Node端技术

什么是currentColor

在认识currentColor之前,我是这样写样式:
认识currentColor之后,我喜欢这样写:
currentColor 是一个古老的CSS关键字,最早出现在CSS2.1规范中,当时设计的初衷是为了简化文本颜色与其他属性颜色之间的同步。它允许我们使用元素当前的文本颜色值作为其他属性(如 border-colorbackground-colorbox-shadow)的值。
例如:
这个样式的效果会是 border 的颜色 currentColorcolor 的色值一样。
notion image
currentColor 实际上是一种“继承”的表现形式,从而实现了样式的灵活性和一致性。

哪些属性可以使用currentColor

用法很简单,用在哪却很重要,以下属性都可以接受 currentColor
  1. 边框颜色(border-color
  1. 阴影颜色(box-shadowtext-shadow
  1. 背景颜色(background-color
  1. 轮廓颜色(outline-color
  1. SVG填充色(fillstroke
  1. 列表项标记颜色(list-style-color
  1. 文本装饰颜色(text-decoration-color
  1. 列分隔线颜色(column-rule-color
如果当前元素没有 color 属性,那么 currentColor 会继承父元素的 color 属性。

currentColor妙用思路

currentColor 的作用就是可设置动态一致的样式,所以一切的思路都源于想用更少的代码实现更灵活的样式。
  1. 响应式设计元素:在响应式设计中,currentColor 可以用于确保元素如边框、阴影等在不同设备上保持与文本颜色的一致性。
    1. 动态主题/皮肤切换:在支持多种主题的网站上,currentColor 可以帮助快速实现颜色主题的切换。只需更改文本颜色,与之相关的所有元素(如边框、背景、图标)的颜色也会相应变化。
      1. 图标和SVG颜色控制:对于SVG或字体图标,使用 currentColor 可以确保它们的填充色或描边色与文本颜色保持一致,从而实现设计上的和谐统一。
        1. 交互状态反馈:在按钮或链接的悬浮(hover)和激活(active)状态下,currentColor 可用于同步改变背景色或边框色,以提供视觉反馈,增强用户体验。
          1. 通用组件样式:在构建可重用的 UI 组件时,currentColor 可以提高样式的灵活性。例如,在一个按钮组件中,可以使用 currentColor 来定义边框和阴影,这样只需改变文本颜色就可以轻松适应不同的背景或上下文环境。

            结语

            作为一名前端工程师,以前总是先入为主把CSS当作实现样式的工具,但了解一些类似 currentColor 这样的特性后,恍然大悟,CSS更应该是一种设计工具或者设计方案。

            专栏资源

            专栏介绍:分享CSS新特性和好看的样式设计
            专栏地址:👉简明实用CSS技巧
             
            CSS技巧:用十行代码写一个跃动文字链的hover效果CSS前瞻:@media (scripting)助你优雅降级