css - How can I check if my browser supports HSL colours in Javascript? - Stack Overflow

admin管理员组

文章数量:1317909

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?

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?

• javascript
• css
• hsl

Share Improve this question Follow edited Dec 29, 2010 at 19:58 Paul D. Waite 99k5757 gold badges202202 silver badges271271 bronze badges asked Dec 29, 2010 at 14:40 paullbpaullb 4,33566 gold badges3939 silver badges6969 bronze badges 2

• 2 Why not stick to RGB and not worry about it? You're going out of your way to do something that makes no difference to the user. – Brad Commented Dec 29, 2010 at 16:54
• 1 HSL is easier to work with in terms of generating colours programatically (in my case taking a number between 1 and 5 and choosing a colour from a gradient) also I find it easier to visualise colours when working with HSL – paullb Commented Dec 31, 2010 at 8:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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./. 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

本文标签： cssHow can I check if my browser supports HSL colours in JavascriptStack Overflow