currentColor
.currentColor
?currentColor
?I am using the CSS colour keyword currentColor
in a project. Using it rather profusely, I might add. For example:
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 contrastingcolor
assigned to it. When the slide changes, it updates the Site Header to inform it of the new contrast. The Site Header'scolor
is swapped accordingly and anything with theinherit
orcurrentColor
keyword gets updated, such as an<svg>
'sfill
, someborder-color
s, and somebackground-color
s.
Another, simpler, example:
I have various colour palettes that I apply as a class name (e.g.,
bg--emerald
orbg--blue
) onto boxes. The contents of these boxes can be links or buttons or just text. WithcurrentColor
applied to button borders, for instance, the CSS becomes quite simple because I just need to set thecolor
property for each colour scheme. No need to update each affected child node.
All this is very slick.
Support is superb under Firefox, Chrome, Opera, Internet Explorer 9+, and their "mobile" equivalents. Unfortunately, Apple Webkit (iOS Safari and OSX Safari) is suffering from poor and erratic support. It doesn't work everywhere, nor all the time—even in the simplest of examples—nor does it repaint very well or consistently when needed.
I've done some searching and haven't found many people using this practical CSS keyword and ergo no existing means to feature-detect it or polyfill it. I don't know how I would go about making a Modernizr test for this feature. Especially to detect partial-support like I'd need for Apple Webkit.
I'm probably just going to browser-detect it at the moment until I can think of a solution or stumble upon someone with the smarts that can think of a solution faster than me.
I've modified the fiddle (linked above) to grossly replicate the issues I'm having. What I've noticed is it's like currentColor
gets locked with the initially inherited value ("red") and carries it along when applied to everything else. For example, if you switch :nth-child(1)
's color
to something else that new value gets applied to all following elements using currentColor
.
Something in Safari 6 and up got borked. Since this is such an underrated feature, nobody noticed.
This is one of the issue I've faced recently. border-color inherit the same color as font by default so The solution is not to use currentColor at all. Try breaking down border properties. for e.g.
border : 1px solid currentColor
to
border-width : 1px;
border-style : solid;
I've made a little fiddle for you http://jsfiddle.net/6of25jw8/
If you are setting via js then you can make a simple hack.
You need to force safari to redraw the dom elements. You can simply hide all the elements (parent and children) and show them. this will make the children to have the intended colors set.
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]);
}
}
}
This forces safari to redraw div so that the color will be set correctly as currentColor.
but this will not reflect in psuedo elements like :after
http://codepen.io/PrasannaRkv/pen/QyjZZg
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With