csscolorsunits-of-measurementhsl

0 as saturation and lightness doesn't work but 0% does in hsl/hsla?

I was trying a simple demo where I gave colors to elements in hsl. From all my experience I know that 0(ZERO) in CSS is unitless. If you want to specify 0 as a value, you may leave the unit.

This however doesn't seem to be the case with hsl/hsla. On both Chrome and Firefox, it results in invalid property value.

A tangentially related question was this but that contains the answer that zero should be unitless referring to spec.

Any bug with hsla(0, 0%, 0%, 0), becoming hsla(0, 0, 0, 0)? (missing percent sign)

hsl(0,0,0)     // error
hsl(0,0%,0)    // error
hsl(0,0,0%)    // error

Is it specifically designed to work with units beside zero? Are there any other properties like this where having a unit beside zero is a must?

Solution

  • A 0 <length> in CSS is unitless, not any 0, otherwise disambiguation would not be possible (e.g. in shorthands). This is a <percentage>, not a <length>.

    Specification: