code - html font background color




Perché HTML pensa che "chucknorris" sia un colore? (6)

Come mai certe stringhe casuali producono colori quando vengono immessi come colori di sfondo in HTML? Per esempio:

<body bgcolor="chucknorris"> test </body>

... produce un documento con uno sfondo rosso su tutti i browser e le piattaforme.

È interessante notare che mentre chucknorri produce anche uno sfondo rosso, chucknorr produce uno sfondo giallo.

Cosa sta succedendo qui?


È un residuo dei giorni di Netscape:

Le cifre mancanti vengono considerate come 0 [...]. Una cifra errata viene semplicemente interpretata come 0. Ad esempio i valori # F0F0F0, F0F0F0, F0F0F, #FxFxFx e FxFxFx sono tutti uguali.

È dal post del blog Un po 'di ironia sulla parsing dei colori di Microsoft Internet Explorer che lo copre in grande dettaglio, incluse lunghezze variabili dei valori dei colori, ecc.

Se applichiamo le regole a loro volta dal post del blog, otteniamo quanto segue:

  1. Sostituisci tutti i caratteri esadecimali non validi con 0

    chucknorris becomes c00c0000000
    
  2. Riempire al numero totale successivo di personaggi divisibili per 3 (11 -> 12)

    c00c 0000 0000
    
  3. Dividi in tre gruppi uguali, con ogni componente che rappresenta il corrispondente componente di colore di un colore RGB:

    RGB (c00c, 0000, 0000)
    
  4. Tronca ciascuno degli argomenti da destra a due caratteri

Il che dà il seguente risultato:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

Ecco un esempio che dimostra l'attributo bgcolor in azione, per produrre questo campione di colore "sorprendente":

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

Questo risponde anche all'altra parte della domanda; perché bgcolor="chucknorr" produce un colore giallo? Bene, se applichiamo le regole, la stringa è:

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

Che dà un colore giallo oro chiaro. Poiché la stringa inizia con 9 caratteri, questa volta manteniamo la seconda C, quindi finisce nel valore del colore finale.

Originariamente l'ho incontrato quando qualcuno ha sottolineato che si potrebbe fare color="crap" e, beh, esce marrone.


Il browser sta provando a convertire chucknorris in codice esadecimale, perché non è un valore valido.

  1. In chucknorris , tutto tranne c non è un valore esadecimale valido.
  2. Quindi viene convertito in c00c00000000 .
  3. Che diventa # c00000 , una tonalità di rosso.

Questo sembra essere un problema principalmente con Internet Explorer e Opera (12) poiché sia ​​Chrome (31) che Firefox (26) ignorano questo aspetto.

PS I numeri tra parentesi sono le versioni del browser su cui ho provato.

.

Su una nota più leggera

Chuck Norris non è conforme agli standard web. Gli standard Web sono conformi a lui. # BADA55


La maggior parte dei browser ignorerà semplicemente qualsiasi valore NON esadecimale nella stringa di colori, sostituendo cifre non esagonali con zero.

ChuCknorris traduce in c00c0000000 . A questo punto, il browser dividerà la stringa in tre sezioni uguali, indicando i valori Rosso , Verde e Blu : c00c 0000 0000 . I bit extra in ciascuna sezione verranno ignorati, il che rende il risultato finale #c00000 che è un colore rossastro.

Nota, questo non si applica all'analisi dei colori CSS, che segue lo standard CSS.

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>


La specifica HTML WHATWG ha l'algoritmo esatto per l'analisi di un valore di colore legacy: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

Il codice utilizzato da Netscape Classic per analizzare le stringhe di colori è open source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Ad esempio, si noti che ogni carattere viene analizzato come una cifra esadecimale e quindi viene spostato in un numero intero a 32 bit senza verificare l'overflow . Solo otto cifre esadecimali si inseriscono in un numero intero a 32 bit, motivo per cui vengono considerati solo gli ultimi 8 caratteri. Dopo aver analizzato le cifre esadecimali in numeri interi a 32 bit, vengono quindi troncati in numeri interi a 8 bit dividendoli per 16 finché non si adattano a 8 bit, motivo per cui gli zeri iniziali vengono ignorati.

Aggiornamento: questo codice non corrisponde esattamente a quanto definito nella specifica, ma l'unica differenza è che ci sono poche righe di codice. Penso che siano state aggiunte queste righe (in Netscape 4):

if (bytes_per_val > 4)
{
      bytes_per_val = 4;
}

Mi dispiace non essere d'accordo, ma secondo le regole per l'analisi di un valore di colore precedente pubblicato da @Yuhong Bao , chucknorris NON equivale a #CC0000 , ma piuttosto a #C00000 , una tonalità molto simile ma leggermente diversa di rosso. Ho usato il componente aggiuntivo ColorZilla di Firefox per verificarlo.

Lo stato delle regole:

  • rendere la stringa una lunghezza che è un multiplo di 3 aggiungendo 0: chucknorris0
  • separare la stringa in 3 stringhe di uguale lunghezza: chuc knor ris0
  • troncare ogni stringa a 2 caratteri: ch kn ri
  • mantieni i valori esadecimali e aggiungi 0 se necessario: C0 00 00

Sono stato in grado di utilizzare queste regole per interpretare correttamente le seguenti stringhe:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

AGGIORNAMENTO: i #CC0000 originali che hanno affermato che il colore era #CC0000 hanno modificato le loro risposte per includere la correzione.


Risposta:

  • Il browser proverà a convertire Chucknorris in un valore esadecimale.
  • Poiché c è l'unico carattere esadecimale valido in chucknorris , il valore diventa: c00c00000000 ( 0 per tutti i valori che non erano validi ).
  • Il browser divide quindi il risultato in 3 gruppi: Red = c00c , Green = 0000 , Blue = 0000 .
  • Poiché i valori esadecimali validi per gli sfondi html contengono solo 2 cifre per ciascun tipo di colore ( r , g , b ), le ultime 2 cifre vengono troncate da ciascun gruppo, lasciando un valore rgb di c00000 che è un colore tinta mattone-rossastro.






background-color