iOS 和 Safari 中的 CSS `currentColor` 关键字问题答案

【问题标题】：Issues with CSS `currentColor` keyword in iOS and SafariiOS 和 Safari 中的 CSS `currentColor` 关键字问题
【发布时间】：2014-07-19 02:59:33
【问题描述】：

TL;DR

这是fiddle（谢谢@NicoO）：在 Safari 中，初始的“红色”颜色会应用于 currentColor 的所有其他实例。
如何使用 CSS 解决 currentColor 的继承问题？
或者如何检测对 CSS 颜色关键字 currentColor 的支持？
我还需要检测部分支持。例如，Apple Webkit 在大多数情况下使用不稳定。

全文

我在一个项目中使用 CSS 颜色关键字 currentColor。我可能会补充说，相当大量地使用它。例如：

我在浮动在全视口轮播上的站点标题组件上使用它。

每张幻灯片都有一个不同的background-color 和一个对比鲜明的color 分配给它。当幻灯片更改时，它会更新站点标题以通知它新的对比度。站点标题的color 被相应地交换，任何与inherit 或currentColor 关键字得到更新，例如<svg> 的fill、一些border-colors 和一些background-colors。

另一个更简单的例子：

我有各种调色板作为班级名称应用（例如，bg--emerald 或 bg--blue）到盒子上。这些框的内容可以是链接或按钮，也可以只是文本。例如，将currentColor 应用于按钮边框， CSS 变得非常简单，因为我只需要设置 color 每种配色方案的属性。无需更新每个受影响的子节点。

这一切都非常巧妙。

在 Firefox、Chrome、Opera、Internet Explorer 9+ 及其“移动”等价物下的支持非常出色。不幸的是，Apple Webkit（iOS Safari 和 OSX Safari）的支持很差且不稳定。它并非无处不在，也不是一直有效——即使是在最简单的示例中——也不会在需要时很好地或始终如一地重绘。

我进行了一些搜索，但没有发现很多人使用这个实用的 CSS 关键字，因此没有现有的方法来检测它或填充它。我不知道我将如何为此功能进行 Modernizr 测试。尤其是检测部分支持，比如我需要 Apple Webkit。

我现在可能只是在浏览器中检测它，直到我能想到解决方案或偶然发现比我更快地想到解决方案的聪明人。

JSFiddle

我已经修改了小提琴（上面链接）以大致复制我遇到的问题。我注意到它就像currentColor 被最初继承的值（“红色”）锁定并在应用于其他所有内容时携带它。例如，如果您将:nth-child(1) 的color 切换为其他值，则使用currentColor 将新值应用于所有后续元素。

浏览器

坏了

OSX，Safari 6–7
iOS 6-7，Safari

作品

Windows、Safari 5
iOS 5、Safari

Safari 6 及更高版本中的某些内容被破坏了。由于这是一个被低估的功能，所以没有人注意到。

【问题讨论】：

这个功能我没用过，不过挺有意思的。这是小提琴jsfiddle.net/RDf4m/1。您是否仅在使用 Javascript 更改颜色时遇到问题，或者页面重新加载时的行为是否也不一致？更新：这个小提琴适用于我在 iOS 上的当前 safari。
@NicoO 我更新了小提琴以说明一些问题，这也让我意识到究竟是什么问题，尽管我仍然不明白为什么：jsfiddle.net/RDf4m/2
请注意，边框和框阴影已经默认为currentColor，但setting currentColor explicitly anyway seems to resolve certain issues with non-Safari browsers。
看起来他们刚刚在 Webkit 代码库中修复了你大约 10 个月大的 bug report ——所以感谢 @Chauncey 向他们报告，并希望它能够进入 Safari很快。（可能是 Webkit/Blink 分裂的牺牲品，因为 the equivalent Chromium bug 已于 2013 年 6 月报告并及时修复。）

标签： css safari webkit

【解决方案1】：

这是我最近遇到的问题之一。默认情况下，border-color 继承了与字体相同的颜色，因此解决方案是根本不使用 currentColor。尝试分解边框属性。例如

border : 1px solid currentColor

到

border-width : 1px;
border-style : solid;

我为你做了一个小小提琴 http://jsfiddle.net/6of25jw8/

【讨论】：

【解决方案2】：

如果你是通过 js 设置，那么你可以做一个简单的 hack。

您需要强制 safari 重绘 dom 元素。您可以简单地隐藏所有元素（父元素和子元素）并显示它们。这将使孩子们设置预期的颜色。

var nodeStack =[element];
while (node = nodeStack.pop()) {
    if (node.nodeType == 1) {
        node.style.display="none";
        node.style.display="";
        var i = node.childNodes.length;
        while (i--) {
            nodeStack.push(node.childNodes[i]);
        }
    }
}

这会强制 safari 重绘 div，以便将颜色正确设置为 currentColor。

但这将不会反映在伪元素中，例如 :after

http://codepen.io/PrasannaRkv/pen/QyjZZg

【讨论】：

【解决方案3】：

它似乎可以完全按照它应该的方式行事。

如果在 {color} 属性本身上设置了 {currentColor} 关键字，则将其视为 {color:inherit}。 4.4. ‘currentColor’ color keyword

在小提琴中，您将颜色附加到第一个 div 标记...

div:nth-child(1){
color: red;
}

然后，当您尝试使用 {currentColor} 添加 {border} 和 {box-shadow}（如下所示）但 {border} 和 { box-shadow} 已经在 {div:nth-child(1)} 中分配了颜色，并且可能为分区的所有属性启动了默认模式 {color:inherit} 并创建了内容块结构的更改。

div {
margin: 1em;
border: 1px solid currentColor;
box-shadow: 2px 2px 1px currentColor;
padding: 10px;
}

我建议不要在第一个和第二个元素中初始使用颜色后将关键字 {currentColor} 与除法标记一起使用，看看它对你的作用。此外，{border} 和 {box-shadow} 颜色在您创建函数时添加颜色后不需要更新，所以我不明白为什么在这种情况下您真的需要使用关键字来实现您的目标.检查下面的小提琴，看看它是否能解决您的问题。通过一些小的更改，所有部门都继承了由随机函数设置的个性化颜色，并以设置的间隔进行更改。 fiddle！我认为对该关键字的使用进行一些调整将消除对有限支持检测的需要。

【讨论】：