Does style = "color: #FFF;" rendering come # F0F0F0 o #FFFFFF?

Question

Quando si definiscono i colori usando "stenografia esadecimale" (style="color: #FFF;"), esiste un metodo definito per l'espansione della stenografia? (style="color: #F0F0F0;" o style="color: #FFFFFF;")

Tutti i browser utilizzano lo stesso metodo di espansione? Questo comportamento è specifico (se è così, dove è definito)? Il metodo di espansione forse varia tra i CSS 1/2/3?

Ho notato che "la maggior parte dei browser" si espande a #FFFFFF.

Ci sono altri luoghi (al di fuori di HTML/CSS) dove è consentita questa notazione abbreviata, ma il metodo di espansione è diverso?

Ho sempre evitato di usare esadecimale stenografia, perché non ho mai conosciuto le risposte a queste domande ...

Answer 1

CSS 2.1 (http://www.w3.org/TR/CSS2/syndata.html#value-def-color):

I tre cifre notazione RGB (#rgb) viene convertito in forma a sei cifre (#rrggbb) replicando cifre, non aggiungendo zeri. Ad esempio, # fb0 si espande in # ffbb00. Ciò garantisce che il bianco (#ffffff) possa essere specificato con la notazione breve (#fff) e rimuova qualsiasi dipendenza dalla profondità del colore del display.

Testo di CSS 1, CSS 3 sono gli stessi. Il CSS 4 draft dice cose simili.

I documenti Internet Explorer e Firefox indicano lo stesso metodo.

Come esempio pratico, per favore controlla questo frammento di codice, che dispone di 3 <div> s di stili

div { width: 100px; height: 100px; }

<div style="background-color:#f0f0f0;">#f0f0f0</div> 
 
<div style="background-color:#fff;">#fff</div> 
 
<div style="background-color:#ffffff;">#ffffff</div>

su Mac OS X 10.6, tutti Firefox 3.6, Opera 10.10, Safari 4 reso #fff come #ffffff.

non vedo un motivo per cui un browser o la norma vuole deviare da questa espansione in futuro, dal momento che il colore #ffffff è molto più comune di quanto #f0f0f0.

Answer 2

I CSS2 spec sezione 4.3.6 Colori:

Il modello di colore RGB è utilizzato nelle specifiche numeriche dei colori . Questi esempi specificano tutti lo stesso colore:

em { color: #f00 }    /* #rgb */ 
em { color: #ff0000 }   /* #rrggbb */ 
em { color: rgb(255,0,0) }  
em { color: rgb(100%, 0%, 0%) } 

Il formato di un valore RGB in notazione esadecimale è un '#' immediatamente seguito da tre o sei caratteri esadecimali. La notazione RGB a tre cifre (#rgb) è convertita in formato a sei cifre (#rrggbb) replicando le cifre, non aggiungendo zero. Ad esempio, # fb0 si espande in # ffbb00. Ciò garantisce che il bianco (#ffffff) possa essere specificato con la notazione breve (#fff) e rimuova qualsiasi dipendenza dalla profondità del colore di sul display.

Poiché tutti i browser moderni supportano i CSS, si può presumere che funzionerà in questo modo nei propri siti Web e applicazioni Web.

Answer 3

Non ho conosciuto un browser per non espandere #FFF a #FFFFFF. Sarei interessato a sapere quale pensi non - o vuoi dire che alcuni continuano a mostrare #FFF?

Tuttavia, come ho capito, il #FFF è una stenografia valida e # F0 sarebbe anche (validamente) espandibile a # F0F0F0.

Questo potrebbe essere di interesse http://www.websiteoptimization.com/speed/tweak/hex/

Answer 4

test su IE8, Firefox 3.6 e Google Chrome 5.0 beta, tutti e tre i browser ripetere la cifra esadecimale:

• 000 produce 000000
• FFF produce FFFFFF
• 876 produce 887766

... e così via.

Answer 5

Sento che dovrei incoraggiare le persone a non farlo, in quanto equivale a dire a qualcuno che vuoi 15 di qualcosa e poi aspettarti che vengano visualizzati con 255. Che modo grossolano e strano di abbreviare 0xFFFFFF. Questo è il "tu ci" del web design per me.