Pourquoi HTML pense-t-il que «chucknorris» est une couleur?

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

 test  

… produit un document avec un arrièreplan rouge sur tous les navigateurs et plates-formes.

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

Que se passe-t-il ici ?

C’est un vestige des jours 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 identiques.

C’est à partir de l’article de blog Un petit coup de gueule sur l’parsing des couleurs de Microsoft Internet Explorer qui la couvre en détail, y compris les différentes longueurs de couleurs, etc.

Si nous appliquons les règles à tour de rôle à partir de l’article du blog, nous obtenons les éléments suivants:

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

     chucknorris becomes c00c0000000 
  2. Tapez sur le nombre total de caractères divisible par 3 (11 -> 12)

     c00c 0000 0000 
  3. Diviser en trois groupes égaux, chaque composant représentant la composante de couleur correspondante 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 l’atsortingbut bgcolor en action, pour produire ce nuancier “incroyable”:

 
chuck norris Mr T ninjaturtle
sick crap grass

Je suis désolé de ne pas être d’accord, mais selon les règles pour parsingr une valeur de couleur héritée publiée 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é l’ add-on Firefox ColorZilla pour le vérifier.

Les règles énoncent:

  • faire de la chaîne une longueur qui soit un multiple de 3 en ajoutant des 0: chucknorris0
  • séparer la chaîne en 3 chaînes de même longueur: chuc knor ris0
  • tronquer chaque chaîne en 2 caractères: ch kn ri
  • conservez les valeurs hexadécimales et ajoutez les 0 si nécessaire: C0 00 00

J’ai pu utiliser ces règles pour interpréter correctement les chaînes suivantes:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

MISE À JOUR: Les répondants d’origine qui ont dit que la couleur était #CC0000 ont depuis modifié leurs réponses pour inclure la correction.

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

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

Notez que cela ne s’applique pas à l’parsing des couleurs CSS, qui suit le standard CSS.

 

Redish

Same as above

Black

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

  1. Dans les 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 principalement un problème avec Internet Explorer et Opera (12), car Chrome (31) et Firefox (26) ignorent cela.

PS Les chiffres entre parenthèses sont les versions de navigateur que j’ai testées.

.

Sur une note plus légère

Chuck Norris n’est pas conforme aux normes Web. Les standards Web sont conformes à lui. # BADA55

La spécification HTML WHATWG dispose de l’algorithme exact pour parsingr 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 parsingr les chaînes de couleurs est open source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Par exemple, notez que chaque caractère est analysé en tant que chiffre hexadécimal, puis déplacé dans un entier de 32 bits sans vérification de dépassement de capacité . Seulement huit chiffres hexadécimaux entrent dans un entier de 32 bits, ce qui explique pourquoi seuls les 8 derniers caractères sont pris en compte. Après avoir analysé les chiffres hexadécimaux en nombres entiers de 32 bits, ils sont ensuite tronqués en nombres entiers de 8 bits en les divisant par 16 jusqu’à ce qu’ils s’intègrent en 8 bits, ce qui explique pourquoi les zéros de gauche 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; } 

Répondre:

  • Le navigateur essaiera de convertir les chucknorris en une valeur hexadécimale.
  • Comme c est le seul caractère hexadécimal valide dans chucknorris , la valeur devient: c00c00000000 ( 0 pour toutes les valeurs non valides ).
  • Le navigateur divise ensuite le résultat en 3 groupes: Red = c00c , Green = 0000 , Blue = 0000 .
  • Puisque les valeurs hexadécimales valides pour les arrière-plans html ne contiennent que 2 chiffres pour chaque type de couleur ( r , g , b ), les 2 derniers chiffres sont tronqués de chaque groupe, ce qui laisse une valeur rgb de c00000 .

La raison en est que le navigateur ne peut pas le comprendre et essayer de le traduire d’une manière ou d’une autre en ce qu’il peut comprendre et, dans ce cas, en une valeur hexadécimale!

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

Donc chucknorris au format hexadécimal devient: c00c00000000 , tous les autres caractères deviennent 0 et c rest où ils sont …

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

Mais nous soaps que l’hexadécimal valide pour RGB ne contient que 2 caractères, ce qui signifie que R: c0, G: 00, B:00

Le vrai résultat est donc:

 bgcolor="#c00000"; 

J’ai également ajouté les étapes de l’image comme référence rapide:

Pourquoi HTML pense-t-il que «chucknorris» est une couleur?

chucknorris est des stats avec c le navigateur lu dans une valeur hexadécimale.

car a, b, c, d, e, f sont des caractères en hexadécimal

Le navigateur chucknorris convertit en valeur hexadécimale c00c00000000 .

Puis c00c00000000 valeur hexadécimale convertie au format RVB (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, affichez bgcolor = c00000 dans le navigateur Web.

Voici un exemple démontrant

 
chucknorris c00c00000000 c00000