CSS3 box-shadow property doesn't validate?

Question

When I run my CSS through the W3C's validator, any time I use the box-shadow property, I get an error like this:

0 is not a box-shadow value : 0 0 10px #000

It appears to stop at whatever the first value is, since changing the order of the values will change the error to match:

#000 is not a box-shadow value : #000 0 0 10px

I'm validating with the profile set to CSS3, so it's not a case of me forgetting to change the default profile setting from CSS2 (where the box-shadow property doesn't exist).

Why doesn't it think any of the values I'm using are correct? The shadow will render perfectly fine in Firefox and any other browser that supports the non-prefixed box-shadow property.

Answer 1

It's a known validator bug. Apparently they forgot that unitless values are permitted (especially unitless zero values). There's nothing wrong with your CSS; the values you're using are correct.

If you're picky and you can't put up with the bug tarnishing your otherwise would-have-been successful validation, you can simply add units to your zero values:

box-shadow: 0px 0px 10px #000;

But whenever I run into situations like this, I normally don't bother, knowing that it's a harmless validator bug and not something wrong with my CSS.

Note that as of this update the bug has been fixed since August 30, 2012.

Answer 2

Change it to 0px 0px 10px #000 and it will validate. That's probably because of the beta version of the validator.