Perché un assegnamento hsl CSS richiede un colore di riserva?

Question

ReSharper mi ha detto "richiede colore fallback" e ha aggiunto (quando ho accettato), il primo colore qui:

color: #ff8000; 
    color: hsl(30, 100%, 50%); 

Quindi a quanto pare questa prima assegna # ff8000 alla classe, e quindi se il valore HSL "prende" sostituisce il precedente compito. Ma perché è necessario? Sicuramente i "colori di fallback" non sono richiesti quando si usano tutti i tipi di assegnazioni di colori?

Answer 1

In principio, ci sono stati tre modi per specificare i colori:

1. hexadecimal formato (# 3FC408), utilizzando tre o sei personaggi,

2. colori con nome (come ad esempio red, blue, black), e

3. rgb() - dove nel le staffe si avrebbe il riferimento numerico per ciascuno dei colori (rosso, verde e blu) da 0 a 255.

CSS3 da allora ha aggiunto diversi nuovi formati di colore, tra cui:

1. rgba() - rosso, blu, verde, alfa (opacità),

2. hsl() - tonalità, saturazione e luminosità, e

3. hsla() - tonalità, saturazione, luminosità e alfa (opacità).

Mentre questi nuovi formati di colore portare una notevole quantità di flessibilità di come gli sviluppatori di definire i colori e le relazioni tra loro, può anche lasciare i browser più vecchi in cerca peggiore del previsto a causa di incompatibilità.

Il problema è che i parser CSS nei browser salteranno una proprietà il cui nome o valore non è compreso. I browser meno recenti come Internet Explorer 8 e precedenti non comprendono rgba(), hsl() o hsla(), e, di conseguenza, le dichiarazioni che li contengono non vengono visualizzati.

Si consideri il seguente:

.box { 
    background: #000; 
    color: rgba(100, 100, 200, 0.5); 
} 

browser che supportano tratteranno questo codice CSS, come descritto. I browser non di supporto elimineranno completamente la proprietà del colore perché il valore non è compreso. Ciò significa che il colore effettivo utilizzato sarà ereditato dal contesto circostante e potrebbe effettivamente finire nero (lo stesso dello sfondo).Per evitare questo, si dovrebbe sempre includere un colore di ripiego in formato esadecimale o, nome, o rgb(), come ad esempio:

.box { 
    background: #000; 
    color: blue; 
    color: rgba(100, 100, 200, 0.5); 
} 

Cosa ReSharper stava chiedendo di fare è stato quello di fornire un colore di ripiego. Questo colore di fallback dovrebbe sempre essere prima del il nuovo colore per garantire che i browser più vecchi possano vederlo e utilizzarlo correttamente e che i nuovi browser continuino a utilizzare il nuovo formato di colore.

Maggiori informazioni:

https://github.com/stubbornella/csslint/wiki/Require-fallback-colors

Answer 2

http://caniuse.com/#search=hsl

IE8- non supportano lo spazio colore HSL. Oltre a questo, non hai bisogno di un fallback. E 'anche abbastanza banale per convertire HSL in esadecimale, in modo da poter sempre e solo utilizzare esadecimale