5

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

4

3 回答 3

5

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

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

首先，您设置回退，浏览器最能理解的属性，然后设置新属性。如果不支持这个，它不会覆盖前一个。

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

于 2010-12-29T19:56:25.020 回答
3

简单的答案是：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 的目的，这是一种方法。

于 2010-12-29T14:51:15.307 回答
1

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

另请参阅以下问题：
HSL to RGB color conversion

于 2016-06-24T23:20:01.683 回答