如何使文本阴影和box-shadow使用所有浏览器上的文本颜色？ [英] How do I make text-shadow and box-shadow use the text color on all browsers?

问题描述

我正在尝试为一个包含与其文本颜色相同的阴影的框创建样式。因为我有几个盒子，每个都有不同的文字颜色，我想避免在每个盒子的每个单独的规则组中重复相同的颜色。

背景和边框模块状态，对于 shadow （这也适用于 text-shadow ）：

 < shadow& = inset？ &&& [< length> {2,4}&& < color> ;? ] 
  

每个< shadow> 解释如下：

• ...



• p>颜色是阴影的颜色。 ¹

如果颜色不存在，

这意味着如果您不在给定元素上指定阴影颜色，则所使用的阴影颜色必须取自为该元素计算的文本颜色。这类似于与没有显式颜色的边框相关联的行为，其可以追溯到 CSS1 ，并在 CSS2 中保持不变。

然而，我知道阴影并不总是这样 - 以前（到2011年晚期），选择的颜色留给浏览器在文本模块和B& B模块中决定。事实上，我记得，过去的测试表明，一些浏览器选择了 black ，而其他浏览器选择了 transparent 阴影样式完全）。这可能在 text-shadow 和 box-shadow 之间有所不同。当然，这是可以理解的，因为如前所述，浏览器选择的任何颜色在当时都是很好的。

但是现在的定义已经明确，最新版本的所有浏览器都反映了变化，还有什么我可以做，使老版本符合吗？我知道我可以多次指定颜色 - 一次为文本，一次为每个阴影 - 但就像我说我想避免，如果可能的话。

---

¹ _{请注意，在2012年中期的WD，这是本文的最新版本，同一部分中的早期语句与这里引用的语句是标准的;请参阅此邮寄名单主题和 ED ，此处已修复。}

$ CSS1和CSS2中描述的行为已在颜色级别3中扩展，其中包含

/ TR css3-color /＃currentcolorrel =nofollow noreferrer> currentColor 关键字值，基本上意味着 color 用于此元素，并且可以在接受颜色值的任何位置使用。正如你所期望的，这已经被转换成 border-color propdef作为其初始值，如B& B模块中所示，此处。

由于几乎支持 box-shadow 和 text-shadow 的每个浏览器也支持 currentColor ，你应该能够指定为阴影颜色：

  shadow：0 0 0.5em currentColor; 
 box-shadow：0 0 0.5em currentColor; 
  

这显式地指示浏览器使用与文本相同的颜色，否则，以某种方式规范化跨浏览器的行为。 互动式小提琴。

不幸的是，对于某些真正顽固的浏览器，像一些WebKit浏览器的某些版本，问题不在于事实，他们不使用 currentColor ，但事实，他们不实现 currentColor 正确使用这些属性。这意味着即使你尝试显式地设置颜色值，它仍然不会工作，因为这是他们已经做了 - 他们只是不正确地做。

具体来说，Safari已知不支持 currentColor 直到版本4，但由于我不能理解，Safari 5.x无法正确应用上述声明，尽管能够应用像 background-color：currentColor 很好。我相信这是固定的Safari 6.x和更高版本，但自从6.x和以后应用声明没有正确的颜色组件 ，他们甚至不需要这个解决方法。

通过 currentColor 显式地 解决Firefox中的一个奇怪的错误，阻止它动画， code> text-shadow 或 box-shadow 没有颜色成分的值 - 在上面链接的交互式小提琴中，如果您更改 div：not（：hover）规则或 div：hover / code>从阴影声明，那个阴影不会在Firefox中进行动画。

如果你绝对需要支持旧版本的WebKit浏览器，别无选择，只能硬编码所需的颜色。但考虑这些浏览器更新频率和速度，无论如何，你可能更好地担心旧版本的IE。请注意，IE9没有麻烦支持没有颜色组件的 box-shadow ，同样对于 text-shadow ，所以IE不需要这个解决方法。 震惊和敬畏。

I'm trying to create a style for a box with a shadow that's the same color as its text. Because I have several boxes, each with a different text color, I'd like to avoid having to repeat the same color in each individual ruleset for every box.

Now, the Backgrounds and Borders module states, for box-shadow (which also applies to text-shadow):

Where

<shadow> = inset? && [ <length>{2,4} && <color>? ]

The components of each <shadow> are interpreted as follows:

• ...

• The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.¹

This means that if you don't specify a shadow color on a given element, then the shadow color that's used must be taken from the text color that's computed for that element. This is similar to the behavior associated with borders without an explicit color, that dates all the way back to CSS1 and remains unchanged in CSS2.

However, I'm aware that this was not always the case for shadows — previously (as late as 2011!) the color chosen was left up to the browser to decide in both the Text module and the B&B module. And indeed, testing in the past, I recall, showed that some browsers chose black and others chose transparent (or ignored the shadow style completely). This might even have varied between text-shadow and box-shadow. Of course, this is understandable because as mentioned, any color the browser chose would have been fine at the time.

But now that the definition has been made explicit, with the latest versions of all browsers having reflected the change as well, is there anything I can do to make the older versions follow suit? I know I can just specify the color multiple times — once for the text and once for each shadow — but like I said I'd like to avoid that if possible.

---

¹ _{Note that in the mid-2012 WD, which is the latest as of this writing, an earlier statement in the same section contradicts the one quoted here, however the statement quoted here is the canonical one; see this mailing list thread and the ED where this has been fixed.}

解决方案

The behavior described in CSS1 and CSS2 has been extended in Color level 3 with a currentColor keyword value, which basically means "the computed value of color for this element" and can be used anywhere a color value is accepted. As you might expect, this has been retconned into the border-color propdef as its initial value, as seen in the B&B module, here.

Since almost every browser that supports box-shadow and text-shadow also supports currentColor, you should be able to just specify that as the shadow color:

text-shadow: 0 0 0.5em currentColor;
box-shadow: 0 0 0.5em currentColor;

This explicitly instructs the browser to use the same color as the text, and not whatever it was programmed to use otherwise, in a way normalizing the behavior across browsers. Interactive fiddle.

Unfortunately, for some really stubborn browsers, like certain versions of some WebKit browsers, the problem lies not in the fact that they do not use currentColor, but the fact that they do not implement currentColor with these properties correctly. This means even if you do try to set the color value explicitly, it still won't work, because that's what they already do — they just aren't doing it correctly.

Specifically, Safari is known to have no support for currentColor whatsoever until version 4, but for reasons I cannot comprehend, Safari 5.x fails to apply the above declarations correctly, despite being able to apply something like background-color: currentColor just fine. I believe this is fixed in Safari 6.x and later, but since 6.x and later apply declarations without the color component correctly anyway, they don't even need this workaround.

Passing currentColor explicitly does work around a strange bug in Firefox that prevents it from animating to and from text-shadow or box-shadow values without a color component — in the interactive fiddle linked above, if you change either the div:not(:hover) rule or the div:hover rule to remove currentColor from either shadow declaration, that shadow won't animate in Firefox.

If you absolutely need to support old versions of WebKit browsers, you'll have no choice but to hardcode the desired color. But considering how frequently and rapidly those browsers update themselves anyway, you're probably better off worrying about old versions of IE instead. Note however that IE9 has no trouble supporting box-shadow without the color component, and likewise for IE10 with text-shadow, so IE does not require this workaround at all. Shock and awe.

这篇关于如何使文本阴影和box-shadow使用所有浏览器上的文本颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！