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ère – plan 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:
Remplace tous les caractères hexadécimaux non valides par des 0
chucknorris becomes c00c0000000
Tapez sur le nombre total de caractères divisible par 3 (11 -> 12)
c00c 0000 0000
Diviser en trois groupes égaux, chaque composant représentant la composante de couleur correspondante d’une couleur RVB:
RGB (c00c, 0000, 0000)
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:
chucknorris0
chuc knor ris0
ch kn ri
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.
chucknorris
, tout sauf c
n’est pas une valeur hexadécimale valide. c00c00000000
. 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:
c
est le seul caractère hexadécimal valide dans chucknorris , la valeur devient: c00c00000000
( 0 pour toutes les valeurs non valides ). Red = c00c
, Green = 0000
, Blue = 0000
. 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:
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