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

Question

我希望能够确定浏览器是否支持HSL颜色，如果不支持，则希望使用生成的RGB颜色（我已有生成的颜色）。有没有办法在不实际检查用户使用的浏览器的情况下完成这一点？

- paullb

---

为什么不坚持使用RGB而不担心它呢？你正在费尽心思去做一些对用户没有任何影响的事情。 - Brad

在编程中，使用HSL更容易生成颜色（例如，在我的情况下，从渐变中选择一个颜色，取1到5之间的数字），同时我发现在使用HSL时更容易将颜色可视化。 - paullb

Answer 1

检测是好的，但添加备选方案更好：

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

首先，您设置回退，这是大多数浏览器都能理解的属性，然后再设置新属性。如果不支持此属性，则不会覆盖以前的属性。

虽然我不知道您为什么需要HSL。

- metrobalderas

---

这是非常好的建议，但对我不起作用，因为我正在尝试使用HSL来设置Google地图中折线的颜色（虽然之前没有提到过）。在生成颜色方面，HSL更易于使用。 - paullb

Answer 2

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

基本上，它只创建一个新元素，使用HSLA值设置其背景颜色，然后查找对象样式属性中是否存在"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的目的，这是一种方法。

- devius

Answer 3

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

另请参见以下问题：
HSL转RGB颜色转换

- Sygmoral