Pourquoi certaines chaînes de caractères aléatoires produisent-elles des couleurs lorsqu'elles sont saisies comme couleurs d'arrière-plan en HTML ?
Par exemple, le code suivant permet d'obtenir une page avec une page fond rouge sur tous les navigateurs et toutes les plateformes :
<body bgcolor="chucknorris"> test </body>D'autre part, la valeur chucknorr produit un fond jaune ¡!
Qu'est-ce qui se passe ici ?
C'est un vestige de l'époque de Netscape :
Les chiffres manquants sont traités comme des 0[...]. Un chiffre incorrect est simplement interprété comme 0. Par exemple, les valeurs #F0F0F0, F0F0F0, F0F0F, #FxFxFx et FxFxFx sont toutes identiques.
Il s'agit de l'article du blog Un petit coup de gueule sur l'analyse des couleurs de Microsoft Internet Explorer qui le couvre de manière très détaillée, y compris les longueurs variables des valeurs de couleur, etc.
Si nous appliquons tour à tour les règles de l'article du blog, nous obtenons ce qui suit :
Remplacer tous les caractères hexadécimaux non valides par des 0 :
chucknorris becomes c00c0000000Remplir jusqu'au prochain nombre total de caractères divisible par 3 (11 → 12) :
c00c 0000 0000Répartis en trois groupes égaux, chaque composant représentant la composante correspondante d'une couleur RVB :
RGB (c00c, 0000, 0000)Tronquez chacun des arguments de droite à deux caractères.
Ce qui, finalement, donne le résultat suivant :
RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)Voici un exemple démontrant la bgcolor en action, pour produire cet échantillon de couleur "étonnant" :
<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 est-ce que bgcolor="chucknorr" produisent 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 jaune or clair. Comme la chaîne commence par 9 caractères, nous gardons le deuxième "C" cette fois-ci, ce qui fait qu'il se retrouve dans la valeur finale de la couleur.
J'ai rencontré ce problème à l'origine lorsque quelqu'un m'a fait remarquer qu'on pouvait faire color="crap" et, eh bien, ça ressort brun.
Je suis désolé de ne pas être d'accord, mais d'après les règles d'analyse d'une valeur de couleur héritée postées par @Yuhong Bao , chucknorris N'équivaut 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 ColorZilla de Firefox pour le vérifier.
Les règles stipulent :
chucknorris0
chuc knor ris0
ch kn ri
C0 00 00
J'ai pu utiliser ces règles pour interpréter correctement les chaînes de caractères suivantes :
LuckyCharmsLuckLuckBeALadyLuckBeALadyTonightGangnamStyleUPDATE : Les premiers répondants qui ont dit que la couleur était #CC0000 ont depuis édité leurs réponses pour inclure la correction.
La plupart des navigateurs ignorent tout simplement les valeurs NON-hex dans votre chaîne de couleurs, remplaçant les chiffres non-hex par des zéros.
ChuCknorris se traduit par c00c0000000 . À ce stade, le navigateur divisera la chaîne en trois sections égales, en indiquant Rouge , Vert y Bleu valeurs : c00c 0000 0000 . Les bits supplémentaires dans chaque section seront ignorés, ce qui rend le résultat final #c00000 qui est de couleur rougeâtre.
Notez que cela ne no s'appliquent à 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>
Le navigateur essaie de convertir chucknorris en code couleur hex, car ce n'est pas une valeur valide.
chucknorris tout, sauf c n'est pas une valeur hexagonale valide.c00c00000000 .Cela semble être un problème principalement avec Internet Explorer y Opéra (12) car Chrome (31) et Firefox (26) l'ignorent.
P.S. Les chiffres entre parenthèses correspondent aux versions du navigateur sur lesquelles j'ai effectué les tests.
Sur une note plus légère
Chuck Norris ne se conforme pas aux standards du web. Les standards du web se conforment à lui. #BADA55
J'ai testé cela sur Firefox 26 et cela fonctionne donc je ne pense pas que votre référence soit correcte. En outre, à partir du lien suivant scrappy-do.blogspot.com/2004/08/ vous verrez qu'il a été hérité de Netscape et qu'il n'est donc pas spécifique à Internet Explorer ou Opera !
La spécification HTML WHATWG contient l'algorithme exact pour analyser une valeur de couleur ancienne : https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value .
Le code utilisé par Netscape Classic pour analyser les chaînes de couleur est open source : https://github.com/zii/netscape/blob/master/lib/layout/layimage.c#L150 .
Par exemple, remarquez que chaque caractère est analysé comme un chiffre hexadécimal, puis est décalé dans un entier de 32 bits. sans vérifier le débordement . Seuls huit chiffres hexagonaux tiennent dans un entier de 32 bits, c'est pourquoi seuls les huit 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 tiennent dans 8 bits, c'est pourquoi les zéros de 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 c'est ces lignes qui ont été ajoutés (dans Netscape) :
if (bytes_per_val > 4)
{
bytes_per_val = 4;
} Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
216 votes
À titre d'information, n'utilisez pas
bgcolor. Utiliser CSSbackground.154 votes
@masterFly : Je ne sais pas pourquoi mon commentaire sous la réponse acceptée a été supprimé pour être "non constructif", car il répond assez bien à votre question : les gens expérimentent ces choses tout le temps. Je n'avais que 10 ans quand j'ai découvert cela et tout ce que je faisais à l'époque était de m'amuser et de voir ce qui se passait. Il n'est pas toujours nécessaire d'avoir une raison pratique pour faire quelque chose, surtout quelque chose d'aussi frivole que ça.
17 votes
@pyb : Cette chose est déjà une blague de Chuck Norris à elle seule, tu ne crois pas ?