当讨论“CSS 的未来”时,CSS 变量始终是一个热门话题。 它们实际上 即将 本机化,但在生产中使用它们(不使用 CSS 预处理器 框架)还有很长的路要走。 但是,现在确实有一个功能具有一定的浏览器支持,它具有 CSS 变量的感觉,那就是 currentColor
值。
它是这样工作的
div {
color: red;
border: 5px solid currentcolor;
box-shadow: 0 0 5px solid currentcolor;
}
我是在 2011 年 SXSW 上的 CSS3 讨论会上了解到这一点的,与会者有 Stephanie 和 Greg Rewis、Estelle Weyl 以及 Christopher Schmitt。 在谷歌上搜索后,我找到了 Divya Manian 的文章,她写道
[…] 您可以使用此值来指示您想要使用颜色值以应用于接受颜色值的其它属性:边框、框阴影、轮廓或背景。
此值最初于 2009 年由 Opera 支持,此后,Firefox 3.5+、Chrome 1+ 和 Safari 4+ 也开始支持。
这是 规范 和 Can I Use 信息。
它将遵循层叠样式表
body { color: red; }
div { border: 5px solid currentcolor; }
您无法欺骗它。
假设您想利用它的变量特性,但随后重置实际文本的颜色……这将不起作用
div {
color: red;
border: 5px solid currentcolor;
box-shadow: 0 0 5px currentcolor;
color: black;
}
所有内容都将变成黑色。
用例

Chris:您是否知道这与根本不指定边框的颜色值(如下所示)有任何不同? 我已经这样做了很长时间了,并没有真正去思考它——它就是起作用了。
body { color: red; }
div { border: 5px solid; }
正如您所知,它仍然有效。 只是没有办法明确声明这种行为,我认为 currentColor 是对这种行为的一种回应。
是的,如果您查看 这篇文章 中的评论,人们会提到许多会从 color 属性“继承”颜色的元素。 基本上,任何前景元素都会这样做,包括边框、文本、列表标记、图像的 alt 文本(如果图像不存在),甚至 HR 元素也会从 color 属性获取值。 我原本以为它也会影响画布上绘制的元素,但我认为这是我的假设有点过分了。 :)
这基本上似乎就是 currentColor 的工作原理,正如 Chris 所提到的——是对这种已经存在的行为的一种“回应”。 所以现在我想它不仅限于前景元素,而是任何接受颜色值的元素。
Chris,
您在工作中使用预处理器框架吗? 如果没有,为什么不使用?
-Theo
是的,我也很想了解这一点:D 我一直在考虑最近开始使用 sass 和 compass,但我真的不确定这是否对我来说是一个好选择,所以 Chris,请告诉我们一些关于您对预处理器框架的看法吧。 :)
我不喜欢预处理器框架=\ 从来不享受学习一种新的语法来做本来可以很好地做的事情。
在过去的一年左右的时间里,我一直使用 PHP 来渲染我的 CSS,然后在准备上线时将生成的源代码复制粘贴到 style.css 文件中。
我找到了这篇描述此过程的不错文章。 但我可以利用我已经知道的脚本语言(PHP),并且可以创建自己的函数来使用任何数量的参数来生成我的 CSS。 这样更具自定义性,限制更少。
http://www.impressivewebs.com/dynamic-css3/
请记住,我在已发布的源代码中不使用它,因为它需要重写标题,而一些主机服务器不喜欢这样做。 所以请将此技术保留在本地开发服务器上。
干杯 :)
– Brandtley
我还没有在大多数工作中使用它们。 还有很多原因……我想我应该写一篇关于这个的文章。 一些初步想法
– 我不觉得我会节省那么多时间,或者解决我无法解决的问题
– 很难将其纳入我的一些团队工作流程中
不过,我并不想表达消极情绪,因为我真的很喜欢这种语法,如果 CSS 本身就是这样的,那将是一个巨大的改进。
@Chris:我看到一个很好的下个月的民意调查问题 :-)
“您在进行 CSS 工作时使用预处理器框架吗?”
– 是的,一直都使用
– 是的,偶尔会使用
– 不,我选择不使用
– 什么是 CSS 的 *什么* ?
我一直使用 StaticMatic 来生成内容等等,它真的很适合快速原型设计。 就像大多数事物一样——有优点也有缺点——但我要说的是,我有一个非常实用的 _base.sass SASS 混合集合。(随意拿走吧:https://github.com/andrewdc/hidden_rebel_base)
总的来说——我对 SASS、Compass、Staticmatic 等等的体验非常积极。 这可能是因为我构建的大多数复杂的东西都是独立的,然后集成到网站中,……所以这种工作流程可能不适合所有人。
正如 Chris 所提到的——在基于团队的工作流程中——直接使用框架可能会很乱,如果您有多位设计师,有些人使用它,而有些人没有使用。
我在我的 Rails 应用程序中广泛使用 SASS 和 Compass。 它们真的有助于使您的标记更具语义性,因为您可以将常见的策略直接注入到每个 CSS 声明中,而不必诉诸名为“rounded”的类,例如。
但是,我是一名开发人员而不是设计师,所以这可能与它对我的吸引力有关。
顺便说一句,SASS 中的 SCSS 格式使用与普通 CSS 相同的语法,只是您可以包含函数和嵌套声明。
它在我的 Chrome 10 上运行良好 http://jsfiddle.net/laukstein/2ysAr/6/
适用于边框,但不适用于 -webkit-box-shadow (http://jsfiddle.net/n8chy/)——我认为这意味着它没有实现,因为边框颜色行为在 currentColor 出现之前就存在了。
是的,它适用于边框和所有不指定颜色以前默认为当前颜色的元素:http://jsfiddle.net/2ysAr/show/,它适用于所有浏览器。 我不认为 box-shadow 的默认值是当前颜色,而是一个 用户代理选择的颜色。 所以这将不适用。
您正在寻找的用例=编写一篇关于 currentColor 的古怪 CSS-Tricks 文章 :)
Meh,如果我非常需要它们,我直接使用 PHP 作为变量,这很容易、无痛,而且不必担心支持。
确实如此。 我们使用 PHP 来创建动态 JavaScript 的方式,它也同样适用于 CSS
哇!CSS太难懂了.. 我是新手 :(
请注意,它由 IE9+ 支持。