Frage Warum denkt HTML, dass "Chucknorris" eine Farbe ist?


Wie kommt es, dass bestimmte zufällige Strings Farben erzeugen, wenn sie als Hintergrundfarben in HTML eingegeben werden? Beispielsweise:

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

... erzeugt ein Dokument mit einem roter Hintergrund über alle Browser und Plattformen hinweg.

Interessant, während chucknorri produziert auch einen roten Hintergrund, chucknorr erzeugt einen gelben Hintergrund.

Was ist los Hier?


6540
2017-11-29 22:54


Ursprung


Antworten:


Es ist ein Überbleibsel aus den Netscape-Tagen:

Fehlende Ziffern werden als 0 behandelt [...]. Eine falsche Ziffer wird einfach als 0 interpretiert. Zum Beispiel sind die Werte # F0F0F0, F0F0F0, F0F0F, #FxFxFx und FxFxFx alle gleich.

Es ist aus dem Blogpost Ein wenig über die Farbanalyse von Microsoft Internet Explorer die es sehr detailliert abdeckt, einschließlich unterschiedlicher Längen von Farbwerten usw.

Wenn wir die Regeln nacheinander aus dem Blogpost anwenden, erhalten wir Folgendes:

  1. Ersetzen Sie alle nicht gültigen hexadezimalen Zeichen durch Nullen

    chucknorris becomes c00c0000000
    
  2. Auf die nächste Gesamtzahl von Zeichen aufteilen, die durch 3 teilbar sind (11 -> 12)

    c00c 0000 0000
    
  3. Aufteilen in drei gleiche Gruppen, wobei jede Komponente die entsprechende Farbkomponente einer RGB-Farbe darstellt:

    RGB (c00c, 0000, 0000)
    
  4. Kürzen Sie jedes der Argumente von rechts nach unten auf zwei Zeichen

Was zu folgendem Ergebnis führt:

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

Hier ist ein Beispiel, das das zeigt bgcolor Attribut in Aktion, um dieses "erstaunliche" Farbfeld zu erzeugen:

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

Dies beantwortet auch den anderen Teil der Frage; warum tut bgcolor="chucknorr" eine gelbe Farbe erzeugen? Nun, wenn wir die Regeln anwenden, lautet die Zeichenfolge:

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

Das gibt eine hellgelbe Goldfarbe. Da die Zeichenfolge als 9 Zeichen beginnt, behalten wir das zweite C dieses Mal bei, daher endet es im endgültigen Farbwert.

Ich bin dem ursprünglich begegnet, als jemand darauf hinwies, dass du es tun könntest color="crap" und, nun, es kommt braun hervor.


6041
2017-11-30 21:53



Es tut mir leid zu widersprechen, aber nach den Regeln für die Analyse eines Legacy-Farbwerts von @ Yuhong Bao, chucknorris NICHT gleichzusetzen mit #CC0000, sondern eher zu #C00000, eine sehr ähnliche, aber etwas andere rote Farbe. Ich habe das benutzt Firefox ColorZilla-Add-on um dies zu überprüfen.

Die Regeln lauten:

  • Machen Sie die Zeichenkette eine Länge, die ein Vielfaches von 3 ist, indem Sie 0s hinzufügen: chucknorris0
  • Trennen Sie die Zeichenfolge in 3 gleich lange Zeichenfolgen: chuc knor ris0
  • trunkiere jede Zeichenkette auf 2 Zeichen: ch kn ri
  • behalte die Hex-Werte und füge Nullen hinzu, falls nötig: C0 00 00

Ich konnte diese Regeln verwenden, um die folgenden Strings korrekt zu interpretieren:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle 

AKTUALISIEREN: Die ursprünglichen Beantworter, die die Farbe sagten, waren #CC0000 haben seitdem ihre Antworten bearbeitet, um die Korrektur einzuschließen.


826
2017-10-17 17:55



Die meisten Browser ignorieren einfach alle NON-hex-Werte in Ihrer Farbzeichenfolge, indem Sie Nicht-Hexadezimalziffern durch Nullen ersetzen.

ChuCknorris wird übersetzt in c00c0000000. An dieser Stelle teilt der Browser die Zeichenkette in drei gleiche Abschnitte auf, die anzeigen rot, Grün und Blau Werte: c00c 0000 0000. Zusätzliche Bits in jedem Abschnitt werden ignoriert, was das Endergebnis ergibt #c00000 Das ist eine rötliche Farbe.

Beachten Sie, dies tut nicht auf CSS-Farbanalyse anwenden, die dem CSS-Standard folgen.

<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



Der Browser versucht zu konvertieren chucknorris in Hex-Farbcode, weil es kein gültiger Wert ist.

  1. Im chucknorris, alles außer c ist kein gültiger Hexadezimalwert.
  2. So wird es umgewandelt in c00c00000000.
  3. Was wird # c00000, ein Schatten von Rot.

Dies scheint in erster Linie ein Problem zu sein Internet Explorer und Oper (12), da sowohl Chrome (31) als auch Firefox (26) dies einfach ignorieren.

P.S. Die Zahlen in Klammern sind die Browserversionen, die ich getestet habe.

.

Auf eine leichtere Note

Chuck Norris entspricht nicht den Webstandards. Webstandards entsprechen   zu ihm. # BADA55


219
2017-11-30 14:05



Die WHATWG-HTML-Spezifikation enthält den genauen Algorithmus zum Analysieren eines Legacy-Farbwerts: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

Der Code Netscape Classic, der zum Parsen von Farbzeichenfolgen verwendet wird, ist Open Source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Beachten Sie beispielsweise, dass jedes Zeichen als Hexadezimalwert analysiert und dann in eine 32-Bit-Ganzzahl verschoben wird ohne auf Überlauf zu prüfen. Nur acht Hexadezimalziffern passen in eine 32-Bit-Ganzzahl, weshalb nur die letzten 8 Zeichen berücksichtigt werden. Nach dem Parsing der Hexadezimalziffern in 32-Bit-Ganzzahlen werden sie dann in 8-Bit-Ganzzahlen abgeschnitten, indem sie durch 16 geteilt werden, bis sie in 8-Bit passen, weshalb führende Nullen ignoriert werden.

Update: Dieser Code stimmt nicht genau mit dem überein, was in der Spezifikation definiert ist, aber der einzige Unterschied besteht darin, dass einige Zeilen Code vorhanden sind. Ich denke, dass diese Zeilen hinzugefügt wurden (in Netscape 4):

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

186
2017-09-27 22:01



Antworten: 

  • Der Browser versucht zu konvertieren Chuck Norris in einen hexadezimalen Wert.
  • Schon seit c ist das einzige gültige Hex-Zeichen in Chuck Norris, der Wert wird zu: c00c00000000(0 für alle ungültigen Werte).
  • Der Browser teilt das Ergebnis dann in 3 Gruppen auf: Red = c00c, Green = 0000, Blue = 0000.
  • Da gültige Hex-Werte für HTML-Hintergründe nur 2 Ziffern für jeden Farbtyp enthalten (r, G, b), werden die letzten 2 Ziffern von jeder Gruppe abgeschnitten, was einen rgb-Wert von c00000 Das ist eine ziegelrötlich getönte Farbe.

166
2018-05-24 05:18



Der Grund ist der Browser kann nicht verstehen es und versuchen Sie es irgendwie zu übersetzen, was es verstehen kann und in diesem Fall in einen hexadezimalen Wert!

chucknorris beginnt mit c welches Zeichen in Hexadezimalzeichen erkannt wird, konvertiert auch alle nicht erkannten Zeichen in 0!

Damit chucknorris im hexadezimalen Format wird: c00c00000000, alle anderen Charaktere werden 0 und c bleibt wo sie sind ...

Jetzt werden sie durch 3 geteilt für RGB(rot grün blau)... R: c00c, G: 0000, B:0000...

Aber wir wissen, gültige Hexadezimal für RGB ist nur 2 Zeichen, bedeutet R: c0, G: 00, B:00

Das wahre Ergebnis ist also:

bgcolor="#c00000";

Ich habe auch die Schritte im Bild als Kurzreferenz hinzugefügt:

Why does HTML think “chucknorris” is a color?


133
2017-07-01 04:08



Chuck Norris ist Statistiken mit c Der Browser liest einen hexadezimalen Wert ein.

weil a, b, c, d, e, f sind Zeichen in Hexadezimalzahl

Der Browser chucknorris konvertieren zu c00c00000000 Hexadezimalwert.

Dann c00c00000000 Hexadezimalwert umwandeln in RGB Format (dividiert durch 3)

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

Der Browser benötigt nur zwei Ziffern, um die Farbe anzuzeigen.

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

endlich zeigen bgcolor = c00000 im Webbrowser.

Hier ist ein Beispiel, das demonstriert

<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