2010-12-29 13 views
5

Voglio essere in grado di determinare se un browser supporta i colori HSL, in caso contrario, voglio ricorrere ai colori RGB generati (ho entrambi generato). C'è un modo per farlo senza realmente controllare quale browser sta usando l'utente?Come posso verificare se il mio browser supporta i colori HSL in Javascript?

+2

Perché non attenersi a RGB e non preoccuparsi? Stai andando fuori dal tuo modo di fare qualcosa che non fa differenza per l'utente. – Brad

+1

HSL è più facile da lavorare in termini di generazione di colori in modo programmatico (nel mio caso prendendo un numero compreso tra 1 e 5 e scegliendo un colore da una sfumatura) inoltre trovo più facile visualizzare i colori quando si lavora con HSL – paullb

risposta

3

La risposta facile sarebbe: http://www.modernizr.com/. Puoi guardare il codice sorgente e modificarlo per usare solo la parte su HSL.

Fondamentalmente si tratta solo crea un nuovo elemento, definisce i suoi 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 regolare l'utilizzo di CSS metrobalderas answer sotto è la strada da percorrere, ma per lo scopo che paulb inteso, questo è un modo per farlo.

5

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

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

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

Anche se, non so per cosa avresti bisogno HSL.

+0

Questo è un consiglio eccellente ma non funziona per me visto che sto cercando di usare hsl per impostare il colore di una polilinea in Google Maps (non che ne abbia mai parlato prima). HSL è più facile da lavorare in termini di generazione di colori. – paullb

1

Se la preoccupazione è che lavorare con HSL è più facile da generare i colori, ma si è preoccupati del supporto del browser, si può considerare di lavorare con HSL nella logica aziendale ma convertire in RGB quando si applicano i colori agli elementi DOM.

vedere anche la seguente questione:
HSL to RGB color conversion

Problemi correlati