“currentColor”，第一个 CSS 变量

它是什么？

浏览器支持

演示：徽章

结论

CSS 最近新增了自定义属性（又称 CSS 变量），这非常受欢迎。它为许多非常酷炫的技术打开了大门；很多事情只有当你能够跟踪系统状态并保持各个部分之间同步时才能实现，而变量就为你提供了一种实现这些功能的方法。

但有些 CSS 新手可能不知道，而经验丰富的开发者也经常忘记：其实早在自定义属性出现之前，CSS 中就已经有了另一个变量。它更简单，作用域也有限，所以它无法完成自定义属性的所有功能，但它的支持度更高，而且只要稍加巧妙，就能用它来完成一些很酷的事情。

这个变量是特殊的 CSS 关键字currentColor！

它是什么？

关键字基本上就是它听起来的样子：它是一个特殊的关键字，用于保存属性在使用位置的currentColor值。color

因此，举一个非常简单的例子，您可以使用它来制作一个引言框，其边框颜色与框中的文本颜色相同：

blockquote {
  color: hotpink;
  border-color: currentColor;
}

我认为，很时髦。

有趣的是，在这个特殊情况下，这border-color条规则是不必要的。我一直以为默认border-color值是black，或者 ，是由浏览器设置的，但我最近偶然发现，它实际上默认是currentColor！所以，如果border-color没有指定 ，它将hotpink默认使用 ！

有几个属性实际上默认为currentColor：

• 边框颜色
• 插入符号颜色
• 列规则颜色
• 文字装饰颜色
• 文本强调颜色
• 轮廓颜色（有时；阅读链接并阅读有关invert关键字的信息，如果支持则使用）

顺便说一句，在我查默认规则之前，我几乎对这些规则一无所知currentColor！我需要多了解一些text-emphasis；这真的很奇怪也很有趣。伙计，每次我钻研文档想找到具体的东西，最终都会发现一些意想不到的东西。

浏览器支持

当然，每当你了解到 Web 平台上一个你从未见过的酷炫功能时，你首先应该问的问题是：“它的浏览器支持程度如何？我真的能用它吗？”幸运的是，答案currentColor是“超级好”和“是的！”

事实上，对 JavaScript 的支持可以追溯到很久以前。看看caniuse.com 的支持概述，它支持 Edge 的每个版本，从 Chrome 和 Safari 4 开始就支持它（当时它们使用相同的引擎），从 Firefox 2 开始就支持它！甚至从 IE 9 开始，它就一直支持 IE！所以，除非你正在为一个还没有升级到 IE 8 以上的组织编写内部网应用程序，否则不用担心使用它。（可悲的是，我很清楚它们仍然存在😢）

演示：徽章

好吧，让我们开始实际行动吧。

我currentColor在研究实现工作设计的最佳方法时发现了这一点。我需要创建一排彩色徽章，每个徽章上都有一个标签，旁边还有一个数字计数器。每个徽章的背景颜色与其计数器的文本颜色匹配，每个徽章上的标签颜色也与网站背景颜色一致。为了举例说明，假设模型如下：

除了颜色之外，每个徽章都是相同的。这似乎是可重用组件的一个很好的用例！在现代浏览器中，您可以使用 CSS 变量作为徽章的背景和计数器的前景文本颜色。但假设您想要/需要支持 IE 11、Edge 12-14 或其他不支持自定义属性的浏览器。或者，也许您的 CSS 中已经有了一些实用程序类来定义各种情况下的文本颜色，例如Bootstrap 的上下文颜色类，例如.text-danger和.text-warning，因此使用属性设置徽章颜色的想法color非常方便。有了新的知识，您将如何去做呢currentColor？

首先，我们需要一个组件的根包装元素。我们将在这里设置颜色，并在这里添加一个类来覆盖颜色。

<div class="badge">
</div>

.badge {
  display: inline-block;
  color: cornflowerblue;
}

那么徽章组件里面需要什么呢？乍一看，有两个区域：带有彩色背景和白色文本的部分，我称之为标题块；以及侧面与标题块背景颜色匹配的数字，我们称之为计数器。

标题块肯定需要在 DOM 中拥有自己的块，因为它有背景色。但计数器可能不需要，因为它只是放在了旁边，而内联文本本来就是这么做的。所以，我们试试这个标记：

<div class="badge">
  <div class="title-block">
    Things
  </div>
  12345
</div>

现在到了最有趣的部分！我们希望 的背景与 上指定的.title-block一致，这样我们就可以使用 了！我们还希望根据我们的模型将 的文本设置为白色，所以让我们也添加它。（如果你发现了这里的问题，就别剧透了！）color.badgebackground: currentColor.title-blockcolor: white

.title-block {
  display: inline-block;
  padding: 0.5rem;
  background: currentColor;
  color: white;
}

太棒了！我们来看看效果如何：

啊。好吧。这根本不是我们想要的。标题栏好像不见了……或者说，它完全是白色的。这是为什么呢？

嗯，事情是这样的：CSS 是一种声明式语言，而不是命令式语言：它不是自上而下运行，并在运行过程中保持和更新状态。这意味着当我们这样写的时候：

.something {
  background: currentColor;
  color: white;
}

浏览器无法识别currentColor的值，因此设置color: white。相反，设置 的color: white值也会改变currentColor背景的 值！这是你需要牢记white的 限制。currentColor

这个问题很容易解决，虽然有点烦人。我们只需要再嵌套一层规则即可color: white。CSS 规则通常向下继承到子元素，但不会向上继承到父元素，所以这个方法允许从.title-block继承它的currentColor值.badge，同时能够在color其子元素内部更改 。

<div class="badge">
  <div class="title-block">
    <span class="title-block-text">
      Things
    </span>
  </div>
  12345
</div>

.title-block {
  display: inline-block;
  padding: 0.5rem;
  background: currentColor;
}
.title-block-text {
  color: white;
}

现在让我们再看一下：

完美的！

现在我们已经有了组件，我们需要做的就是重复几次并为每个实例定义一个颜色覆盖类。

<div class="error badge">
  <div class="title-block">
    <span class="title-block-text">
      Errors
    </span>
  </div>
  123
</div>

<div class="warning badge">
  <div class="title-block">
    <span class="title-block-text">
      Warnings
    </span>
  </div>
  45
</div>

<div class="success badge">
  <div class="title-block">
    <span class="title-block-text">
      Successes
    </span>
  </div>
  12345
</div>

.error {
  color: red;
}
.warning {
  color: goldenrod;
}
.success {
  color: green;
}

太棒了！我们满足了要求！

这个小徽章组件非常实用；还有更多功能可以发挥。我们可以尝试不同的颜色，在标题区域添加表情符号，在计数器区域添加背景颜色……可能性多多！

您还能想到什么？

结论

总结一下：CSS 中有一个很酷、被低估的关键字，currentColor它可以在某些用例中用作某种变量。它比 CSS 自定义属性（又称 CSS 变量）的支持范围更广，而且在开发可复用组件时使用起来可能更直观，因为你只需要设置color属性来填充它的值，这感觉很棒。

然而， 显然currentColor存在局限性。与自定义属性相比，最明显的一点是它只是一个颜色值，因此不能用于存储长度值、图片 URL 或花哨的渐变。另一个需要注意的要点是，您不能color在 中使用继承的值currentColor（例如背景或边框颜色），同时color在同一块中为文本设置您自己的值；设置color会更新该块内所有 的值currentColor。您需要引入一个子元素来将color值保存在新的作用域中。

简而言之，它有一些限制和注意事项，但我个人认为currentColor它非常有用，并且让我在一些棘手的情况下写出更简洁的代码。我最喜欢的功能就是能够color在组件的根元素上设置并查看整个更新。试试看，看看你能用它做什么！