9 Question: Pourquoi HTML pense-t-il que “chucknorris” est une couleur?

question créée à Sun, Mar 10, 2019 12:00 AM

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

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

... produit un document avec un fond rouge sur tous les navigateurs et toutes les plateformes.

Fait intéressant, bien que chucknorri produise également un fond rouge, chucknorr génère un fond jaune.

Que se passe-t-il ici?

    
7056
  1. Remarque: n'utilisez pas bgcolor. Utilisez CSS background.
    2016-09-04 12: 40: 40Z
  2. Pourquoi voulez-vous jamais ajouter une couleur de fond appelée chucknorris? Quelle était la couleur attendue?
    2016-11-24 05: 01: 13Z
  3. @ 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 très bien à votre question: les gens font des expériences avec ces choses tout le temps. J'avais seulement 10 ans quand j'ai découvert cela et tout ce que je faisais à l'époque était de déconner et de voir ce qui s'était passé. Vous n’avez pas toujours besoin d’une raison pratique pour faire quelque chose, surtout si frivole.
    2016-12-01 03: 36: 11Z
  4. et <body bgcolor="stevensegal"> test < /body > est vert
    2017-10-01 08: 45: 32Z
9 réponses                              9                         

C'est une retenue de l'époque 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 identiques.

C’est tiré du blog Un petit diabolique L'analyse des couleurs de Microsoft Internet Explorer qui le couvre en détail, y compris les longueurs variables des valeurs de couleur, etc.

Si nous appliquons les règles à partir de l'article de blog, nous obtenons les informations suivantes:

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

     
    chucknorris becomes c00c0000000
    
  2. Complétez le nombre total suivant de caractères divisibles par 3 (11 - > 12)

     
    c00c 0000 0000
    
  3. Divisez en trois groupes égaux, chaque composant représentant la composante de couleur correspondante d'une couleur RVB:

     
    RGB (c00c, 0000, 0000)
    
  4. tronque 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'attribut 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>

Ceci répond également à l’autre partie de la question; pourquoi bgcolor="chucknorr" produit-il une couleur jaune? Eh bien, si nous appliquons les règles, la chaîne est la suivante:

 
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 conservons le deuxième C cette fois-ci et finissons donc dans la valeur de couleur finale.

Je l'ai rencontré à l'origine lorsque quelqu'un a fait remarquer que vous pouviez utiliser le color="crap" et que, bien, ça sortait du marron.

    
6511
2016-01-31 12: 08: 56Z
  1. Notez que, malgré ce que dit ce billet de blog, lorsque vous parvenez à gérer des chaînes à 3 caractères, vous dupliquez chaque caractère, plutôt que de les ajouter 0. En d’autres termes, 0F6 devient #00FF66 et non #000F06.
    2013-02-05 20: 32: 22Z
  2. @ usr: le langage HTML est conçu pour ignorer intentionnellement les entrées mal formées;)
    2013-02-0523: 43: 02Z
  3. Vous pouvez également utiliser ma chaîne aléatoire en couleur CSS convertisseur pour obtenir la couleur pour une chaîne spécifique. Il est basé sur les 5 étapes pour calculer la chaîne couleur de Jeremy Goodell .
    2013-03-11 16: 45: 17Z
  4. Une opportunité cachée pour la sémantique? Vous pourriez faire quelques pages d'erreur avec ceci: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span> Vous pouvez ajouter une div avec un autre fond ou quelque chose comme ça, donc ce n'est pas si choquant sur le plan esthétique.
    2013-12-16 22: 47: 35Z
  5. @ Theraot bgcolor="success" est aussi un joli vert. Il est intéressant de noter que les peuvent remplacer ces couleurs à l'aide de sélecteurs d'attributs /valeurs CSS (par exemple, td[bgcolor="chucknorris"] {...}).
    2016-03-01 12: 39: 17Z

Je suis désolé de ne pas être d'accord, mais selon les règles pour l'analyse d'une valeur de couleur héritée publiée par @Yuhong Bao . , chucknorris NE COMPREND 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 le vérifier.

L'état des règles:

  • donne à la chaîne une longueur multiple de 3 en ajoutant des 0: chucknorris0
  • séparez la chaîne en 3 chaînes d'égale longueur: chuc knor ris0
  • tronquer chaque chaîne à 2 caractères: ch kn ri
  • conservez les valeurs hexadécimales et ajoutez des 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

UPDATE: Les répondants ayant déclaré que la couleur était #CC0000 ont depuis modifié leurs réponses pour y inclure la correction.

    
900
2017-10-05 17: 10: 38Z
  1. Je l'ai compris, j'avais mal interprété certaines des instructions d'analyse: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e "- Parfait !!
    2012-10-17 18: 11: 21Z
  2. Si vous êtes intéressé, j'ai posté l'algorithme en 5 étapes en tant que MISE À JOUR sur une question similaire que j'ai postée aujourd'hui: stackoverflow.com/questions /12939234 /…
    2012-10-17 18: 50: 28Z
  3. @ TimPietrusky a créé cet incroyable outil de démonstration pour les noms de couleurs aléatoires. Allez simplement ici: randomstringtocsscolor.com , cliquez dans la case et tapez "chucknorris".
    2014-02-06 19: 01: 38Z
  4. adamlevine fonctionne comme indiqué par jsfiddle.net/LdyZ8 /2959 , mais les lettres sont bloquées dans ada00e000e qui est complétée à ada00e000e00 puis réduite à la valeur HEX à 6 chiffres typique de [ad]a0[0e]00[0e]00, donnant ainsi ad0e0e qui apparaît dans le jsfiddle ci-dessus.
    2016-01-26 22: 26: 26Z
  5. Il serait préférable que cette réponse seulement contienne l'état actuel - l'historique de cette réponse et d'autres réponses appartient à la modification des résumés et /ou des commentaires.
    2016-01-31 12: 13: 22Z

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, en indiquant les valeurs Rouge , Vert et Bleu : c00c 0000 0000. Les bits supplémentaires dans chaque section seront ignorés, ce qui donnera le résultat final #c00000 qui sera une couleur rougeâtre.

Notez que cela ne s'applique pas à l'analyse de couleur CSS, qui respecte 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>
    
365
2014-09-17 16: 09: 13Z
  1. Bien que je sois toujours curieux de savoir pourquoi OP a dit "en CSS" et non "en HTML" - peut-être utilisent-ils un très vieux navigateur, ou sont-ils simplement trompés ?
    2011-11-29 23: 19: 12Z
  2. Il est donc plus que probable qu'il utilise l'attribut obsolète bgcolor.
    2011-11-29 23: 20: 15Z
  3. Les caractères non valides ne sont pas ignorés, ils sont traités comme des 0.
    2012-09-28 03: 30: 30Z
  4. (Tant que cette réponse peut être morte) suggestion: utilisez plutôt la couleur d'arrière-plan pour illustrer les couleurs. La couleur du texte recouvre un si petit espace relatif qu'il est difficile de voir des différences ou des similitudes
    2017-06-07 11: 37: 08Z

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

  1. Dans chucknorris, tout sauf la c n'est pas une valeur hexadécimale valide.
  2. Il est donc converti en c00c00000000 .
  3. Qui devient # c00000 , une nuance de rouge.

Cela semble être un problème principalement avec Internet Explorer et Opera (12), car Chrome (31) et Firefox (26) l'ignorent.

P.S. Les nombres entre parenthèses correspondent aux versions du navigateur sur lesquelles j'ai testé.

.

Sur une note plus légère

  

Chuck Norris ne se conforme pas aux normes Web. Normes Web conformes   à lui. # BADA55

    
272
2018-06-11 06: 08: 02Z

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!

Ainsi, chucknorris au format hexadécimal devient: c00c00000000, tous les autres caractères deviennent 0 et c restent là où ils se trouvent ...

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

Mais nous savons qu'un hexadécimal valide pour RVB ne contient que 2 caractères, soit R: c0, G: 00, B:00

.

Le résultat réel est donc:

 
bgcolor="#c00000";

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

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

    
217
2019-05-28 06: 53: 05Z
  1. C'est une explication si mignonne: D: D: D
    2019-06-09 21: 02: 13Z

La spécification HTML du WHATWG aAlgorithme exact pour l’analyse d’une valeur de couleur existante: https: //html.spec .whatwg.org /multipage /infrastructure.html # règles-pour-analyser-une-valeur-couleur-héritée

Le code utilisé par Netscape Classic 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é sous forme de chiffre hexadécimal, puis transféré dans un entier 32 bits sans vérifier le débordement . Seuls huit chiffres hexadécimaux entrent dans 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 nombres entiers de 32 bits, ils sont ensuite tronqués en nombre de 8 bits en les divisant par 16 jusqu'à ce qu'ils entrent en 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 est qu'il existe 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;
}
    
207
2017-01-26 18: 45: 01Z

Réponse:

  • Le navigateur tentera de convertir chucknorris en une valeur hexadécimale.
  • Etant donné que c est le seul caractère hexadécimal valide dans chucknorris , la valeur devient: c00c00000000 ( 0 pour toutes les valeurs invalides ).
  • Le navigateur divise ensuite le résultat en 3 groupes: Red = c00c, Green = 0000, Blue = 0000.
  • Étant donné que 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 les chiffres de chaque groupe sont tronqués, ce qui laisse une valeur de c00000 en rgb, qui est une couleur rouge brique.
187
2018-06-08 06: 20: 05Z

Chucknorris est une statistique avec c le navigateur lu en valeur hexadécimale.

  

car a, b, c, d, e et f sont caractères hexadécimaux

Le navigateur chucknorris est converti en valeur hexadécimale c00c00000000.

Ensuite, la valeur hexadécimale c00c00000000 est 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

 
<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>
    
12
2018-04-17 19: 16: 30Z
  1. C'est une balise très ancienne.
    2018-08-13 17: 07: 08Z

Les règles d'analyse les couleurs sur les attributs existants impliquent des étapes supplémentaires par rapport à celles mentionnées dans les réponses existantes. La composante tronquée à la partie à 2 chiffres est décrite comme suit:

  1. Supprime tous les caractères sauf les 8 derniers
  2. Supprimez un à un les zéros non significatifs tant que tous les composants ont un zéro non significatif
  3. Supprimez tous les caractères sauf les deux premiers

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 une implémentation partielle de l’algorithme. Il ne gère pas les erreurs ou les cas où l'utilisateur entre une couleur valide.

 
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);
  });
});
body { font: medium monospace; }
input { width: 20em; }
table { table-layout: fixed; width: 100%; }
<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>
    
7
2018-10-17 14: 53: 02Z
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);
  });
});
source placée ici