Come utilizzare codici colore a 3 cifre anziché codici colore a 6 cifre in CSS?

Recentemente ho esaminato il mio file CSS e ho #FDFEFF tutti i miei codici esadecimali a 6 cifre in semplici codici a 3 cifre (ad esempio, il mio #FDFEFF stato abbreviato in #FFF ). Rende praticamente lo stesso colore di prima, mi sembra che le parti intermedie siano abbastanza inutili e rimuovendole mi hanno salvato un intero 300 byte nel mio file CSS.

Importa quale versione usi? Raramente mi imbatto in siti web che usano solo i codici a 3 cifre (o credo di non imbattermi mai in quelli che lo fanno). È ancora perfettamente valido utilizzare codici a 3 cifre su codici a 6 cifre o dovremmo utilizzare i codici completi a 6 cifre?

I codici a 3 cifre sono abbreviati, #123 è lo stesso di #112233 . Nell’esempio che hai dato, hai (efficacemente) scambiato #FDFEFF per #FFFFFF , che è vicino al colore originale ma ovviamente non è esatto.

Non “importa” quale versione utilizzi, in quanto tale, ma i codici colore a 3 cifre significano che hai un po ‘meno scelta nelle tonalità. Se ritieni che il risparmio di 300 byte valga la pena, allora vai avanti e usa i codici a 3 cifre, ma a meno che tu non stia progettando per una situazione di larghezza di banda ridotta, quei 300 byte non ti faranno risparmiare molto.

Stenografia fa schifo! Non usarlo È più difficile mantenere e creare variazioni non necessarie, ad esempio quando si cerca e si sostituisce un valore di colore (“oh, ora devo prendere in considerazione #FFFFFF e white e #FFF “).

Ciò che si salva in termini di dimensioni non vale mai quello che si perde nella manutenibilità. Usa la minifaction e la compressione per risparmiare larghezza di banda.

Se lo usi in una tabella in IE 7 8 o 9 (purtroppo questo è rilevante alla data di questa risposta)

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

I codici a 6 cifre funzionano bene ma i codici a 3 cifre vengono visualizzati in nero

  vs. 

Se le versioni a “3 cifre” producono il colore necessario, puoi utilizzarlo quanto vuoi. Non è certamente sbagliato.

Questo è vero, ma questa trasformazione non è generale:

 #FFF == #FFFFFF #CCC == #CCCCCC 

Quindi, quello che fa è “raddoppia” ogni cifra esadecimale. Quindi non è lo stesso colore. È comunque ansible che sembri uguale perché le differenze sono minime. In questo caso, un stream di lavoro a colors calibrato potrebbe essere d’aiuto.

Io uso sempre la stenografia. Il miglior vantaggio è che posso facilmente ricordare i codici.

Hai ancora 16 3 = 4.096 colors tra cui scegliere, dovrebbe essere sufficiente.

Tuttavia, se si salvano 300 byte con codici colore abbreviati, significa che hai 100 colors decleared nel tuo CSS. A meno che la tua pagina non sia molto varia, o tutti gli arcobaleni e i fiori, sembra molto. Potresti essere bravo con i CSS sistematici, ma spesso vedo regole css non necessarie. EX: se stai impostando la stessa regola su molti elementi figlio che potrebbero essere stati sostituiti con l’impostazione della regola sul nonno e in un elemento di eccezione.

Non importa se usi i colors esadecimali o quelli normali, quindi vai avanti e convertili se lo desideri.

rimuovendoli mi hanno salvato un intero 300 byte nel mio file CSS

Wow, un totale di 300 byte! : D, sarcasmo ftw

Il problema è che a meno che tu non abbia intenzione di minimizzare, comprimere e combinare tutti i tuoi css, javascript, ecc., I 300 byte non valgono la pena di preoccuparti, soprattutto perché la velocità media di Internet sta aumentando.

Divertiti!