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

Question

长话短说

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

全文

我正在使用 CSS 颜色关键字 currentColor 在一个元素中。我可能会补充说，大量使用它。例如:

I'm using it on a Site Header component that floats over a full-viewport Carousel.

Each slide has a varying background-color and a contrasting color assigned to it. When the slide changes, it updates the Site Header to inform it of the new contrast. The Site Header's color is swapped accordingly and anything with the inherit or currentColor keyword gets updated, such as an <svg>'s fill, some border-colors, and some background-colors.

另一个更简单的例子:

I have various colour palettes that I apply as a class name (e.g., bg--emerald or bg--blue) onto boxes. The contents of these boxes can be links or buttons or just text. With currentColor applied to button borders, for instance, the CSS becomes quite simple because I just need to set the color property for each colour scheme. No need to update each affected child node.

这一切都非常圆滑。

在 Firefox、Chrome、Opera、Internet Explorer 9+ 及其“移动”等价物下的支持非常出色。不幸的是，Apple Webkit(iOS Safari 和 OSX Safari)受到糟糕且不稳定的支持。它不是在所有地方都有效，也不是在所有时间都有效——即使是在最简单的例子中——也不是在需要时很好地或一致地重新绘制。

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

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

JSFiddle

我已经修改了 fiddle (上面链接)以粗略地复制我遇到的问题。我注意到它就像 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;

我为你做了一个 fiddle http://jsfiddle.net/6of25jw8/