Pourquoi ne HTML penser “chucknorris” est une couleur?

C'est un vestige de Netscape jours:

Y a pas de chiffres sont traitées comme 0[...]. Un chiffre incorrect est simplement interprété comme 0. Par exemple les valeurs #F0F0F0, F0F0F0, F0F0F, #FxFxFx et FxFxFx sont tous les mêmes.

C'est à partir de l'article du blog Un petit coup de gueule à propos de Microsoft Internet Explorer est la couleur de l'analyse qui couvre en détail, y compris les différentes longueurs des valeurs de couleur, etc.

Si l'on applique les règles à son tour à partir du blog, nous avons d'obtenir les éléments suivants:

1. Non valide, remplacer tous les caractères hexadécimaux avec des 0

   chucknorris becomes c00c0000000

2. Pad à la prochaine nombre total de caractères divisible par 3 (11 -> 12)

   c00c 0000 0000

3. Divisés en trois groupes égaux, chaque composante représente la couleur correspondante composant d'une couleur RVB:

   RGB (c00c, 0000, 0000)

4. Tronquer chacun des arguments de la droite à deux caractères

Qui donne le résultat suivant:

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

Voici un exemple illustrant la bgcolor attribut dans l'action, pour produire cette "incroyable" échantillon de couleur:

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>

Cela répond également à l'autre partie de la question; pourquoi ne bgcolor="chucknorr" produire une couleur jaune? Eh bien, si on applique les règles, la chaîne est:

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

Qui donne une lumière jaune couleur de l'or. Que la chaîne de caractères commence par 9 caractères, nous gardons le deuxième C cette fois-ci donc, il se retrouve dans la dernière valeur de couleur.

J'ai d'abord rencontré quand quelqu'un a fait remarquer que vous pourriez faire color="crap" et, bien, il sort brun.

La plupart des navigateurs ignorent tout simplement les NON-valeurs hexadécimales dans votre chaîne de couleur, la substitution non-hex chiffres avec des zéros.

ChuCknorris se traduit par c00c0000000. À ce stade, le navigateur va diviser la chaîne en trois sections égales, indiquant Rouge, Vert et Bleu valeurs: c00c 0000 0000. Des bits supplémentaires dans chaque section seront ignorés, ce qui rend le résultat final #c00000 qui est d'une couleur rougeâtre.

Remarque, ce n' pas s'appliquent aux couleurs CSS analyse, qui suivent le 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>

La raison en est que le navigateur ne peut pas comprendre et essayer de faire en quelque sorte la traduire de ce qu'il peut comprendre et dans ce cas, la valeur hexadécimale!...

chucknorris commence avec c qui est reconnu caractère en hexadécimal, c'est aussi la conversion de tous les caractères non reconnus dans 0!

Donc chucknorris au format hexadécimal devient: c00c00000000, tous les autres personnages deviennent 0 et c reste à l'endroit où ils sont...

Maintenant ils sont divisés par 3 pour RGB(rouge, vert, bleu)... R: c00c, G: 0000, B:0000...

Mais nous savons hexadécimal valide pour le RVB est à seulement 2 personnages, des moyens R: c0, G: 00, B:00

De sorte que le résultat réel est:

bgcolor="#c00000";

J'ai également ajouté les étapes dans l'image comme une référence rapide pour vous:

Réponse:

• Le navigateur va essayer de convertir chucknorris dans une valeur hexadécimale.
• Depuis c est la seule valable hex caractère dans chucknorris, la valeur se transforme en: c00c00000000(0 pour toutes les valeurs qui étaient invalides).
• Le navigateur, puis divise le résultat en 3 groupds: Red = c00c, Green = 0000, Blue = 0000.
• Depuis valide les valeurs en hexadécimal html milieux contiennent seulement 2 chiffres pour chaque type de couleur (r, g, b), les 2 derniers chiffres sont tronqués de chaque groupe, en laissant une valeur rvb de c00000 qui est une brique rougeâtre tons de couleur.

La règles pour l'analyse des couleurs sur l'héritage des attributs implique des étapes supplémentaires que ceux mentionnés dans les réponses existantes. Le tronquer composant à 2 chiffres de la partie est décrite comme suit:

1. Jeter tous les caractères sauf le dernier 8
2. Jeter les zéros en tête un par un aussi longtemps que tous les composants ont un zéro
3. Jeter tous les caractères sauf les 2 premières

Quelques exemples:

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

Ci-dessous est une mise en œuvre partielle de l'algorithme. Il ne gère pas les erreurs ou les cas où l'utilisateur entre un valide couleur.

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>