Warum glaubt HTML, dass „Chucknorris“ eine Farbe ist?

7487

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

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

Erweitern Sie das Snippet

... erstellt ein Dokument mit rotem Hintergrund für alle Browser und Plattformen.

Interessanterweise wird zwar auch chucknorriein roter Hintergrund chucknorrerzeugt, aber ein gelber Hintergrund.

Was ist denn hier los?

html browser background-color

— user456584
quelle

154

Als Randnotiz: nicht verwenden bgcolor. Verwenden Sie CSS background.

— John Dvorak

47

Warum möchten Sie jemals eine Hintergrundfarbe mit dem Namen hinzufügen chucknorris? Was war die erwartete Farbe?

— MasterFly

106

@masterFly: Ich weiß nicht, warum mein Kommentar unter der akzeptierten Antwort als "nicht konstruktiv" gelöscht wurde, weil er Ihre Frage recht gut beantwortet: Die Leute experimentieren die ganze Zeit mit diesen Dingen. Ich war erst 10 Jahre alt, als ich das entdeckte und alles, was ich damals tat, war herumzuspielen und zu sehen, was passiert ist. Sie müssen nicht immer einen praktischen Grund haben, etwas zu tun, insbesondere etwas so Frivoles wie dieses.

— BoltClock

49

und <body bgcolor="stevensegal">Test </ body> ist grün

— Chris

4

@BenDaggers Bitte lesen Sie den Versionsverlauf, bevor Sie eine weitere Bearbeitung vornehmen. Das CSS- Tag ist irrelevant und wurde bereits zweimal entfernt.

— Leichtigkeitsrennen im Orbit

6878

Es ist ein Überbleibsel aus den Netscape-Tagen:

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

Es ist aus dem Blog-Beitrag. Ein wenig über die Farbanalyse von Microsoft Internet Explorer, die es ausführlich behandelt, einschließlich unterschiedlicher Längen von Farbwerten usw.

Wenn wir die Regeln der Reihe nach aus dem Blog-Beitrag anwenden, erhalten wir Folgendes:

Ersetzen Sie alle nicht gültigen hexadezimalen Zeichen durch Nullen
```
chucknorris becomes c00c0000000
```
Füllen Sie die nächste Gesamtzahl der durch 3 teilbaren Zeichen aus (11 -> 12).
```
c00c 0000 0000
```
In drei gleiche Gruppen aufgeteilt, wobei jede Komponente die entsprechende Farbkomponente einer RGB-Farbe darstellt:
```
RGB (c00c, 0000, 0000)
```
Schneiden Sie jedes der Argumente von rechts auf zwei Zeichen ab

Welches ergibt das folgende Ergebnis:

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

Hier ist ein Beispiel, das das bgcolorAttribut in Aktion demonstriert , 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>

Erweitern Sie das Snippet

Dies beantwortet auch den anderen Teil der Frage; Warum entsteht bgcolor="chucknorr"eine gelbe Farbe? Wenn wir die Regeln anwenden, lautet die Zeichenfolge:

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

Das ergibt eine hellgelbe Goldfarbe. Da die Zeichenfolge mit 9 Zeichen beginnt, behalten wir diesmal das zweite C bei, sodass es im endgültigen Farbwert endet.

Ich bin ursprünglich darauf gestoßen, als jemand darauf hingewiesen hat, dass Sie es tun könnten, color="crap"und nun, es kommt braun heraus.

— Strich
quelle

174

Beachten Sie, dass, trotz allem , was die Blog - Post sagt, wenn Sie Umgang mit 3-Zeichen - Strings erhalten Sie duplizieren jedes Zeichen, anstatt das Voranstellen 0. dh 0F6wird #00FF66, nicht #000F06.

— Aaron Dufour

634

@usr: HTML basiert darauf, absichtlich fehlerhafte Eingaben zu ignorieren;)

— Lily Ballard

59

Sie können auch meinen zufälligen String-CSS-Farbkonverter verwenden , um die Farbe für einen bestimmten String zu erhalten. Es basiert auf den 5 Schritten zur Berechnung der Stringfarbe von Jeremy Goodell .

— TimPietrusky

15

Eine versteckte Gelegenheit zur Semantik? Sie könnten damit einige Fehlerseiten erstellen: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>Sie könnten ein Div mit einem anderen Hintergrund oder ähnlichem hinzufügen, so dass es nicht so ästhetisch schockierend ist.

— Theraot

32

@ Theraot bgcolor="success"ist auch ein schönes Grün. Interessanterweise kann man diese Farben mit CSS-Attribut- / Werteselektoren (z td[bgcolor="chucknorris"] {...}. B. ) überschreiben .

— Daiscog

970

Es tut mir leid, dass ich nicht einverstanden bin, aber gemäß den Regeln für das Parsen eines von @Yuhong Bao veröffentlichten Legacy-Farbwerts entspricht chucknorrisdies NICHT einem sehr ähnlichen, aber etwas anderen Rotton #CC0000, sondern #C00000einem sehr ähnlichen. Ich habe das Firefox ColorZilla-Add-On verwendet , um dies zu überprüfen.

Die Regeln besagen:

Machen Sie die Zeichenfolge zu einer Länge, die ein Vielfaches von 3 ist, indem Sie 0s hinzufügen: chucknorris0
Trennen Sie die Zeichenfolge in 3 Zeichenfolgen gleicher Länge: chuc knor ris0
Schneiden Sie jede Zeichenfolge auf 2 Zeichen ab: ch kn ri
Behalten Sie die Hex-Werte bei und fügen Sie bei Bedarf Nullen hinzu: C0 00 00

Ich konnte diese Regeln verwenden, um die folgenden Zeichenfolgen richtig zu interpretieren:

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

UPDATE: Die ursprünglichen Antwortenden, die sagten, die Farbe sei, #CC0000haben ihre Antworten seitdem so bearbeitet, dass sie die Korrektur enthalten.

— Jeremy Goodell
quelle

86

Ich habe es herausgefunden, ich habe einige der Parsing-Anweisungen falsch interpretiert: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - Perfekt !!

— Jeremy Goodell

17

Falls Sie interessiert sind, habe ich den 5-Schritt-Algorithmus als UPDATE zu einer ähnlichen Frage veröffentlicht, die ich heute gestellt habe: stackoverflow.com/questions/12939234/…

— Jeremy Goodell

18

@TimPietrusky hat dieses verdammt unglaubliche Demo-Tool für zufällige Farbnamen erstellt. Gehen Sie einfach hier: randomstringtocsscolor.com und klicken Sie in das Feld und geben Sie "chucknorris" ein.

— Jeremy Goodell

4

adamlevinefunktioniert gemäß jsfiddle.net/LdyZ8/2959, aber die Buchstaben sind blockiert, in ada00e000edie aufgefüllt, ada00e000e00aber dann auf den typischen 6-stelligen HEX-Wert reduziert wird, [ad]a0[0e]00[0e]00um ad0e0e zu erstellen, der in der obigen jsfiddle erscheint.

— Martin

4

Es wäre besser, wenn diese Antwort nur den aktuellen Status enthalten würde - der Verlauf dieser Antwort und anderer Antworten gehört in die Bearbeitungszusammenfassungen und / oder Kommentare.

— Peter Mortensen

397

Die meisten Browser ignorieren einfach alle NICHT-Hex-Werte in Ihrer Farbzeichenfolge und ersetzen Nicht-Hex-Ziffern durch Nullen.

ChuCknorrisübersetzt in c00c0000000. Zu diesem Zeitpunkt teilt der Browser die Zeichenfolge in drei gleiche Abschnitte auf Werte Rot , Grün und Blau : c00c 0000 0000. Zusätzliche Bits in jedem Abschnitt werden ignoriert, wodurch das Endergebnis #c00000eine rötliche Farbe erhält.

Beachten Sie, dass dies nicht für die CSS-Farbanalyse gilt, die dem CSS-Standard folgt.

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

Erweitern Sie das Snippet

— Mike Christensen
quelle

7

Obwohl ich immer noch neugierig bin, warum OP "in CSS" und nicht "in HTML" sagte - Vielleicht verwenden sie einen super alten Browser oder irren sich einfach?

— Mike Christensen

7

Dann verwendet er höchstwahrscheinlich das veraltete bgcolorAttribut.

— Animuson

12

Ungültige Charaktere werden nicht übersprungen, sie werden als 0 behandelt.

— Behandle deine Mods gut

5

(WÄHREND diese Antwort möglicherweise tot ist) Vorschlag: Verwenden Sie stattdessen die Hintergrundfarbe, um die Farben zu demonstrieren. Textfarbe ist über einem so kleinen relativen Bereich, dass es schwierig ist, Unterschiede oder Ähnlichkeiten zu erkennen

— Zoe

304

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

In chucknorris, alles außerc kein gültiger Hex-Wert.
Also wird es konvertiert zu c00c00000000 .
Welches wird # c00000 , ein Rotton.

Dies scheint vor allem bei Internet Explorer und Opera ein Problem zu sein (12) da sowohl Chrome (31) als auch Firefox (26) dies einfach ignorieren.

PS Die Zahlen in Klammern sind die Browserversionen, mit denen ich getestet habe.

.

Leichter gesagt

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

— aWebDeveloper
quelle

296

Der Grund ist, dass der Browser es nicht verstehen kann und versucht, es irgendwie in das zu übersetzen, was er verstehen kann, und in diesem Fall in einen hexadezimalen Wert! ...

chucknorrisBeginnt damit, cwelches Zeichen hexadezimal erkannt wird, und konvertiert auch alle nicht erkannten Zeichen in0 !

So chucknorrishexadezimal wird: c00c00000000, alle anderen Zeichen werden 0und cbleibt , wo sie sind ...

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

Wir wissen jedoch, dass eine gültige Hexadezimalzahl für RGB nur 2 Zeichen beträgt R: c0, G: 00, B:00

Das eigentliche Ergebnis ist also:

bgcolor="#c00000";

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

— Alireza
quelle

23

Dies ist so süß Erklärung: D: D: D

— Dominik Bucher

2

So weise und sehr einfache und geradlinige Erklärung, die ich je erlebt habe

— Saurin Vala

1

sehr kreative Antwort :)

— ahmednawazbutt

222

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

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

Beachten Sie beispielsweise, dass jedes Zeichen als Hex-Ziffer analysiert und dann in eine 32-Bit-Ganzzahl verschoben wird, ohne auf Überlauf zu prüfen . Nur acht hexadezimale Ziffern passen in eine 32-Bit-Ganzzahl, weshalb nur die letzten 8 Zeichen berücksichtigt werden. Nach dem Parsen der Hex-Ziffern in 32-Bit-Ganzzahlen werden sie 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 in einigen Codezeilen. Ich denke, es sind diese Zeilen, die hinzugefügt wurden (in Netscape 4):

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

— Yuhong Bao
quelle

Danke, Sie haben mir gezeigt, wo der alte Netscape-Quellcode ist ... warum ist es so schwer zu finden?

— kb1000

202

Antworten:

Der Browser versucht, Chucknorris in einen Hexadezimalwert umzuwandeln .
Da dies cdas einzige gültige Hex-Zeichen in Chucknorris ist , wird der Wert zu: c00c00000000( 0 für alle ungültigen Werte ).
Der Browser teilt dann das Ergebnis in 3 groupds: Red = c00c, Green = 0000, Blue = 0000.
Da gültige Hex-Werte für HTML-Hintergründe nur 2 Ziffern für jeden Farbtyp ( r , g , b ) enthalten, werden die letzten 2 Ziffern von jeder Gruppe abgeschnitten, sodass ein RGB-Wert c00000eine ziegelrot getönte Farbe bleibt.

— Webeng
quelle

22

chucknorris beginnt mit c und der Browser liest es in einen hexadezimalen Wert.

Weil A, B, C, D, E und F hexadezimale Zeichen sind .

Der Browser konvertiert chucknorrisin einen Hexadezimalwert C00C00000000.

Dann wird der C00C00000000Hexadezimalwert in das RGB- Format konvertiert (geteilt 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

Zum Schluss bgcolor = C00000im Webbrowser anzeigen.

Hier ist ein Beispiel, das dies 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>

Erweitern Sie das Snippet

— Sameera Lakshitha
quelle

15

Die Regeln zum Parsen von Farben für Legacy-Attribute umfassen zusätzliche Schritte als die in vorhandenen Antworten genannten. Die auf zwei Ziffern abgeschnittene Komponente wird wie folgt beschrieben:

Verwerfe alle Zeichen außer den letzten 8
Verwerfen Sie führende Nullen nacheinander, solange alle Komponenten eine führende Null haben
Verwerfe alle Zeichen außer den ersten 2

Einige Beispiele:

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

Nachfolgend finden Sie eine teilweise Implementierung des Algorithmus. Es werden keine Fehler oder Fälle behandelt, in denen der Benutzer eine gültige Farbe eingibt.

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

— Salman A.
quelle