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

Answer 1

So, a few things here:

1. 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).

2. 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.)

3. 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).

Answer 2

• 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>