¿Por qué HTML piensa que "chucknorris" es un color?

¿Por qué ciertas cadenas aleatorias producen colores cuando se ingresan como colores de fondo en HTML?

Por ejemplo:

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

... produce un documento con un fondo rojo en todos los navegadores y plataformas.

Por otra parte, chucknorr produce un fondo amarillo!

¿Que está pasando aqui?

preguntado el 29 de noviembre de 11 a las 18:11

10 Respuestas

Es un vestigio de los días de Netscape:

Los dígitos faltantes se tratan como 0 [...]. Un dígito incorrecto se interpreta simplemente como 0. Por ejemplo, los valores # F0F0F0, F0F0F0, F0F0F, #FxFxFx y FxFxFx son todos iguales.

Es de la publicación del blog. Un poco de perorata sobre el análisis de color de Microsoft Internet Explorer que lo cubre con gran detalle, incluidas diferentes longitudes de valores de color, etc.

Si aplicamos las reglas a su vez de la publicación del blog, obtenemos lo siguiente:

  1. Reemplace todos los caracteres hexadecimales no válidos con ceros:

    chucknorris becomes c00c0000000
    
  2. Rellene hasta el siguiente número total de caracteres divisible por 3 (11 → 12):

    c00c 0000 0000
    
  3. Dividir en tres grupos iguales, con cada componente representando el componente de color correspondiente de un color RGB:

    RGB (c00c, 0000, 0000)
    
  4. Trunca cada uno de los argumentos de la derecha a dos caracteres.

Lo que, finalmente, da el siguiente resultado:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

Aquí hay un ejemplo que demuestra la bgcolor atributo en acción, para producir esta "asombrosa" muestra de color:

<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>

Esto también responde a la otra parte de la pregunta: ¿Por qué bgcolor="chucknorr" producir un color amarillo? Bueno, si aplicamos las reglas, la cadena es:

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

Lo que le da un color oro amarillo claro. Como la cadena comienza con 9 caracteres, esta vez mantenemos la segunda 'C', por lo que termina en el valor de color final.

Originalmente encontré esto cuando alguien señaló que podrías hacer color="crap" y, bueno, sale marrón.

Respondido el 30 de Septiembre de 20 a las 07:09

Dato curioso: de acuerdo con esta lógica, entonces prueba le daría el color de un taxi de California! ¡La sede de Netscape estaba en Mountain View, California! - WM Ramadan

Lamento no estar de acuerdo, pero de acuerdo con las reglas para analizar un valor de color heredado publicado por @Yuhong Bao, chucknorris NO equivale a #CC0000, sino más bien a #C00000, un tono de rojo muy similar pero ligeramente diferente. Usé el Complemento Firefox ColorZilla para verificar esto.

Las reglas establecen:

  • Haga que la cadena tenga una longitud que sea múltiplo de 3 agregando 0: chucknorris0
  • separe la cadena en 3 cadenas de igual longitud: chuc knor ris0
  • truncar cada cadena a 2 caracteres: ch kn ri
  • mantenga los valores hexadecimales y agregue ceros cuando sea necesario: C0 00 00

Pude usar estas reglas para interpretar correctamente las siguientes cadenas:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

ACTUALIZACIÓN: Los respondedores originales que dijeron que el color era #CC0000 desde entonces han editado sus respuestas para incluir la corrección.

Respondido 05 Oct 17, 18:10

La razón es que el navegador puede no entiendo ¡e intenta traducirlo de alguna manera a lo que pueda entender y en este caso a un valor hexadecimal! ...

chucknorris comienza con c que es un carácter reconocido en hexadecimal, también está convirtiendo todos los caracteres no reconocidos en 0!

So chucknorris en formato hexadecimal se convierte en: c00c00000000, todos los demás personajes se vuelven 0 y c permanece donde están ...

Ahora se dividen entre 3 para RGB(rojo verde azul)... R: c00c, G: 0000, B:0000...

Pero sabemos que el hexadecimal válido para RGB tiene solo 2 caracteres, significa R: c0, G: 00, B:00

Entonces el resultado real es:

bgcolor="#c00000";

También agregué los pasos en la imagen como una referencia rápida para ti:

¿Por qué HTML piensa que "chucknorris" es un color?

Respondido 11 Feb 20, 11:02

La mayoría de los navegadores simplemente ignorarán cualquier valor NO hexadecimal en su cadena de color, sustituyendo los dígitos que no sean hexadecimales por ceros.

ChuCknorris traduce a c00c0000000. En este punto, el navegador dividirá la cadena en tres secciones iguales, indicando Rojo, Verde y Azul valores: c00c 0000 0000. Se ignorarán los bits adicionales en cada sección, lo que hace que el resultado final #c00000 que es un color rojizo.

Tenga en cuenta, esto hace no se aplican al análisis de color CSS, que sigue el estándar 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>

Respondido el 17 de Septiembre de 14 a las 17:09

You might consider editing your answer, because the <font> element is hereby obsolete by HTML5. - Alguien_a quien_le gusta_SE

El navegador está intentando convertir chucknorris en código de color hexadecimal, porque no es un valor válido.

  1. In chucknorris, todo excepto c no es un valor hexadecimal válido.
  2. Entonces se convierte en c00c00000000.
  3. Que se convierte en # c00000, un tono de rojo.

Esto parece ser un problema principalmente con explorador de Internet y Opera (12) ya que tanto Chrome (31) como Firefox (26) simplemente ignoren esto.

PD Los números entre paréntesis son las versiones del navegador en las que probé.

En una nota más ligera

Chuck Norris no se ajusta a los estándares web. Los estándares web se ajustan a él. # BADA55

Respondido el 30 de Septiembre de 20 a las 07:09

He probado esto en Firefox 26 y funciona, así que no creo que tu referencia sea correcta. También desde el siguiente enlace scrappy-do.blogspot.com/2004/08/… Verá que esto fue heredado de Netscape, por lo que no es específico de Internet Explorer u Opera. - WM Ramadan

La especificación HTML de WHATWG tiene el algoritmo exacto para analizar un valor de color heredado: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.

El código que Netscape Classic utiliza para analizar cadenas de colores es de código abierto: https://github.com/zii/netscape/blob/master/lib/layout/layimage.c#L150.

Por ejemplo, observe que cada carácter se analiza como un dígito hexadecimal y luego se cambia a un número entero de 32 bits sin comprobar el desbordamiento. Solo ocho dígitos hexadecimales caben en un entero de 32 bits, por lo que solo se consideran los últimos 8 caracteres. Después de analizar los dígitos hexadecimales en números enteros de 32 bits, se truncan en números enteros de 8 bits dividiéndolos entre 16 hasta que quepan en 8 bits, por lo que se ignoran los ceros iniciales.

Actualizar: Este código no coincide exactamente con lo que se define en la especificación, pero la única diferencia es que hay algunas líneas de código. creo que es Estas líneas que se agregaron (en Netscape):

if (bytes_per_val > 4)
{
    bytes_per_val = 4;
}

contestado el 23 de mayo de 21 a las 06:05

Respuesta

  • El navegador intentará convertir chucknorris en un valor hexadecimal.
  • Como c es el único carácter hexadecimal válido en chucknorris, el valor se convierte en: c00c00000000(0 para todos los valores que no eran válidos).
  • Luego, el navegador divide el resultado en 3 grupos: Red = c00c, Green = 0000, Blue = 0000.
  • Dado que los valores hexadecimales válidos para fondos html solo contienen 2 dígitos para cada tipo de color (r, g, b), los últimos 2 dígitos se truncan de cada grupo, dejando un valor rgb de c00000 que es un color de tono rojizo ladrillo.

Respondido el 08 de junio de 18 a las 07:06

chucknorris comienza con cy el navegador lo lee en un valor hexadecimal.

Porque A, B, C, D, E y F son caracteres en hexadecimal.

El navegador se convierte chucknorris a un valor hexadecimal, C00C00000000.

Entonces el C00C00000000 el valor hexadecimal se convierte a RGB formato (dividido por 3):

C00C00000000 ⇒ R:C00C, G:0000, B:0000

El navegador solo necesita dos dígitos para indicar el color:

R:C00C, G:0000, B:0000 ⇒ R:C0, G:00, B:00 ⇒ C00000

Finalmente, muestra bgcolor = C00000 en el navegador web.

Aquí hay un ejemplo que lo demuestra:

<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>

Respondido el 30 de Septiembre de 20 a las 07:09

El sistema reglas para analizar colores en atributos heredados implica pasos adicionales a los mencionados en las respuestas existentes. El componente truncado a la parte de 2 dígitos se describe como:

  1. Descartar todos los personajes excepto los últimos 8
  2. Descartar los ceros iniciales uno por uno siempre que todos los componentes tengan un cero a la izquierda
  3. Descartar todos los personajes excepto los 2 primeros

Algunos ejemplos:

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

A continuación se muestra una implementación parcial del algoritmo. No maneja errores o casos donde el usuario ingresa un color válido.

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>

Respondido 17 Oct 18, 15:10

Responda en palabras simples:

La respuesta corta es que HTML está desesperado por complacer y aceptará básicamente cualquier cosa que le des. HTML se basa en ignorar intencionalmente la entrada con formato incorrecto.

Concepto completo:

HTML acepta caracteres no hexadecimales como 0, por lo que todos sabemos que 0-9 define de cero a nueve y luego AF define de diez a quince. Entonces, hay tantas palabras que pueden ser de un color como "chucknorris" tan profundo color rojo sangre como este. y de manera similar "stevensegal" significa verde.

Mostrando colores inesperados: Si está poniendo una palabra en bgcolor que contenga algunos caracteres hexadecimales, ese carácter le mostrará un color inesperado que nunca imaginó. Funciona como # F00F00 es igual a #FotFot. Pero esto solo funcionará en bgcolor dentro de la etiqueta de la tabla en ningún otro lugar.

Demostración:

<style>
        h1 {
            color: green;
        }
    </style>
<center>
        <h1>Why HTML thinks Chucknorris as color?</h1>
        <p>
          Here is the implementation...!!!
        </p>
        <table>
            It is the color of:
            <td bgcolor="chucknorris">
              chucknorris
            </td>
            
        </table>
    </center>

Respondido el 03 de Septiembre de 21 a las 08:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.