Browser support for text-shadow spread value

Question

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?

Bibliopegy

i really have no idea why the compass code generates the value x4 but the right syntax is "text-shadow: 1px 1px 0px #fff;" with the color on end and no comma-separated duplicating – Brough

Answer 1

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.

Narine

The spread value can be specified by using the mixin: single-text-shadow instead. – Headstand

Yes, single-text-shadow accepts spread value, but unfortunately browsers won't render it, unless not anymore. I don't remember if browsers ever rendered it, by the way. Stills the question: Why compass has it in documentation? – Vaudois

Answer 2

It's not ideal, but since text-shadow accepts a comma separated list of values, you can "stack" text-shadows on top of each other to get a more opaque outcome.

text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white;

Capital

Answer 3

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.

Headstand

This is not working either. Just tried with last compass-rails and Chrome 23.0.1271.101. It generates 2 lines of css code. 1st) text-shadow: 0 3px 0 red, 0 3px 0 3px red; ... and 2nd text-shadow: 0 3px 0 3px red, 0 3px 0 3px red;. All 4 parameters are on compiled declarations. Maybe is this a spec issue? – Vaudois