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


¿Cómo es que 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.

Interesantemente, mientras chucknorri produce un fondo rojo también, chucknorr produce un fondo amarillo.

Que esta pasando aquí?


6540
2017-11-29 22:54


origen


Respuestas:


Es un remanente de los días de Netscape:

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

Es de la publicación del blog Una pequeña diatriba sobre el análisis de color de Microsoft Internet Explorer que lo cubre con gran detalle, incluyendo diferentes longitudes de valores de color, etc.

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

  1. Reemplazar todos los caracteres hexadecimales no válidos con 0

    chucknorris becomes c00c0000000
    
  2. Rellene con el siguiente número total de caracteres divisibles por 3 (11 -> 12)

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

    RGB (c00c, 0000, 0000)
    
  4. Truncar cada uno de los argumentos desde la derecha hasta dos caracteres

Lo cual da el siguiente resultado:

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

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

<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 la otra parte de la pregunta; por que 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 dorado amarillo claro. Como la cadena comienza como 9 caracteres, guardamos la segunda C esta vez, por lo tanto, termina en el valor de color final.

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


6041
2017-11-30 21:53



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 #C00000, un tono de rojo muy similar pero ligeramente diferente. Usé el Complemento de Firefox ColorZilla para verificar esto

Las reglas dicen:

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

Pude usar estas reglas para interpretar correctamente las siguientes cadenas:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle 

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


826
2017-10-17 17:55



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

ChuCknorris se traduce a c00c0000000. En este punto, el navegador dividirá la cadena en tres secciones iguales, lo que indica 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.

Nota, esto no no aplicar 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>


337
2017-11-29 23:01



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

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

Esto parece ser un problema principalmente con Explorador de Internet y Ópera (12) ya que tanto Chrome (31) como Firefox (26) simplemente ignoran esto.

PD Los números entre paréntesis son las versiones de navegador 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


219
2017-11-30 14:05



La especificación WHATWG HTML 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 Netscape Classic utilizado para analizar cadenas de colores es de código abierto: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

Por ejemplo, observe que cada carácter se analiza como un dígito hexadecimal y luego se desplaza a un entero de 32 bits sin verificar 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 enteros de 32 bits, se truncan en enteros de 8 bits dividiéndolos por 16 hasta que encajen en 8 bits, por lo que se ignoran los ceros a la izquierda.

Actualización: 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 son estas líneas las que se agregaron (en Netscape 4):

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

186
2017-09-27 22:01



Responder: 

  • El navegador intentará convertir chucknorris en un valor hexadecimal.
  • Ya que c es el único personaje hexadecimal válido en chucknorris, el valor se convierte en: c00c00000000(0 para todos los valores que no fueron válidos)
  • El navegador luego divide el resultado en 3 groupds: 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, gramo, segundo), los últimos 2 dígitos se truncan de cada grupo, dejando un valor rgb de c00000 que es un color tonificado de ladrillo rojizo.

166
2018-05-24 05:18



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

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

Asi que 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 por 3 para RGB(rojo verde azul)... R: c00c, G: 0000, B:0000...

Pero sabemos que un 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:

Why does HTML think “chucknorris” is a color?


133
2017-07-01 04:08



chucknorris es estadísticas con do el navegador lee en un valor hexadecimal.

porque a, b, c, d, e, f son caracteres en hexadecimal

El navegador chucknorris convertir a c00c00000000 valor hexadecimal

Entonces c00c00000000 valor hexadecimal convertir a RGB formato (dividido por 3)

c00c00000000 => R:c00c,G:0000,B:0000

El navegador necesita solo 2 dígitos para indicar el color.

R:c00c,G:0000,B:0000 => R:c0,G:00,B:00 => c00000

finalmente, mostrar bgcolor = c00000 en el navegador web.

Aquí hay un ejemplo que 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>


3
2018-04-17 19:16