How to validate CSS3 HSLA color values?

Question

I like checking CSS validity. It makes things work better. However, a stylesheet I'm using specifies some colors, like so..

border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );

which results in an error when using the W3C validation services (even with level=css3 set), such as...

Value Error : border-right Too many values or values are not recognized : 1px solid hsla(0,0%,0%,0.2 )

I also tried...

border-left:  1px solid ; border-left-color: hsla( 0, 0%, 100%, 0.3 );

but that returns...

Value Error : border-left-color hsla(0,0%,100%,0.3 ) is not a border-color value : hsla(0,0%,100%,0.3 )

I guess this notation is simply a "candidate", according to this spec... Does that mean validating it, at this point, is simply not an option? It's the alpha that's tripping it up.. Can I "break that value out", somehow?

Bobbobb

Trying to change your (perfectly valid) code just to make one automated service recognise it is kinda pointless. – Glynda

I created a HTML/CSS3 document. Gave a <div> a transparent background using the hsla() property and it validated correctly. I then gave my <div> a border using a similar hsla() value and it did not validate. I see this as a bug, as pointed out by BoltClock below. – Whitechapel

Answer 1

This is a known validator bug which has been reported. Your CSS declarations are all valid, and there's nothing you can or need to do about the validator failing to recognize them.

By the way, the spec you cite is out of date; the CSS3 Color Module is already a W3C Recommendation.

Bainite