¿Cómo puedo comprobar si mi navegador es compatible con colores HSL en Javascript?

Question

Quiero ser capaz de determinar si un navegador colores soportes HSL, si no, entonces yo quiero que recurrir a los colores RGB generados (i ambos han generado). ¿Hay alguna manera de hacerlo sin tener que comprobar qué navegador está utilizando el usuario?

Answer 1

La respuesta fácil sería: http://www.modernizr.com/ . Usted puede mirar en el código fuente y modificarlo para usar sólo la parte de HSL.

Básicamente sólo crea un nuevo elemento, establece su background-color utilizando valores HSLA, y luego busca la presencia de rgba o hsla en los atributos de estilo del objeto. Si está presente, entonces el navegador es compatible con HSLA. Muy inteligente:

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

Tenga en cuenta que para el uso de CSS regulares metrobalderas respuesta a continuación es el camino a seguir, pero con el propósito de que paulb pretende, esto es una manera de hacerlo.

Answer 2

La detección es agradable, pero la adición de un repliegue es aún mejor:

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

En primer lugar, se establece el repliegue, la propiedad de que la mayoría de los navegadores van a entender, a continuación, establece la nueva propiedad. Si éste no es compatible, no se sobreponen a la anterior.

Aunque, no sé lo que se necesita para la HSL.

Answer 3

Si la preocupación es que el trabajo con HSL es más fácil de generar colores, pero está preocupado por el apoyo del navegador, se puede considerar trabajar con HSL en su lógica de negocio, pero la conversión de RGB a la hora de aplicar los colores a los elementos DOM.

También ver la siguiente pregunta:
HSL para la conversión de color RGB