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.

Social

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.

Curkell

Wow, you're right! With units on all values, it validates. This is actually a pretty glaring error because it means shadows that use RGBa colors will never validate, since they don't have units. – Social

@daGUY: The rgba() and hsla() colors trigger parse errors with the validator, but it seems unitless values don't have anything to do with it since rgb() and hsl() colors work fine. See this bug report. – Curkell

Funny enough, when using units like 0px 2px 2px #ccc the validator simplifies the statement to 0 2px 2px #ccc as appended to the validation report :) – Hence

Hi, why is this then not validated: .corner Property -webkit-border-radius doesn't exist : 4px – Assay

@Bandpay: Because prefixes aren't valid. Did you really downvote my answer for that? – Curkell

Answer 2

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

Procora

Answer 3

The validator has a lot of bugs. Its new and its on beta stage.

Lax