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?
risposta
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.
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.
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
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
- 1. Come verificare se il browser supporta HTML5?
- 2. Come verificare se il browser supporta l'attributo placeholder nativo?
- 3. PHP: come determinare se il browser supporta javascript in PHP?
- 4. Verifica se Browser supporta il timepicker HTML5
- 5. È possibile rilevare JavaScript se il browser dell'utente supporta gzip?
- 6. Come verificare se un browser supporta shadow DOM
- 7. Determinare se il browser supporta la stampa
- 8. Come posso verificare se il mio ID elemento è attivo?
- 9. Come posso rilevare se un browser supporta MJPEG?
- 10. Come verificare se il valore css è supportato dal browser?
- 11. Come verificare se send() di XMLHttpRequest supporta File
- 12. Come posso rilevare se un browser supporta il tag di intermittenza?
- 13. Come faccio a sapere se il mio browser supporta SVG 2.0?
- 14. Come verificare se il caching del browser è disabilitato
- 15. Come posso visualizzare un'immagine se il browser non supporta il tag <video> di HTML5
- 16. Esiste un modo per verificare se un browser mobile supporta flash utilizzando la tecnologia web?
- 17. Come verificare se javascript è disabilitato?
- 18. Come posso rilevare se il browser ha riscontrato un errore JavaScript ... in JavaScript?
- 19. Come posso determinare in modo affidabile se un browser supporta eventi di passaggio del mouse?
- 20. Come verificare se il carattere non è supportato dal browser dell'utente in JavaScript?
- 21. In Javascript, come posso determinare se il mio browser corrente è Firefox su un computer rispetto a tutto il resto?
- 22. Rileva se il browser supporta la posizione: fisso
- 23. Determinare se il browser supporta l'autenticazione di Windows
- 24. come posso confrontare i colori in java?
- 25. Come posso rilevare se il mio dispositivo Apple supporta Bluetooth Low Energy
- 26. Come posso verificare se CSS calc() è disponibile usando JavaScript?
- 27. Come verificare se il valore esiste in questo array JavaScript?
- 28. Come posso verificare se il mio font è stato reso correttamente in pdf?
- 29. g ++ come verificare se supporta le funzioni lambda?
- 30. Come faccio a sapere se il mio Tomcat supporta Servlet 3.0 o no?
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
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