iOS和Safari中CSS‘`currentColor`’关键字的问题

Question

TL;DR

1. 下面是一个小提琴 (谢谢@ currentColor )：在Safari中，最初的“红色”颜色被应用到所有其他currentColor实例中。
2. 如何用CSS解决currentColor的继承问题？
3. 或者如何检测CSS颜色关键字currentColor的支持？
4. 我还需要发现部分支持。例如，Apple在大多数情况下是不稳定的。

完整的故事

我在一个项目中使用CSS颜色关键字currentColor。我可以补充说，它使用得相当多。例如：

我正在使用它在一个站点标题组件上浮动在一个全视口旋转木马上。 每个幻灯片都有一个不同的background-color和一个对比不同的color分配给它。当幻灯片发生变化时，它会更新站点标题以通知它新的对比度。相应地交换站点头的color，使用inherit或currentColor关键字的任何内容都会被更新，例如<svg>的fill、一些border-color和一些background-color的。

另一个简单的例子是：

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

这一切都很巧妙。

在火狐、Chrome、Opera、Internet 9+以及它们的“移动”等价物下，支持都是极好的。不幸的是，Apple (iOS Safari和OSX )正遭受着糟糕和不稳定的支持。它并不是随时随地都起作用的--即使是在最简单的例子中--也不是在需要时很好地或一致地重新绘制的。

我已经做了一些搜索，没有发现很多人使用这个实用的CSS关键字，因此没有现有的方法来特征-检测它或多填充它。我不知道如何为这个特性做一个现代化的测试。尤其是为了检测到苹果Webkit需要的部分支持。

我可能只是去浏览器-检测它在此刻，直到我能想到一个解决方案，或偶然发现一个聪明的人，可以想出一个解决方案比我更快。

JSFiddle

我修改了小提琴(链接在上面)，以完全复制我的问题。我注意到的是，这就像currentColor被最初继承的值("red")锁定，并在应用于其他一切时随身携带。例如，如果您将:nth-child(1)的color切换到其他东西，则使用currentColor将新值应用于以下所有元素。

浏览器

坏的

• OSX，Safari 6-7
• iOS 6-7，Safari

作品

• Windows，Safari 5
• iOS 5，Safari

在Safari 6和更高的地方有东西被钻了。因为这是一个被低估的功能，没人注意到。

Answer 1

这是我最近面临的问题之一。边框颜色在默认情况下继承与字体相同的颜色，因此解决方案是根本不使用currentColor。试着分解边框属性。例如：

border : 1px solid currentColor 

至

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

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

Answer 2

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

您需要强制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。

但是，这将不会在psuedo元素中反映，比如：：

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

Answer 3

似乎它的行为完全是它应该做的。

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

在小提琴里你在第一个div标签上附加了颜色..。

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

然后，当您尝试使用{currentColor}添加{currentColor}和{框-阴影}(如下图所示)时，似乎将关键字{currentColor}附加到所有的除法元素中，但{currentColor}和{box-阴影}已被分配为{div:nth-child(1)}中的颜色，并且很可能启动了该除法的所有属性的默认模式{ color :inherit}，并对内容块的结构进行了更改。

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

我建议在第一个和第二个元素开始使用颜色之后，不要在除法标记中使用关键字{currentColor}，看看它是如何为您工作的。此外，在创建函数时添加颜色后，不需要更新{边框}和{框影}颜色，因此我不明白为什么在这种情况下确实需要使用关键字来完成目标。检查下面的小提琴，看看它是否解决了你的问题。通过几个小的变化，所有的分区都继承了一个由随机函数设置的个性化颜色集，并且在设定的时间间隔上发生了变化。小提琴！我认为，对这个关键字的使用做一些调整将消除有限的支持检测的需要。