How can I check if my browser supports HSL colours in Javascript?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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