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

时间：2014-05-29 14:46:14

标签： css safari webkit

TL; DR

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

    5. 全文

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

      

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

         

    每张幻灯片都有不同的background-color和分配给它的对比color。   当幻灯片更改时，它会更新站点标题以通知新的对比度。   网站标题的color会相应地进行交换，而inherit的所有内容都会相互交换   或currentColor关键字已更新，例如<svg>的{​​{1}}，某些fill和某些border-color。

    另一个更简单的例子：

      

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

    这一切都非常光滑。

    支持在Firefox，Chrome，Opera，Internet Explorer 9+及其“移动”等价物下非常出色。不幸的是，Apple Webkit（iOS Safari和OSX Safari）遭受了糟糕和不稳定的支持。它无处不在，也不是所有的时间 - 即使在最简单的例子中 - 也不会在需要时非常好地或一致地重复。

    我已经完成了一些搜索工作，并且没有找到很多人使用这个实用的CSS关键字，而且没有现成的功能 - 检测它或将其填充。我不知道如何为此功能进行Modernizr测试。特别是要像Apple Webkit那样检测部分支持。

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

    的jsfiddle

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

    浏览器

    断

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

    作品

    • Windows，Safari 5
    • iOS 5，Safari

    Safari 6及其中的东西被搞砸了。由于这是一个被低估的特征，没有人注意到。

3 个答案:

答案 0 :(得分：5)

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

border : 1px solid currentColor

到

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

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

答案 1 :(得分：3)

如果您通过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

答案 2 :(得分：-1)

好像它的行为应该完全一样。

  

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

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

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

然后当您尝试使用{currentColor}添加{border}和{box-shadow}（如下所示）但是，{border}和{时，您会将关键字{currentColor}附加到所有分割元素box-shadow}已经在{div：nth-​​child（1）}中分配了一种颜色，并且可能为该分区的所有属性启动了默认模式{color：inherit}，并创建了内容块结构的更改。 / p> 

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

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

相关问题
最新问题