2

I set up a text color as hsla(0, 0%, 0%, 0) to hide it. But sometimes it became hsla(0, 0, 0, 0), which can't be executed by browser.

I can fix this if I go the site with incognito mode. I have no idea if it's a bug in Chrome, from the server or just cache problem. If so, why it happens so often and how to fix it?

hsla(0, 0%, 0%, 0) become hsla(0, 0, 0, 0) in browser

chenghuayang
  • 1,424
  • 1
  • 17
  • 35
  • 4
    Zero is zero regardless of the unit of measure – John Conde Aug 03 '15 at 04:19
  • 1
    The question is not "why zero can't be used". What I was trying to ask is *why it sometimes "0%" becomes "0"*. – chenghuayang Aug 03 '15 at 06:15
  • 2
    @ChenghuaYang more readable, saves a few bytes and the fact that John Conde stated. Major browsers tend to stick to it. – Abhinav Gauniyal Aug 03 '15 at 06:20
  • @AbhinavGauniyal That's okay, and I'll do that. But I'm still curious about the question. – chenghuayang Aug 03 '15 at 07:25
  • 1
    @ChenghuaYang it is not a bug. Firefox does this, Chrome does this and I guess remaining major browsers agree upon it. You can yourself see it by incrementing/decrementing any numeric value to 0, it will be unitless. – Abhinav Gauniyal Aug 03 '15 at 08:44
  • 1
    @AbhinavGauniyal But it just like the difference between `border: 0px` and `border: 0`, where the former one is a border with 0px, and the latter is no border. In this case, hsla(0, 0, 0, 0) is wrong in CSS. So why the browser transform 0% into 0 ? – chenghuayang Aug 03 '15 at 09:23
  • 1
    @ChenghuaYang border:0px means do not construct a border. border:0 means do not construct a border again. See , adding px or any other unit after 0 might make you think that it is constructing a border. Therefore browsers and other standard tools remove any units associated with 0. – Abhinav Gauniyal Aug 03 '15 at 09:54
  • I'm also seeing this and can't figure it out. My CSS says `hsl(0, 0%, 70%)`, and the browser somehow transforms it to `hsl(0,0,70%)` which is an invalid property value, so the color doesn't show up. Other updates to my CSS file are showing up, so I don't think it's just caching. Happens in both Firefox and Chrome. – S. Kirby Feb 14 '18 at 03:48
  • Update - A few things that didn't work: removing spaces `hsl(0,0%,70%)`, zero decimals `0.0%` `0.00%`, pre-minifying my CSS file. All of these still result in transformation to a unitless `0` once browser caching(?) kicks in after a day or so. So I'm stumped. I guess the only workaround is to use a CSS preprocessor which converts HSL to RGB. Of related interest, YUI compressor has a similar issue, except that `0.00%` is a successful workaround: https://github.com/yui/yuicompressor/issues/80 – S. Kirby Mar 02 '18 at 21:39

1 Answers1

-1

Zero's should be unitless in css.

Lengths refer to distance measurements.The format of a length value (denoted by in this specification) is a (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

See http://www.w3.org/TR/CSS2/syndata.html#length-units for more information.

Here is another Stackoverflow answer supporting this reason.

Community
  • 1
  • 1
Abhinav Gauniyal
  • 7,034
  • 7
  • 50
  • 93