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

Question

TL; DR

1. 这是一个小提琴(谢谢@NicoO):在Safari中,初始的"红色"颜色应用于所有其他实例currentColor.
2. 我如何用CSS修复继承问题currentColor？
3. 或者我如何才能检测CSS颜色关键字的支持currentColor？
4. 我还需要检测部分支持.例如,Apple Webkit在大多数情况下使用不稳定.

全文

我currentColor在项目中使用CSS color关键字.使用它相当丰富,我可能会补充说.例如:

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

每张幻灯片都有一个变化background-color和对比color分配给它.当幻灯片更改时,它会更新站点标题以通知新的对比度.Site Header color会相应地进行交换,并且任何带有inherit or currentColor关键字的内容都会更新,例如,<svg>s fill,some border-color和background-colors.

另一个更简单的例子:

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

这一切都很光滑.

在Firefox,Chrome,Opera,Internet Explorer 9+及其"移动"等价物下,支持非常出色.不幸的是,Apple Webkit(iOS Safari和OSX Safari)遭受了糟糕和不稳定的支持.它不是在任何地方都有效,也不是所有的时间 - 即使是在最简单的例子中 - 也不是在需要时非常好地或一致地重新绘制.

我已经做了一些搜索,并没有找到很多人使用这个实用的CSS关键字,并且没有现有的功能 - 检测它或polyfill它.我不知道如何为此功能进行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及其中的东西被搞砸了.由于这是一个被低估的特征,没有人注意到.

Answer 1

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

border : 1px solid currentColor 

至

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

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

Answer 2

看起来它的行为似乎完全符合其应有的样子。

\n\n

\n

如果在 {color} 属性本身上设置了 {currentColor} 关键字，则将其视为 {color:inherit}。4.4. \xe2\x80\x98currentColor\xe2\x80\x99 颜色关键字

\n

\n\n

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

\n\n

div:nth-child(1){\ncolor: red;\n} \n

\n\n

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

\n\n

div {\nmargin: 1em;\nborder: 1px solid currentColor;\nbox-shadow: 2px 2px 1px currentColor;\npadding: 10px;\n} \n

\n\n

我建议在第一个和第二个元素中首次使用颜色后不要将关键字 {currentColor} 与 div 标签一起使用，看看它如何为您工作。另外，在创建函数时添加颜色后，不需要更新 {border} 和 {box-shadow} 颜色，所以我不明白为什么你真的需要使用关键字来实现你的目标情况。检查下面的小提琴，看看它是否可以解决您的问题。经过一些细微的更改，所有分区都继承了由随机函数设置的个性化颜色，并按设定的间隔进行更改。拉小提琴！我认为对该关键字的使用进行一些调整将消除有限支持检测的需要。

\n