CSS Validation - Box Shadow not Validating

[haylo]

My code...
box-shadow: 2px 2px 0px 0px #acacac;

W3C example (http://www.w3.org/TR/css3-background/#the-box-shadow)
Box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4);


OxygenXML error
E [W3C CSS Validator (CSS3)] Context : .myClass in property : box-shadow
0 is not a color value : 2px 2px 0 0 #acacac

It seems to only like 3 values then the colour value.

From the above W3C page

The components of each <shadow> are interpreted as follows:

The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
The third length is a blur radius. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the larger the value, the more the shadow's edge is blurred. See below.
The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract. See below. Note that for inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow's perimeter shape.
The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.
The ‘inset’ keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

Bug?

Thanks

Neil

[sorin_ristache]

Hello,

Yes, the Oxygen CSS validator does not validate correctly the CSS standard property box-shadow in the form that you tried to use, because it does not accept the optional values for spread and color. However the CSS validator accepts the optional values in the Firefox (Mozilla) and Safari (WebKit) variants of the box-shadow property:

Code: Select all

-moz-box-shadow: 2px 2px 0px 0px #acacac;

and

Code: Select all

-webkit-box-shadow: 2px 2px 0px 0px #acacac;

So if you use the Firefox or Safari variant of box-shadow it is accepted by Oxygen's CSS validator. I am not sure if the standard box-shadow property (without the -moz- prefix or the -webkit- one) is supported in the browsers ...


Regards,
Sorin