7

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?

Community
  • 1
  • 1
Praveen Puglia
  • 5,577
  • 5
  • 34
  • 68

2 Answers2

4

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:

Lea Verou
  • 23,618
  • 9
  • 46
  • 48
  • `color` property doesn't accept either percentages or length as values https://drafts.csswg.org/css-color-3/#colorunits – maioman Oct 09 '15 at 17:14
  • @maioman - **Saturation and lightness are represented as percentages. 100% is full saturation, and 0% is a shade of gray.** from the spec - http://www.w3.org/TR/css3-color/#hsl-color – Praveen Puglia Oct 09 '15 at 17:17
  • Although I have accepted it, I am curious to ask, what ambiguity would ZERO specifically pose? also, hsl/hsla doesn't have any other representation right? So when representing Saturation and Lightness, can't ZERO be actually used if there is no ambiguity? – Praveen Puglia Oct 09 '15 at 17:20
  • @PraveenPuglia true, but it's not a single value – maioman Oct 09 '15 at 17:22
  • @maioman - but zero is zero.. and it's treated in slightly different way. isn't it? Even for all length units, 0 doesn't have to have them. I have another thought coming up. – Praveen Puglia Oct 09 '15 at 17:25
  • and the other thought is... why do we even need to specify **%** for S & L part anyways? For the Hue part, although it's **degrees**, we specify it as integer value. So likewise can't it be done for S & L that they accept just integers and the parser knows for sure those are percentages because that's the only thing they expect according to spec? – Praveen Puglia Oct 09 '15 at 17:27
  • @PraveenPuglia it's up to the parser the way 0 is treated , and all the documentation mentioned are a recommendation to browser developers for conforming behavior - I'll make an example: try setting `transform: rotate(90)` on a random element – maioman Oct 09 '15 at 17:32
  • it requires deg to be specified as a must. so? – Praveen Puglia Oct 09 '15 at 17:44
  • @PraveenPuglia logically shouldn't it behave like hue ? – maioman Oct 09 '15 at 17:55
  • Ha ha! I believe hue should behave like this probably then :p I am all confused now. – Praveen Puglia Oct 09 '15 at 18:06
  • 2
    @maioman values have their own microsyntax, which is defined in terms of other types of values, in the css-color spec. Specifically, in hsl()/hsla(), saturation and lightness are values. – Lea Verou Oct 09 '15 at 18:09
  • 2
    @PraveenPuglia Because in HSL, saturation and lightness are (conceptually) percentages. And yes, in this case there is no disambiguation issue, but a) Values need to be defined in a way that works anywhere, you can't have different parsing of percentages here and different there. b) Who knows how it will change in the future and whether it will accept new types in those params? – Lea Verou Oct 09 '15 at 18:11
  • 1
    Regarding hue, yes, in CSS Color Level 4 it will be an angle *as well*. See: https://drafts.csswg.org/css-color-4/ @maioman W3C specs are called "Recommendations" for historical reasons, but have no doubt: They are treated exactly like specifications by browser vendors. Please don't spread misinformation if you're uninformed about the standards process. – Lea Verou Oct 09 '15 at 18:13
  • @LeaVero when I made the deg example I was refering to Praven's question _why do we even need to specify % for S & L part anyways?_ – maioman Oct 09 '15 at 21:55
  • I think the problem here is considering Saturation and Lightness as values, the value here is `hsl(0,0%,0%)` as a whole, Sat. & Lig. are parameters inside the value and they must have a certain syntax. As I said in the beginning **color property doesn't accept either percentages or length as values** – maioman Oct 09 '15 at 21:57
1

in general hsl is a concept for defining a color apart from CSS;

the three paramaters you can set are Hue Saturation Lightness:

  • Hue Think of a color wheel. Setting a value is like setting an angle degree.
    As HSL-CSS-value it's a unitless value ; positive an negative are supprted (ie. 360 == -720).

  • Saturation - 0% is completely denatured (grayscale). 100% is fully saturated (full color).
    As HSL-CSS-value a percentage value is needed (you can specify any % value but it's range is 0% through 100%).

  • Lightness - 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
    As HSL-CSS-value you have the same rule as saturation.

  • the optional alpha-value is a value form 0 to 1 that defines the opacity of color .

here's a link to a good article for additional info.

EDIT:

You're assumption that the color property can be set to a length-% unit value is wrong - like other CSS properties that accept only a certain range of values color property has it's own options ( hsl is one); when the parser gets to an hsl or hsla value the rules are the one above (probably in the future the parser will fix it for you but for now this is how it works ;)

maioman
  • 18,154
  • 4
  • 36
  • 42
  • I get that but what's really the caveat in not using the unit? Wouldn't that make it uniform in CSS? Also, from general sense, 0 should be unitless doesn't matter where it's used. – Praveen Puglia Oct 09 '15 at 12:48