understanding css inherited currentColor

Question

I was curious about currentColor and how it behaves when it is inherited and/or used in other properties. Another aspect is omitting a color value in the border-property for example which should default to the text-color.

.outer {
	color: #f90;
	border: 5px solid;
	box-shadow: 0 0 15px;
	text-shadow: 2px 2px 3px;
}

<div class="outer">
	Outer Div
</div>

Nothing fancy in the above Snippet.
The shadows and the border is the same Color as the Text.

Now lets inherit the color:

.outer {
    color: #f90;
    border: 5px solid;
    box-shadow: 0 0 15px;
    text-shadow: 2px 2px 3px;
}

	
	.inner {
	    color: lime;
	    display: inline-block;
	    border: inherit;
	    box-shadow: inherit;	    
	}

<div class="outer">
	Outer Div
	<div class="inner">
		Inner Div no CurrentColor
	</div>
</div>

Resutls:

In IE11 & Chrome 43 only the Text-Color is lime.
In Firefox 38 on the other hand the shadows are green too. (Note not the border)

When actively setting everything to currentColor the Browsers are showing the same result by displaying only the text in lime and everything else in orange. (As you can see in the final snippet at the bottom)

/**
 * playing with currentColor
 */
body {background: darkgray;} /* friendly wink */ 
.outer {
	width: 85%;
	color: #f90;
	border: 5px solid;
	box-shadow: 0 0 15px;
	text-shadow: 2px 2px 3px;
	padding: 15px; margin: 15px;
}
.outer.currentColor {
	border: 5px solid;
	box-shadow: 0 0 15px currentColor;
	text-shadow: 2px 2px 3px currentColor;
}
	
	.inner {
	    color: lime;
	    display: inline-block;
	    border: inherit;
	    box-shadow: inherit;	    
	}
	.inner.resetting {
		border-color: currentColor;
		/* text-shadow-color: currentColor; /* does not exist */
		/* box-shadow-color: currentColor; /* does not exist */
	}

<div class="outer">
	Outer Div
	<div class="inner">
		Inner Div no CurrentColor
	</div>
</div>

<div class="outer currentColor">
	Outer Div	
	<div class="inner">
		Inner Div with CurrentColor	
	</div>
	<div class="inner resetting">
		Inner Div with CurrentColor
	</div>
</div>

Questions:

Why is there a difference with the border in Firefox when omitting currentColor
Why does inherit not use the color value on the same element?
Is there a way to use the same properties and switching the color? (for border-color there is as you can see in the example by resetting it)

Here is also a dabblet link if you want to play around with it:
http://dabblet.com/gist/587ea745c7cda7a906ee

It's a bug: w3.org/Style/CSS/Tracker/issues/222?changelog and I don't know the reason why this issue is closed. — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Mar 26, 2015 at 8:54

BoltClock · Accepted Answer · 2015-03-26 15:12:49Z

7

So, a few things here:

The CSS Working Group agreed to change the meaning of currentColor between CSS Color level 3 and CSS Color level 4. In level 3, it is resolved at computed value time and the computed value is inherited; in level 4, the keyword currentColor is inherited as a computed value and it is resolved at used value time.

There were a number of reasons to make this change, though I can't find the minutes, and I've forgotten all the details. (I could find minutes at https://lists.w3.org/Archives/Public/www-style/2014Feb/0052.html discussing the change after the fact.) It makes things worse for transitions/animations, but better in a number of other cases. It slightly increases implementation complexity, but improves performance (at least in Gecko).

I think most implementations have not yet had a chance to update to the new rules in Level 4. Gecko certainly has not, though it's on my list of things to do (but not at the top).
Firefox has, for a long time (since well before currentColor existed) implemented a special internal value as the initial value of border-*-color and outline-color. (We also do the same for text-decoration-color, but haven't done so since 1998/1999.) This works like the level 4 currentColor does, so once we switch our implementation we can unify the two things, but we couldn't switch our implementation with the level 3 currentColor, since it would have been a significant performance and memory hit given that it was the initial value of the property. (Really, unifying our implementation means doing the same work that we've done for those properties for every other property that takes a color value.)
text-shadow and box-shadow, when the color is omitted, have explicitly specified the behavior for when the color is omitted as being equivalent to the way level 4 defines currentColor, even before currentColor worked that way: see the definition of box-shadow (the definition of text-shadow just points to box-shadow).

edited Mar 26, 2015 at 15:12

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Mar 26, 2015 at 15:03

David Baron

9154 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

Closest I could find was lists.w3.org/Archives/Public/www-style/2013Jan/0080.html but it discusses level 3 errata rather than the level 4 change. I don't think level 4 was published yet at the time.

Type-Style Over a year ago

Firefox recently implemeted this in a new way. So Chrome and Firefox are aligned.

casraf · Accepted Answer · 2015-03-26 11:52:38Z

3

Why is there a difference with the border in Firefox when omitting currentColor

CSS's specifications for inheriting on text-shadow say it should inherit the .inner currentColor if it itself is set to inherit, but box-shadow is unspecified and looks like browsers are inconsistent on the implementation. Possible bug.

Why does inherit not use the color value on the same element?

It appears to inherit the computed value and not the inputted one. Example:

.outer {
    color:red;
    box-shadow: 2px 2px 2px; /* color omitted */
}
.inner {
    box-shadow: inherit;
 /* translates to:
    box-shadow: 2px 2px 2px red; */
}

Like I said, it's faulty implementation.

Is there a way to use the same properties and switching the color? (for border-color there is as you can see in the example by resetting it)

How about explicitly duplicating instead of inheriting? This would give you the best result without resulting to SASS/LESS, imo.

.outer {
    color: #f90;
}

.outer, .inner {
    border: 5px solid;
    box-shadow: 0 0 15px;
    text-shadow: 2px 2px 3px;
}
	
.inner {
    color: lime;    
    display: inline-block;
}

<div class="outer">
	Outer Div
	<div class="inner">
		Inner Div no CurrentColor
	</div>
</div>

edited Mar 26, 2015 at 11:52

answered Mar 26, 2015 at 8:42

casraf

21.8k10 gold badges60 silver badges93 bronze badges

2 Comments

Markai Over a year ago

Absolutely right, but not really an answer to his questions I think

Type-Style Over a year ago

This is a great workaround. But @Markai got it right. ;-) (Thanks for the upvote)

Collectives™ on Stack Overflow

understanding css inherited currentColor

Now lets inherit the color:

Resutls:

Questions:

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Now lets inherit the color:

Resutls:

Questions:

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related