Domanda Perché HTML pensa che "chucknorris" sia un colore?


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 a sfondo rosso  attraverso 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 ?


6540
2017-11-29 22:54


origine


risposte:


È 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 Una piccola lamentela sull'analisi dei colori di Microsoft Internet Explorer  che lo copre in grande dettaglio, comprese lunghezze variabili dei valori di colore, 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 il bgcolor attributo 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é lo fa bgcolor="chucknorr" produrre 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.

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


6041
2017-11-30 21:53



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

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 

AGGIORNARE: I rispondenti originali che hanno detto che il colore era #CC0000 da allora hanno modificato le loro risposte per includere la correzione.


826
2017-10-17 17:55



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

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

Nota, questo fa non  si applicano all'analisi dei colori CSS, che seguono 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>


337
2017-11-29 23:01



Il browser sta provando a convertire chucknorris in codice colore 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 sfumatura di rosso.

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

Post scriptum 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


219
2017-11-30 14:05



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;
}

186
2017-09-27 22:01



Risposta:  

  • Il browser proverà a convertire Chuck Norris  in un valore esadecimale.
  • Da c è l'unico carattere esadecimale valido in Chuck Norris , il valore si trasforma in: 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.

166
2018-05-24 05:18



La ragione è che il browser può non capire  e cerca in qualche modo di tradurlo in ciò che può capire e in questo caso in un valore esadecimale!

chucknorris inizia con c che è un carattere riconosciuto in esadecimale, inoltre sta convertendo tutti i caratteri non riconosciuti in 0!

Così chucknorris in formato esadecimale diventa: c00c00000000, tutti gli altri personaggi diventano 0 e c rimane dove sono ...

Ora vengono divisi per 3 per RGB(rosso, verde, blu) ... R: c00c, G: 0000, B:0000...

Ma sappiamo che esadecimale valido per RGB è di soli 2 caratteri, mezzi R: c0, G: 00, B:00

Quindi il vero risultato è:

bgcolor="#c00000";

Ho anche aggiunto i passaggi nell'immagine come riferimento rapido:

Why does HTML think “chucknorris” is a color?


133
2017-07-01 04:08



Chuck Norris  è stats con c  il browser ha letto in un valore esadecimale.

perché a, b, c, d, e, f sono caratteri in esadecimale

Il browser chucknorris convertire in c00c00000000 valore esadecimale.

Poi c00c00000000 valore esadecimale convertire in RGB  formato (diviso per 3)

c00c00000000 => R:c00c,G:0000,B:0000

Il browser richiede solo 2 cifre per indicare il colore.

R:c00c,G:0000,B:0000 => R:c0,G:00,B:00 => c00000

infine, mostra bgcolor = c00000 nel browser web.

Ecco un esempio dimostrativo

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="10" width="150" align="center">chucknorris</td>
    <td bgcolor="c00c00000000" cellpadding="10" width="150" align="center">c00c00000000</td>
    <td bgcolor="c00000" cellpadding="10" width="150" align="center">c00000</td>
  </tr>
</table>


3
2018-04-17 19:16