I want to be able to determine if a browser supports HSL colours, if not then I want to fall back on generated RGB colours (i have both generated). Is there any way to do that without actually checking what browser the user is using?
However, although RGB and Hex color codes are supported in most browsers, HSL colors are mainly supported in HTML5 based browsers. You might have used all or some of these methods to set color properties in CSS.
The hsl() function define colors using the Hue-saturation-lightness model (HSL). HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.
HSL Color ValuesHue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
HSL(Hue-Saturation-Lightness) The HSL color model is used in numerical color specifications. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak.
Detecting is nice, but adding a fallback is even better:
#element{
background: rgb(255, 10, 25);
background: hsl(240, 100%, 50%);
}
First, you set the fallback, the property that browsers mostly will understand, and then you set the new property. If this one is not supported, it will not overwrite the previous one.
Although, I don't know what you would need HSL for.
The easy answer would be: http://www.modernizr.com/. You can look at the source code and modify it to use only the part about HSL.
Basically it just creates a new element, sets its background-color
using HSLA values, and then looks for the presence of rgba
or hsla
in the style attributes of the object. If present, then the browser supports HSLA. Very clever:
function supportsHSLA() {
var style = createElement('a').style
style.cssText = 'background-color:hsla(120,40%,100%,.5)'
return style.backgroundColor.indexOf('rgba') > -1 ||
style.backgroundColor.indexOf('hsla') > -1
})
Note that for regular CSS usage metrobalderas answer below is the way to go, but for the purpose that paulb intended, this is one way to do it.
If the concern is that working with HSL is easier to generate colors but you are worried about browser support, you can consider working with HSL in your business logic but converting to RGB when applying the colors to the DOM elements.
Also see the following question:
HSL to RGB color conversion
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With