Warum HTML-denken "chucknorris" ist eine Farbe?

Es ist ein überbleibsel aus dem Netscape-Tagen:

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

Ist es aus dem blog-post Ein wenig schimpfen über Microsoft Internet Explorer in der Farbe analysieren, die es deckt sehr detailliert, einschließlich unterschiedlicher Längen der Farbwerte, etc.

Wenn wir die Regeln wiederum aus dem blog-post, erhalten wir die folgenden:

1. Ersetzen Sie alle ungültige hexadezimal-Zeichen mit 0

   chucknorris becomes c00c0000000

2. Pad raus auf die nächste Gesamtzahl der Zeichen, die durch 3 teilbar (11 -> 12)

   c00c 0000 0000

3. Aufgeteilt in drei gleich große Gruppen, wobei jede Komponente, die den entsprechenden Farbkomponenten des RGB-Farbe:

   RGB (c00c, 0000, 0000)

4. Abschneiden jedes der Argumente von rechts zwei Zeichen

Gibt das folgende Ergebnis:

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

Hier ist ein Beispiel, das die bgcolor Attribut in Aktion, um dieses "amazing" - Farbmuster:

HTML:

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

Diese auch Antworten, die den anderen Teil der Frage; warum bgcolor="chucknorr" produzieren eine gelbe Farbe? Gut, wenn wir die Regeln anwenden, wird die Zeichenfolge:

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

Gibt ein helles gelb-gold Farbe. Als der string beginnt als 9 Zeichen, wir halten an dem zweiten C diese Zeit, um sich damit landet es in den endgültigen Farbwert.

Ich ursprünglich festgestellt, wenn jemand darauf hingewiesen, die Sie tun könnten color="crap" und naja, es kommt heraus, Braun.

Meisten Browser ignorieren Sie einfach alle NICHT-hex-Werte in deiner Farbe-Zeichenfolge, die Substitution nicht-hex-Ziffern mit Nullen.

ChuCknorris übersetzt c00c0000000. An diesem Punkt, der browser teilt die Zeichenfolge in drei gleiche Abschnitte, was darauf hinweist Rot, Grün und Blau Werte: c00c 0000 0000. Extra-bits in jedem Abschnitt wird ignoriert, das macht das Endergebnis #c00000 die eine rötliche Farbe.

Beachten, dies gilt nicht gelten für CSS-Farb-Analyse, welche Folgen der CSS-standard.

HTML:

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

Der Grund ist, der browser kann nicht verstehen und versuchen, Sie irgendwie zu übersetzen, was Sie verstehen können und in diesem Fall in einen hexadezimalen Wert!...

chucknorris beginnt mit c erkannten Zeichen in hexadezimal, und es wird auch die Konvertierung von allen verkannte die Zeichen in der 0!

So chucknorris im hexadezimal-format wird: c00c00000000 alle anderen Charaktere werden 0 und c bleibt, wo Sie sind...

Jetzt bekommen Sie durch 3 dividiert, für RGB(rot, grün, blau)... R: c00c, G: 0000, B:0000...

Aber wir wissen, gültigen Hexadezimalwert für die RGB-nur 2 Zeichen, bedeutet R: c0, G: 00, B:00

Also das eigentliche Ergebnis ist:

bgcolor="#c00000";

Ich habe auch die Schritte, die in dem Bild als eine Kurzanleitung für Sie:

Antwort:

• Der browser wird versuchen, zu konvertieren chucknorris in einen hexadezimalen Wert.
• Seit c ist die einzige gültige hex-Zeichen in chucknorris, der Wert verwandelt sich in: c00c00000000(0 für alle Werte, die ungültig waren).
• Der browser teilt dann das Ergebnis in 3 groupds: Red = c00c, Green = 0000, Blue = 0000.
• Da gültige hex-Werte für die html-Hintergründe enthalten nur 2 Ziffern für jeden Farb-Typ (r, g, b), die letzten 2 Ziffern sind abgeschnitten von jeder Gruppe, so dass ein rgb-Wert von c00000 was ist ein backstein-rötlich getönten Farbe.

Den Regeln für das Parsen von Farben auf legacy-Attribute umfasst zusätzliche Schritte, als derjenigen, die in bereits vorhandene Antworten. Die truncate-Komponente 2-stellig Teil wird beschrieben als:

1. Verwerfen Sie alle Zeichen mit Ausnahme des letzten 8
2. Verwerfen führenden Nullen nacheinander , solange alle Komponenten, die eine führende null haben
3. Wirf 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

Unten ist eine teilweise Implementierung des Algorithmus. Es behandelt nicht die Fehler oder Fälle, in denen der Benutzer eine gültige Farbe.

JS:

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

CSS:

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

HTML:

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