Quiero poder determinar si un navegador admite colores HSL, si no es así, quiero recurrir a los colores RGB generados (ambos he generado). ¿Hay alguna manera de hacerlo sin verificar realmente qué navegador está usando el usuario?¿Cómo puedo verificar si mi navegador admite colores HSL en Javascript?
La respuesta fácil sería: http://www.modernizr.com/. Puede mirar el código fuente y modificarlo para usar solo la parte sobre HSL.
Básicamente sólo crea un nuevo elemento, establece sus 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 answer a continuación es el camino a seguir, pero con el propósito de que la intención paulb, esta es una manera de hacerlo.
Detectando 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 que los navegadores en su mayoría va a entender, a continuación, establece la nueva propiedad. Si este no es compatible, no sobrescribirá el anterior.
Aunque, no sé para qué necesitaría HSL.
Este es un consejo excelente no funciona para mí, ya que estoy tratando de usar hsl para establecer el color de una polilínea en Google Maps (aunque eso ya lo mencioné antes). HSL es más fácil de trabajar en términos de generación de colores. – paullb
Si la preocupación es que trabajar con HSL es más fácil de generar colores pero le preocupa el soporte del navegador, puede considerar trabajar con HSL en su lógica comercial pero convirtiendo a RGB al aplicar los colores a los elementos DOM.
Véase también la siguiente pregunta:
HSL to RGB color conversion
¿Por qué no se adhieren a RGB y no preocuparse? Estás haciendo un esfuerzo para hacer algo que no hace ninguna diferencia para el usuario. – Brad
HSL es más fácil de trabajar en términos de generación de colores programáticamente (en mi caso tomando un número entre 1 y 5 y eligiendo un color de un degradado) también me resulta más fácil visualizar colores cuando se trabaja con HSL – paullb