cross-browser - 如何让 text-shadow 和 box-shadow 在所有浏览器上使用文本颜色?

标签 cross-browser css

我正在尝试为一个带有与其文本颜色相同的阴影的框创建样式。因为我有几个框,每个框都有不同的文本颜色,所以我想避免在每个框的每个单独规则集中重复相同的颜色。

现在,背景和边框模块状态为 box-shadow (这也适用于 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.1

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

但是,我知道阴影的情况并非总是如此 — 以前(迟至 2011 年!)选择的颜色由浏览器在文本模块和 B&B 模块中决定。事实上,我记得过去的测试表明,一些浏览器选择了 black其他人选择了transparent (或完全忽略阴影样式)。这甚至可能在 text-shadow 之间变化和 box-shadow .当然,这是可以理解的,因为如前所述,当时浏览器选择的任何颜色都可以。

但现在定义已经明确,所有浏览器的最新版本也反射(reflect)了变化,我能做些什么来让旧版本效仿吗?我知道我可以多次指定颜色——一次为文本,一次为每个阴影——但正如我所说,我想尽可能避免这种情况。


1 请注意,在撰写本文时最新的 2012 年年中 WD 中,同一部分中较早的声明与此处引用的声明相矛盾,但是此处引用的声明是规范的;见this mailing list threadED这已被修复。

最佳答案

CSS1 和 CSS2 中描述的行为已在颜色级别 3 中扩展为 currentColor keyword value ,这基本上意味着“该元素的 color 的计算值”,可以在接受颜色值的任何地方使用。如您所料,这已作为其初始值重新连接到 border-color propdef 中,如 B&B 模块中所示,here .

因为几乎每个支持 box-shadowtext-shadow 的浏览器也支持 currentColor,你应该能够将它指定为阴影颜色:

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

这明确指示浏览器使用与文本相同的颜色,而不是编程使用的任何其他颜色,以某种方式 normalizing跨浏览器的行为。 Interactive fiddle.

不幸的是,对于一些非常固执的浏览器,比如某些 WebKit 浏览器的某些版本,问题不在于它们不使用 currentColor,而在于 它们不使用这些属性正确实现 currentColor。这意味着即使您确实尝试明确设置颜色值,它仍然不会起作用,因为他们已经这样做了——他们只是做得不正确。

具体来说,已知 Safari 在第 4 版之前不支持 currentColor,但由于我无法理解的原因,Safari 5.x 无法正确应用上述声明,尽管能够应用像 background-color: currentColor 这样的东西就好了。我相信这在 Safari 6.x 及更高版本中已修复,但由于 6.x 及更高版本应用了没有颜色组件的声明无论如何,它们甚至不需要此解决方法。

显式传递 currentColor确实解决了 Firefox 中的一个奇怪错误,该错误阻止它在 text-shadow 之间进行动画处理没有颜色分量的 box-shadow 值 — 在上面链接的交互式 fiddle 中,如果您更改 div:not(:hover) 规则或 div:hover 规则从任一影子声明中删除 currentColor,该影子不会在 Firefox 中设置动画。

如果您绝对需要支持旧版本的 WebKit 浏览器,您别无选择,只能硬编码所需的颜色。但是考虑到这些浏览器无论如何都会更新自己的频率和速度,您最好还是担心 IE 的旧版本。但是请注意,IE9 可以在没有颜色组件的情况下支持 box-shadow,对于具有 text-shadow 的 IE10 也是如此,因此 IE 根本不需要此解决方法。 Shock and awe.

关于cross-browser - 如何让 text-shadow 和 box-shadow 在所有浏览器上使用文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16560018/

相关文章:

css - 如何在具有不同 li 类的 ul-li 列表中获取特定类的最后一个 li

html - 没有位置 :absolute 没有内容时底部的默认页脚

javascript - NativeScript Vue - Material 设计图标未显示

css - 如何为伪元素制作悬停效果?

javascript - 以编程方式测试特定的 css 属性兼容性(调整文本区域的大小支持)

html - 如何检测浏览器中的 HTML 5 兼容性

css - 在 Firefox 中旋转 SVG CSS 动画不起作用,需要 SVG 回退

html - 如何覆盖 content css 属性以不在 IE8 上使用它?

javascript - jquery优雅降级ie5.5

css - 一组两个元素到 'add' 到我的文本区域不与页面对齐