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

StackOverflow https://stackoverflow.com/questions/4555015

  •  13-10-2019
  •  | 
  •  

题

我希望能够确定浏览器是否支持HSL颜色，如果不是这样，我想回到生成的RGB颜色上（我都生成了）。有什么方法可以在不实际检查用户使用的浏览器的情况下做到这一点？

有帮助吗？

解决方案

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

基本上它只是创建一个新元素，设置 background-color 使用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答案 以下是要走的路，但是出于Paulb的意图，这是做到这一点的一种方法。

其他提示

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

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

首先，您设置了后备，这是浏览器大多会理解的属性，然后设置新属性。如果不支持这个，则不会覆盖上一个。

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top