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

7490

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

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

Développer l'extrait

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

Fait intéressant, tout en chucknorriproduisant également un fond rouge, chucknorrproduit un fond jaune.

Que se passe t-il ici?

html browser background-color

— user456584
source

154

En remarque: ne pas utiliser bgcolor. Utilisez CSS background.

— John Dvorak

48

Pourquoi voulez-vous jamais ajouter une couleur d'arrière-plan appelée chucknorris? Quelle était la couleur attendue?

— masterFly

107

@masterFly: Je ne sais pas pourquoi mon commentaire sous la réponse acceptée a été supprimé pour être "pas constructif", car il répond assez bien à votre question: les gens expérimentent tout le temps avec ces choses. Je n'avais que 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'avoir une raison pratique de faire quelque chose, surtout quelque chose d'aussi frivole que cela.

— BoltClock

49

et <body bgcolor="stevensegal">test </body> est vert

— Chris

4

@BenDaggers Veuillez lire l'historique des révisions avant d'effectuer une autre modification. La balise css n'est pas pertinente et a déjà été supprimée deux fois.

— Courses de légèreté en orbite

6882

C'est un souvenir 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 toutes identiques.

Il s'agit du blog Un petit coup de gueule sur 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 tour à tour à partir du billet de blog, nous obtenons ce qui suit:

Remplacez tous les caractères hexadécimaux non valides par des 0
```
chucknorris becomes c00c0000000
```
Remplissez le nombre total de caractères suivant divisible par 3 (11 -> 12)
```
c00c 0000 0000
```
Divisé en trois groupes égaux, chaque composant représentant le composant de couleur correspondant d'une couleur RVB:
```
RGB (c00c, 0000, 0000)
```
Tronquez chacun des arguments de 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' bgcolorattribut 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>

Développer l'extrait

Cela répond également à l'autre partie de la question; pourquoi bgcolor="chucknorr"produit 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 deuxième C cette fois-ci donc il finit dans la valeur de couleur finale.

J'ai rencontré ce problème à l'origine lorsque quelqu'un m'a dit que vous pouviez le faire color="crap"et, bien, il apparaît brun.

— tiret
source

174

Notez que, en dépit de ce que blog dit, quand vous arrivez à la manipulation des chaînes 3 caractères, vous dupliquer chaque caractère, plutôt que préfixer 0. à- dire 0F6devient #00FF66, non #000F06.

— Aaron Dufour

634

@usr: HTML est construit autour d'ignorer intentionnellement une entrée malformée;)

— Lily Ballard

59

Vous pouvez également utiliser ma chaîne aléatoire au convertisseur de couleur CSS pour obtenir la couleur d'une chaîne spécifique. Il est basé sur les 5 étapes pour calculer la couleur de la chaîne par Jeremy Goodell .

— TimPietrusky

15

Une opportunité cachée pour la sémantique? Vous pouvez faire des pages d'erreur avec ceci: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>vous pouvez ajouter un div avec un autre fond ou quelque chose comme ça, donc ce n'est pas si choquant esthétiquement.

— Theraot

32

@Theraot bgcolor="success"est aussi un joli vert. Fait intéressant, on peut remplacer ces couleurs en utilisant des sélecteurs d'attribut / valeur CSS (par exemple, td[bgcolor="chucknorris"] {...}).

— daiscog

970

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

Les règles stipulent:

faites de la chaîne une longueur qui est un multiple de 3 en ajoutant 0: chucknorris0
séparez la chaîne en 3 chaînes de longueur égale: 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

MISE À JOUR: Les répondeurs d'origine qui ont dit que la couleur était #CC0000depuis ont modifié leurs réponses pour inclure la correction.

— Jeremy Goodell
source

86

Je l'ai compris, j'avais mal interprété certaines des instructions d'analyse: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - Parfait !!

— Jeremy Goodell

17

Si vous êtes intéressé, j'ai publié l'algorithme en 5 étapes en tant que MISE À JOUR sur une question similaire que j'ai publiée aujourd'hui: stackoverflow.com/questions/12939234/…

— Jeremy Goodell

18

@TimPietrusky a créé cet incroyable outil de démonstration pour les noms de couleurs aléatoires. Allez simplement ici: randomstringtocsscolor.com et cliquez dans la case et tapez "chucknorris".

— Jeremy Goodell

4

adamlevinefonctionne selon jsfiddle.net/LdyZ8/2959 mais les lettres sont bloquées dans ada00e000elesquelles est rembourré, ada00e000e00puis réduites à la valeur HEX typique à 6 chiffres, [ad]a0[0e]00[0e]00ce qui rend ad0e0e qui apparaît dans le jsfiddle ci-dessus.

— Martin

4

Il serait préférable que cette réponse ne contienne que l'état actuel - l'historique de cette réponse et d'autres réponses appartient dans les résumés et / ou les commentaires.

— Peter Mortensen

397

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

ChuCknorrisse traduit par c00c0000000. À ce stade, le navigateur va diviser la chaîne en trois parties égales, ce qui indique rouge , vert et bleu valeurs: c00c 0000 0000. Les bits supplémentaires dans chaque section seront ignorés, ce qui donne un résultat final de #c00000couleur rougeâtre.

Remarque, cela ne s'applique pas à l'analyse des couleurs CSS, qui suit 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>

Développer l'extrait

— Mike Christensen
source

7

Bien que je sois toujours curieux de savoir pourquoi OP a dit "en CSS" et non "en HTML" - Peut-être qu'ils utilisent un super vieux navigateur, ou tout simplement se trompent?

— Mike Christensen

7

Il utilise donc plus que probablement l' bgcolorattribut obsolète .

— animuson

12

Les caractères non valides ne sont pas ignorés, ils sont traités comme 0.

— traitez bien vos mods

5

(Bien que cette réponse soit peut-être morte) suggestion: utilisez plutôt la couleur d'arrière-plan pour montrer les couleurs. La couleur du texte est sur une si petite zone relative qu'il est difficile de voir des différences ou des similitudes

— Zoe

304

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

Dans chucknorris, tout sauf cune valeur hexadécimale valide.
Il est donc converti en c00c00000000.
Ce 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.

PS Les chiffres entre parenthèses sont les versions de navigateur sur lesquelles j'ai testé.

.

Sur une note plus légère

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

— aWebDeveloper
source

297

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

chucknorriscommence par le ccaractère reconnu en hexadécimal, il convertit également tous les caractères non reconnus en 0!

Donc chucknorrisau format hexadécimal devient:, c00c00000000tous les autres caractères deviennent 0et crestent 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 n'est que de 2 caractères, ce qui signifie R: c0, G: 00, B:00

Le vrai résultat est donc:

bgcolor="#c00000";

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

— Alireza
source

23

C'est une explication tellement mignonne: D: D: D

— Dominik Bucher

2

Explication si sage et très simple et directe que j'ai jamais vécue

— Saurin Vala

1

réponse très créative :)

— ahmednawazbutt

222

La spécification WHATWG HTML possède l'algorithme exact pour analyser 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 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 est décalé en un entier 32 bits sans vérifier le dépassement . Seuls huit chiffres hexadécimaux tiennent 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 entiers 32 bits, ils sont ensuite tronqués en entiers 8 bits en les divisant par 16 jusqu'à ce qu'ils tiennent en 8 bits, c'est pourquoi les zéros non significatifs 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 y a 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;
}

— Yuhong Bao
source

Merci, vous m'avez montré où se trouve l'ancien code source de Netscape ... pourquoi est-il si difficile à trouver?

— kb1000

202

Réponse:

Le navigateur essaiera de convertir chucknorris en une valeur hexadécimale.
Étant donné qu'il cs'agit du seul caractère hexadécimal valide dans chucknorris , la valeur devient: c00c00000000( 0 pour toutes les valeurs non valides ).
Le navigateur divise alors le résultat en 3 groupds: 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 chiffres sont tronqués de chaque groupe, laissant une valeur rgb c00000dont la couleur est rouge brique.

— Webeng
source

22

chucknorris commence par c et le navigateur le lit en une valeur hexadécimale.

Parce que A, B, C, D, E et F sont des caractères hexadécimaux .

Le navigateur convertit chucknorrisà une valeur hexadécimale, C00C00000000.

Ensuite, la C00C00000000valeur hexadécimale est convertie au format RVB (divisée par 3):

C00C00000000 => R:C00C, G:0000, B:0000

Le navigateur n'a besoin que de deux chiffres pour indiquer la couleur:

R:C00C, G:0000, B:0000=> R:C0, G:00, B:00=>C00000

Enfin, affichez bgcolor = C00000dans le navigateur Web.

Voici un exemple le 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>

Développer l'extrait

— sameera lakshitha
source

15

Les règles d'analyse des couleurs sur les attributs hérités impliquent des étapes supplémentaires à celles mentionnées dans les réponses existantes. Le composant tronqué à 2 chiffres est décrit comme suit:

Défaussez tous les personnages sauf les 8 derniers
Supprimer les zéros non significatifs un par un tant que tous les composants ont un zéro non significatif
Défaussez tous les personnages sauf les 2 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

Voici une implémentation partielle de l'algorithme. Il ne gère pas les erreurs ou les cas où l'utilisateur entre une couleur valide.

Afficher l'extrait de code

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>

Développer l'extrait

— Salman A
source