相关疑难解决方法(0)

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. …