css - How do I make text-shadow and box-shadow use the text color on all browsers? -

i'm trying create style box shadow that's same color text. because have several boxes, each different text color, i'd avoid having repeat same color in each individual ruleset every box.

now, backgrounds , borders module states, box-shadow (which applies text-shadow):

where

<shadow> = inset? && [ <length>{2,4} && <color>? ] 

the components of each <shadow> interpreted follows:

• ...

• the color color of shadow. if color absent, used color taken ‘color’ property.¹

this means if don't specify shadow color on given element, shadow color that's used must taken text color that's computed element. similar behavior associated borders without explicit color, dates way css1 , remains unchanged in css2.

however, i'm aware not case shadows — (as late 2011!) color chosen left browser decide in both text module , b&b module. , indeed, testing in past, recall, showed browsers chose black , others chose transparent (or ignored shadow style completely). might have varied between text-shadow , box-shadow. of course, understandable because mentioned, color browser chose have been fine @ time.

but definition has been made explicit, latest versions of browsers having reflected change well, there can make older versions follow suit? know can specify color multiple times — once text , once each shadow — said i'd avoid if possible.

---

¹ _{note in mid-2012 wd, latest of writing, earlier statement in same section contradicts 1 quoted here, statement quoted here canonical one; see this mailing list thread , ed has been fixed.}

the behavior described in css1 , css2 has been extended in color level 3 currentcolor keyword value, means "the computed value of color element" , can used anywhere color value accepted. might expect, has been retconned border-color propdef initial value, seen in b&b module, here.

since every browser supports box-shadow , text-shadow supports currentcolor, should able specify shadow color:

text-shadow: 0 0 0.5em currentcolor; box-shadow: 0 0 0.5em currentcolor; 

this explicitly instructs browser use same color text, , not whatever programmed use otherwise, in way normalizing behavior across browsers. interactive fiddle.

unfortunately, stubborn browsers, versions of webkit browsers, problem lies not in fact not use currentcolor, fact they not implement currentcolor these properties correctly. means if try set color value explicitly, still won't work, because that's — aren't doing correctly.

specifically, safari known have no support currentcolor whatsoever until version 4, reasons cannot comprehend, safari 5.x fails apply above declarations correctly, despite being able apply background-color: currentcolor fine. believe fixed in safari 6.x , later, since 6.x , later apply declarations without color component correctly anyway, don't need workaround.

passing currentcolor explicitly does work around strange bug in firefox prevents animating , text-shadow or box-shadow values without color component — in interactive fiddle linked above, if change either div:not(:hover) rule or div:hover rule remove currentcolor either shadow declaration, shadow won't animate in firefox.

if absolutely need support old versions of webkit browsers, you'll have no choice hardcode desired color. considering how , rapidly browsers update anyway, you're better off worrying old versions of ie instead. note ie9 has no trouble supporting box-shadow without color component, , likewise ie10 text-shadow, ie not require workaround @ all. shock , awe.