Come posso controllare se il mio browser supporta i colori HSL in Javascript?

Question

Voglio essere in grado di determinare se un browser colori supporti HSL, se poi non voglio ripiegare su colori RGB generati (Ho sia generato). Esiste un modo per farlo senza realmente controllare quello del browser che l'utente sta usando?

Answer 1

La risposta più semplice sarebbe: http://www.modernizr.com/ . Potete guardare il codice sorgente e modificarlo in modo da utilizzare solo la parte che riguarda HSL.

In sostanza si crea solo un nuovo elemento, imposta la sua background-color utilizzando i valori HSLA, e poi cerca la presenza di rgba o hsla negli attributi di stile dell'oggetto. Se presente, il browser supporta HSLA. Molto intelligente:

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

Si noti che per l'uso regolare CSS metrobalderas risposta sotto è la strada da percorrere, ma per lo scopo che paulb destinato, questo è un modo per farlo.

Answer 2

Rilevazione è bello, ma l'aggiunta di un ripiego è ancora meglio:

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

In primo luogo, è possibile impostare il fallback, la proprietà che i browser per lo capiranno, e poi si imposta la nuova proprietà. Se questo non è supportato, non sovrascriverà quella precedente.

Anche se, io non so che cosa si avrebbe bisogno HSL per.

Answer 3

Se la preoccupazione è che lavorare con HSL è più facile da generare i colori, ma si sono preoccupati per il supporto del browser, si può considerare a lavorare con HSL nella vostra logica di business, ma la conversione in RGB quando si applicano i colori per gli elementi DOM.

Vedere anche la seguente domanda:
HSL di conversione del colore RGB