Browser support for text-shadow spread value


Seen discussions here but it has been 2 years!

I don't know if I'm using this right but I have the following sass/compass code:

+text-shadow(red 0 3px 0 3px)

Generating the following css:

text-shadow: red 0 3px 3px, red 0 3px 0 3px;
text-shadow: red 0 3px 0 3px, red 0 3px 0 3px;

Which not works in neither Chrome/Safari/Firefox/Opera.

Is this something with the declaration or this spread feature was really removed from specs?

Problem courtesy of: Alvaro Lourenço


It says in the specs that,

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. Values are interpreted as for ‘box-shadow’ [CSS3BG]. (But note that spread values are not allowed.) The shadow is applied to all of the element's text as well as any text decorations it specifies.

Solution courtesy of: Pranav 웃


Compass doesn't allow to set the spread value when using the mixin: text-shadow as they said in their documentation:

if any shadow has a spread parameter, this will cause the mixin to emit the shadow declaration twice, first without the spread, then with the spread included. This allows you to progressively enhance the browsers that do support the spread parameter.

Alternatively, you can use the mixin: single-text-shadow then pass all the values including the spread value separated with commas.

single-text-shadow(0, 3px, 0, 3px, red);

That will work as you expected.

Discussion courtesy of: Rubens Mariuzzo

This recipe can be found in it's original form on Stack Over Flow.