Question

我希望能够确定浏览器是否支持HSL颜色，如果没有，那么我想回退生成的RGB颜色（我已生成）。有没有办法在没有实际检查用户使用的浏览器的情况下这样做？

Answer 1

检测很好，但添加后备更好：

#element{
   background: rgb(255, 10, 25);
   background: hsl(240, 100%, 50%);
}

首先，设置回退，浏览器最常理解的属性，然后设置新属性。如果不支持此项，则不会覆盖前一个。

虽然，我不知道你需要什么HSL。

Answer 2

答案很简单：http://www.modernizr.com/。您可以查看源代码并对其进行修改，以仅使用有关HSL的部分。

基本上它只是创建一个新元素，使用HSLA值设置其background-color，然后在对象的样式属性中查找rgba或hsla的存在。如果存在，则浏览器支持HSLA。非常聪明：

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
})

请注意，对于常规CSS使用metrobalderas answer，下面是要采用的方法，但出于paulb的目的，这是一种方法。

Answer 3

如果担心使用HSL更容易生成颜色，但您担心浏览器支持，则可以考虑在业务逻辑中使用HSL，但在将颜色应用于DOM元素时转换为RGB。

另见以下问题：
HSL to RGB color conversion

如何检查我的浏览器是否支持Javascript中的HSL颜色？

3 个答案: