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

7488

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

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

Espandi frammento

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

È interessante notare che, mentre chucknorriproduce anche uno sfondo rosso, chucknorrproduce uno sfondo giallo.

Cosa sta succedendo qui?

html browser background-color

— user456584
fonte

154

Come nota a margine: non usare bgcolor. Usa CSS background.

— John Dvorak,

47

Perché mai vuoi aggiungere un colore di sfondo chiamato chucknorris? Qual era il colore previsto?

— masterFly

106

@masterFly: non so perché il mio commento sotto la risposta accettata sia stato cancellato per essere "non costruttivo", perché risponde abbastanza bene alla tua domanda: le persone sperimentano continuamente queste cose. Avevo solo 10 anni quando l'ho scoperto e tutto ciò che stavo facendo in quel momento era fare casino e vedere cosa è successo. Non devi sempre avere una ragione pratica per fare qualcosa, specialmente qualcosa di così frivolo.

— BoltClock

49

e <body bgcolor="stevensegal">test </body> è verde

— Chris

4

@BenDaggers Leggere la cronologia delle revisioni prima di apportare un'altra modifica. Il tag css è irrilevante ed è già stato rimosso due volte.

— Razze di leggerezza in orbita

6879

È una sospensione dai tempi di Netscape:

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

Viene dal post del blog Un po 'di entusiasmo sull'analisi dei colori di Microsoft Internet Explorer che lo copre in modo molto dettagliato, comprese le lunghezze variabili dei valori di colore, ecc.

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

Sostituisci tutti i caratteri esadecimali non validi con 0
```
chucknorris becomes c00c0000000
```
Riempi il prossimo numero totale di caratteri divisibili per 3 (11 -> 12)
```
c00c 0000 0000
```
Dividi in tre gruppi uguali, con ogni componente che rappresenta il componente colore corrispondente di un colore RGB:
```
RGB (c00c, 0000, 0000)
```
Troncare ciascuno degli argomenti da destra fino a due caratteri

Che dà il seguente risultato:

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

Ecco un esempio che dimostra l' bgcolorattributo in azione, per produrre questo "fantastico" campione di colori:

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

Espandi frammento

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. Quando la stringa inizia con 9 caratteri, questa volta manteniamo la seconda C quindi finisce nel valore del colore finale.

Inizialmente ho riscontrato questo quando qualcuno ha sottolineato che potresti fare color="crap"e, beh, diventa marrone.

— trattino
fonte

174

Si noti che, nonostante ciò che dice quel post sul blog, quando si arriva a gestire stringhe a 3 caratteri, si duplica ogni carattere, anziché anteporre 0. cioè 0F6diventa #00FF66, no #000F06.

— Aaron Dufour,

634

@usr: l'HTML è costruito intenzionalmente ignorando l'input non valido;)

— Lily Ballard,

59

Puoi anche usare la mia stringa casuale per convertire i colori in css per ottenere il colore per una stringa specifica. Si basa sui 5 passaggi per calcolare il colore della stringa di Jeremy Goodell .

— TimPietrusky

15

Un'opportunità nascosta per la semantica? Potresti creare alcune pagine di errore con questo: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>potresti aggiungere un div con un altro background o qualcosa del genere, quindi non è così esteticamente scioccante.

— Theraot,

32

@Theraot bgcolor="success"è anche un bel green. È interessante notare che si possono ignorare questi colori usando i selettori di attributo / valore CSS (ad es td[bgcolor="chucknorris"] {...}.).

— daiscog,

970

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

Le regole affermano:

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 di 2 caratteri: ch kn ri
mantenere i valori esadecimali e aggiungere 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 risponditori originali che hanno affermato che il colore era #CC0000da allora hanno modificato le loro risposte per includere la correzione.

— Jeremy Goodell
fonte

86

L'ho capito, avevo frainteso alcune delle istruzioni di analisi: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - Perfetto !!

— Jeremy Goodell,

17

Nel caso in cui tu sia interessato, ho pubblicato l'algoritmo in 5 passaggi come AGGIORNAMENTO su una domanda simile che ho pubblicato oggi: stackoverflow.com/questions/12939234/…

— Jeremy Goodell,

18

@TimPietrusky ha creato questo incredibile strumento dimostrativo per nomi a colori casuali. Basta andare qui: randomstringtocsscolor.com e fare clic nella casella e digitare "chucknorris".

— Jeremy Goodell,

4

adamlevinefunziona come da jsfiddle.net/LdyZ8/2959 ma le lettere sono bloccate in ada00e000ecui sono riempite ma ada00e000e00poi ridotte al valore tipico di 6 cifre HEX di [ad]a0[0e]00[0e]00fare così ad0e0e che appare nel jsfiddle sopra.

— Martin,

4

Sarebbe meglio se questa risposta contenesse solo lo stato corrente: la cronologia di questa risposta e le altre risposte appartengono ai riepiloghi e / o ai commenti di modifica.

— Peter Mortensen,

397

La maggior parte dei browser semplicemente ignorerà qualsiasi valore NON esadecimale nella stringa di colore, sostituendo le cifre non esadecimali con zeri.

ChuCknorrissi traduce in c00c0000000. A questo punto, il browser dividere la stringa in tre sezioni uguali, indicando Rosso , Verde e Blu valori: c00c 0000 0000. I bit extra in ciascuna sezione verranno ignorati, il che rende il risultato finale di #c00000colore rossastro.

Nota, questo non si applica all'analisi del colore 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>

Espandi frammento

— Mike Christensen
fonte

7

Anche se sono ancora curioso di sapere perché OP ha detto "in CSS" e non "in HTML" - Forse stanno usando un browser super vecchio o si sbagliano?

— Mike Christensen,

7

Quindi è più che probabile che usi l' bgcolorattributo deprecato .

— animuson

12

I personaggi non validi non vengono ignorati, vengono trattati come 0.

— Tratta bene le tue mod il

5

(Mentre questa risposta potrebbe essere morta) suggerimento: utilizzare invece il colore di sfondo per dimostrare i colori. Il colore del testo è su un'area relativa così piccola che è difficile vedere differenze o somiglianze

— Zoe

304

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

In chucknorris, tutto tranne cnon è un valore esadecimale valido.
Quindi viene convertito in c00c00000000.
Che diventa # c00000 , una sfumatura di rosso.

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

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

— aWebDeveloper
fonte

297

Il motivo è che il browser non riesce a capirlo e prova a tradurlo in qualche modo a ciò che può capire e in questo caso in un valore esadecimale! ...

chucknorrisinizia con il cquale viene riconosciuto il carattere in esadecimale, inoltre sta convertendo tutti i caratteri non riconosciuti in 0!

Quindi chucknorrisin formato esadecimale diventa:, c00c00000000tutti gli altri personaggi diventano 0e crimangono dove sono ...

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

Ma sappiamo che esadecimali validi per RGB sono solo 2 caratteri, significa R: c0, G: 00, B:00

Quindi il vero risultato è:

bgcolor="#c00000";

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

— Alireza
fonte

23

Questa è una spiegazione così carina: D: D: D

— Dominik Bucher,

2

Una spiegazione così saggia, molto semplice e diretta che abbia mai sperimentato

— Saurin Vala,

1

risposta molto creativa :)

— ahmednawazbutt

222

Le specifiche HTML WHATWG hanno l'algoritmo esatto per analizzare un valore di colore legacy: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

Il codice Netscape Classic utilizzato per l'analisi delle stringhe di colore è 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 spostato in un numero intero a 32 bit senza verificare l'overflow . Solo otto cifre esadecimali si adattano a 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 troncate 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 ciò che è definito nelle specifiche, ma l'unica differenza è che ci sono alcune righe di codice. Penso che siano state aggiunte queste righe (in Netscape 4):

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

— Yuhong Bao
fonte

Grazie, mi hai mostrato dove si trova il vecchio codice sorgente di Netscape ... perché è così difficile da trovare?

— kb1000 il

202

Risposta:

Il browser proverà a convertire i chucknorris in un valore esadecimale.
Poiché cè l'unico carattere esadecimale valido in chucknorris , il valore si trasforma in: c00c00000000( 0 per tutti i valori che non erano validi ).
Il browser quindi si divide il risultato in 3 groupds: 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 c00000cui è un colore rosso mattone.

— Webeng
fonte

22

chucknorris inizia con c e il browser lo legge in un valore esadecimale.

Perché A, B, C, D, E e F sono caratteri in esadecimali .

Il browser converte chucknorrisin un valore esadecimale, C00C00000000.

Quindi il C00C00000000valore esadecimale viene convertito in formato RGB (diviso per 3):

C00C00000000 => R:C00C, G:0000, B:0000

Il browser richiede solo due cifre per indicare il colore:

R:C00C, G:0000, B:0000=> R:C0, G:00, B:00=>C00000

Infine, mostra bgcolor = C00000nel browser web.

Ecco un esempio che lo dimostra:

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

Espandi frammento

— sameera lakshitha
fonte

15

Le regole per l'analisi dei colori sugli attributi legacy comportano passaggi aggiuntivi rispetto a quelli menzionati nelle risposte esistenti. Il componente troncato nella parte a 2 cifre è descritto come:

Scarta tutti i personaggi tranne gli ultimi 8
Elimina gli zeri iniziali uno per uno , purché tutti i componenti abbiano uno zero iniziale
Scarta tutti i personaggi tranne i primi 2

Qualche esempio:

oooFoooFoooF
000F 000F 000F                <- replace, pad and chunk
0F 0F 0F                      <- leading zeros truncated
0F 0F 0F                      <- truncated to 2 characters from right

oooFooFFoFFF
000F 00FF 0FFF                <- replace, pad and chunk
00F 0FF FFF                   <- leading zeros truncated
00 0F FF                      <- truncated to 2 characters from right

ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- replace, pad and chunk
BC000000 BC000000 BC000000    <- truncated to 8 characters from left
BC BC BC                      <- truncated to 2 characters from right

AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- replace, pad and chunk
0C000000 0C000000 0C000000    <- truncated to 8 characters from left
C000000 C000000 C000000       <- leading zeros truncated
C0 C0 C0                      <- truncated to 2 characters from right

Di seguito è una parziale implementazione dell'algoritmo. Non gestisce errori o casi in cui l'utente inserisce un colore valido.

Mostra snippet di codice

function parseColor(input) {
  // todo: return error if input is ""
  input = input.trim();
  // todo: return error if input is "transparent"
  // todo: return corresponding #rrggbb if input is a named color
  // todo: return #rrggbb if input matches #rgb
  // todo: replace unicode code points greater than U+FFFF with 00
  if (input.length > 128) {
    input = input.slice(0, 128);
  }
  if (input.charAt(0) === "#") {
    input = input.slice(1);
  }
  input = input.replace(/[^0-9A-Fa-f]/g, "0");
  while (input.length === 0 || input.length % 3 > 0) {
    input += "0";
  }
  var r = input.slice(0, input.length / 3);
  var g = input.slice(input.length / 3, input.length * 2 / 3);
  var b = input.slice(input.length * 2 / 3);
  if (r.length > 8) {
    r = r.slice(-8);
    g = g.slice(-8);
    b = b.slice(-8);
  }
  while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") {
    r = r.slice(1);
    g = g.slice(1);
    b = b.slice(1);
  }
  if (r.length > 2) {
    r = r.slice(0, 2);
    g = g.slice(0, 2);
    b = b.slice(0, 2);
  }
  return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0");
}

$(function() {
  $("#input").on("change", function() {
    var input = $(this).val();
    var color = parseColor(input);
    var $cells = $("#result tbody td");
    $cells.eq(0).attr("bgcolor", input);
    $cells.eq(1).attr("bgcolor", color);

    var color1 = $cells.eq(0).css("background-color");
    var color2 = $cells.eq(1).css("background-color");
    $cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1);
    $cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2);
  });
});

body { font: medium monospace; }
input { width: 20em; }
table { table-layout: fixed; width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<p><input id="input" placeholder="Enter color e.g. chucknorris"></p>
<table id="result">
  <thead>
    <tr>
      <th>Left Color</th>
      <th>Right Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Espandi frammento

— Salman A
fonte