Why does CSS hsl assignment require a fallback color?

Question

Resharper told me that “requires a spare color” and added (when I agreed) the first color here:

color: #ff8000; color: hsl(30, 100%, 50%); 

Thus, it is obvious that this first assigns the class to the class # ff8000, and then if the hsl value is "accept", it overrides the previous assignment. But why is this needed? Of course, when using all color assignments, "backup colors" are not required?

Answer 1

In the beginning, there were three ways to specify colors:

• hexadecimal format (# 3FC408) using three or six characters,

• named colors (e.g. red , blue , black ) and

• rgb() - in brackets you will have a numerical link for each of the colors (red, green and blue) from 0 to 255.

CSS3 has since added several new color formats, including:

• rgba() - red, blue, green, alpha (opacity),

• hsl() - hue, saturation and lightness and

• hsla() - hue, saturation, lightness and alpha (opacity).

Although these new color formats bring more flexibility to how developers define colors and the relationships between them, it can also leave older browsers worse than expected due to incompatibilities.

The problem is that CSS parsers in browsers skip a property whose name or value is not understood. Older browsers such as Internet Explorer 8 and earlier do not understand rgba() , hsl() or hsla(), , and as a result, any ads containing them will be deleted.

Consider the following:

 .box { background: #000; color: rgba(100, 100, 200, 0.5); } 

Supported browsers will process this CSS as described. Unsupported browsers will completely lose the color property because the meaning is not understood. This means that the actual color used will be inherited from the surrounding context and may actually turn out to be black (just like the background). To prevent this, you should always include the fallback color in hexadecimal, named, or rgb () format, for example:

 .box { background: #000; color: blue; color: rgba(100, 100, 200, 0.5); } 

What ReSharper asked you to do was provide backup color. This replacement color should always be in front of the new color so that previous browsers see and use it correctly, and new browsers continue to use the newer color format.

Additional Information:

https://github.com/stubbornella/csslint/wiki/Require-fallback-colors

Answer 2

http://caniuse.com/#search=hsl

IE8- do not support hsl color space. In addition, you do not need a reserve. It is also pretty trivial to convert hsl to hex, so you can always just use hex