Question Pourquoi HTML pense "chucknorris" est une couleur?


Comment se fait-il que certaines chaînes aléatoires produisent des couleurs lorsqu'elles sont entrées en tant que couleurs d'arrière-plan en HTML? Par exemple:

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

... produit un document avec un fond rouge à travers tous les navigateurs et les plates-formes.

Fait intéressant, alors que chucknorri produit également un fond rouge, chucknorr produit un fond jaune.

Que se passe-t-il ici?


6540
2017-11-29 22:54


origine


Réponses:


C'est un vestige des jours de Netscape:

Les chiffres manquants sont traités comme 0 [...]. Un chiffre incorrect est simplement interprété comme 0. Par exemple, les valeurs # F0F0F0, F0F0F0, F0F0F, #FxFxFx et FxFxFx sont toutes les mêmes.

C'est à partir du blog Un peu de diatribe à propos de l'analyse des couleurs de Microsoft Internet Explorer ce qui le couvre de manière très détaillée, y compris des longueurs variables de valeurs de couleur, etc.

Si nous appliquons les règles à partir de l'article du blog, nous obtenons ce qui suit:

  1. Remplacer tous les caractères hexadécimaux non valides par 0

    chucknorris becomes c00c0000000
    
  2. Passer au nombre total de caractères suivant divisible par 3 (11 -> 12)

    c00c 0000 0000
    
  3. Séparer en trois groupes égaux, chaque composant représentant le composant couleur correspondant d'une couleur RVB:

    RGB (c00c, 0000, 0000)
    
  4. Tronquer chacun des arguments de la droite à deux caractères

Ce qui donne le résultat suivant:

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

Voici un exemple démontrant la bgcolor attribut en action, pour produire cet échantillon de couleur "incroyable":

<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 bgcolor="chucknorr" produire une couleur jaune? Eh bien, si nous appliquons les règles, la chaîne est:

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

Ce qui donne une couleur or jaune clair. Comme la chaîne commence par 9 caractères, nous gardons le second C cette fois-ci, donc il finit dans la valeur de couleur finale.

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


6041
2017-11-30 21:53



Je suis désolé d'être en désaccord, mais selon les règles pour l'analyse d'une valeur de couleur héritée posté par @Yuhong Bao, chucknorris NE correspond pas à #CC0000, mais plutôt #C00000, une teinte de rouge très similaire mais légèrement différente. J'ai utilisé le Module complémentaire Firefox ColorZilla pour vérifier cela.

Les règles énoncent:

  • rend la chaîne d'une longueur multiple de 3 en ajoutant 0s: chucknorris0
  • séparer la chaîne en 3 chaînes de longueur égale: chuc knor ris0
  • tronque chaque chaîne à 2 caractères: ch kn ri
  • Gardez les valeurs hexadécimales et ajoutez des 0 si nécessaire: C0 00 00

J'ai été capable d'utiliser ces règles pour interpréter correctement les chaînes suivantes:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle 

METTRE À JOUR: Les répondeurs originaux qui ont dit que la couleur était #CC0000 ont depuis édité leurs réponses pour inclure la correction.


826
2017-10-17 17:55



La plupart des navigateurs ignorent simplement les valeurs non hexadécimales de votre chaîne de couleur, en remplaçant les chiffres non hexadécimaux par des zéros.

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

Notez, cela fait ne pas appliquer à l'analyse des couleurs CSS, qui suivent la norme 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>


337
2017-11-29 23:01



Le navigateur tente de convertir chucknorris en code couleur hexadécimal, car ce n'est pas une valeur valide.

  1. Dans chucknorris, tout sauf c n'est pas une valeur hexadécimale valide.
  2. Donc, il est converti en c00c00000000.
  3. Ce qui devient # c00000, une nuance de rouge.

Cela semble être un problème principalement avec Internet Explorer et Opéra (12) comme Chrome (31) et Firefox (26) l'ignorent tout simplement.

P.S. Les chiffres entre parenthèses correspondent aux versions de navigateur que j'ai testées.

.

Sur une note plus légère

Chuck Norris n'est pas conforme aux standards du web. Normes Web conformes   à lui. # BADA55


219
2017-11-30 14:05



La spécification HTML WHATWG a l'algorithme exact pour l'analyse d'une valeur de couleur héritée: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

Le code Netscape Classic utilisé pour analyser les chaînes de couleur est open source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Par exemple, notez que chaque caractère est analysé comme un nombre hexadécimal, puis est déplacé dans un entier de 32 bits sans vérifier le débordement. Seuls huit chiffres hexadécimaux correspondent à un entier de 32 bits, c'est pourquoi seuls les 8 derniers caractères sont pris en compte. Après avoir analysé les chiffres hexadécimaux en entiers de 32 bits, ils sont ensuite tronqués en entiers de 8 bits en les divisant par 16 jusqu'à ce qu'ils correspondent à 8 bits, ce qui explique pourquoi les zéros en tête sont ignorés.

Mise à jour: ce code ne correspond pas exactement à ce qui est défini dans la spécification, mais la seule différence réside dans quelques lignes de code. Je pense que ce sont ces lignes qui ont été ajoutées (dans Netscape 4):

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

186
2017-09-27 22:01



Répondre: 

  • Le navigateur va essayer de convertir Chuck Norris en une valeur hexadécimale.
  • Depuis c est le seul caractère hexadécimal valide Chuck Norris, la valeur devient: c00c00000000(0 pour toutes les valeurs non valides).
  • Le navigateur divise alors le résultat en 3 groupes: Red = c00c, Green = 0000, Blue = 0000.
  • Les valeurs hexadécimales valides pour les arrière-plans html ne contiennent que deux chiffres pour chaque type de couleur (r, g, b), les 2 derniers chiffres sont tronqués de chaque groupe, laissant une valeur rgb de c00000 qui est une couleur tonique brique-rougeâtre.

166
2018-05-24 05:18



La raison en est le navigateur peut ne pas comprendre et essayez de le traduire en quelque sorte à ce qu'il peut comprendre et dans ce cas en une valeur hexadécimale!

chucknorris commence avec c qui est un caractère reconnu en hexadécimal, et convertit tous les caractères non reconnus en 0!

Alors chucknorris en format hexadécimal devient: c00c00000000, tous les autres personnages deviennent 0 et c reste où ils sont ...

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

Mais nous savons que l'hexadécimal valide pour RVB est seulement 2 caractères, signifie R: c0, G: 00, B:00

Donc le vrai résultat est:

bgcolor="#c00000";

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

Why does HTML think “chucknorris” is a color?


133
2017-07-01 04:08



Chuck Norris est stats avec c le navigateur lit une valeur hexadécimale.

parce que a, b, c, d, e, f sont caractères en hexadécimal

Le navigateur chucknorris convertir en c00c00000000 valeur hexadécimale.

alors c00c00000000 valeur hexadécimale convertie en RVB format (divisé par 3)

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

Le navigateur n'a besoin que de 2 chiffres pour indiquer la couleur.

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

enfin, montrer bgcolor = c00000 dans le navigateur Web.

Voici un exemple démontrant

<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