¿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, bgcolor="chucknorris"produce un fondo rojo :
<body bgcolor="chucknorris"> test </body>Por el contrario, bgcolor="chucknorr"produce un fondo amarillo :
<body bgcolor="chucknorr"> test </body>Esto es válido en varios navegadores y plataformas. ¿Que está pasando aqui?
Es un vestigio de los días de Netscape :
Los dígitos que faltan 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 Una pequeña perorata sobre el análisis de color de Microsoft Internet Explorer que lo cubre con gran detalle, incluidas las diferentes longitudes de los valores de color, etc.
Si aplicamos las reglas de la publicación del blog, obtenemos lo siguiente:
Reemplace todos los caracteres hexadecimales no válidos con 0:
chucknorris becomes c00c0000000Rellene hasta el siguiente número total de caracteres divisible por 3 (11 → 12):
c00c 0000 0000Dividido en tres grupos iguales, donde cada componente representa el componente de color correspondiente de un color RGB:
RGB (c00c, 0000, 0000)Trunca cada uno de los argumentos desde la derecha hasta dos caracteres.
Lo cual, finalmente, da el siguiente resultado:
RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)
A continuación se muestra un ejemplo que demuestra el bgcoloratributo 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 a la otra parte de la pregunta: ¿Por qué bgcolor="chucknorr"produce 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 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 se podía hacer color="crap"y, bueno, sale marrón.
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 a #C00000, un tono de rojo muy similar pero ligeramente diferente. Utilicé el complemento Firefox ColorZilla para verificar esto.
Las reglas dicen:
- haga que la cadena tenga una longitud que sea múltiplo de 3 sumando ceros:
chucknorris0 - separe la cadena en tres cadenas de igual longitud:
chuc knor ris0 - trunca cada cadena a dos 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:
LuckyCharmsLuckLuckBeALadyLuckBeALadyTonightGangnamStyle
Los que respondieron originalmente que dijeron que el color era #CC0000desde entonces editaron sus respuestas para incluir la corrección.
La razón es que el navegador no puede entenderlo e intenta traducirlo de alguna manera a lo que puede entender y, en este caso, a un valor hexadecimal .
chucknorriscomienza con ccuál es el carácter reconocido en hexadecimal, ¡también convierte todos los caracteres no reconocidos en 0!
Entonces, chucknorrisen formato hexadecimal se convierte en: c00c00000000, todos los demás caracteres se convierten 0y cpermanecen donde están...
Ahora se dividen por 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, lo que significaR: c0, G: 00, B:00
Entonces el resultado real es:
bgcolor="#c00000";
También agregué los pasos en la imagen como referencia rápida para usted:
La mayoría de los navegadores simplemente ignorarán cualquier valor no hexadecimal en su cadena de colores y sustituirán los dígitos no hexadecimales por ceros.
ChuCknorrisse traduce en c00c0000000. En este punto, el navegador dividirá la cadena en tres secciones iguales, indicando los valores Rojo , Verde y Azulc00c 0000 0000 : . Se ignorarán los bits adicionales en cada sección, lo que hace que el resultado final #c00000sea de un color rojizo.
Tenga en cuenta que esto no se aplica 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>
El navegador está intentando convertir chucknorrisa un código de color hexadecimal porque no es un valor válido.
- En
chucknorris, todo exceptocno es un valor hexadecimal válido. - Entonces se convierte a
c00c00000000. - Esto se divide en grupos de 3, RGB (el pad 0 al final si no es múltiplo de 3)
- De cada grupo sólo se eligen dos personajes ya que eso es lo que está permitido.
- Finalmente se convierte en #c00000 , un tono rojo.
Esto parece ser un problema principalmente con Internet Explorer y Opera (12), ya que tanto Chrome (31) como Firefox (26) simplemente lo ignoran.
PD: Los números entre paréntesis son las versiones del navegador que probé.
De manera similar, Rajnikanth (el indio Chuck Noris) conversa con un tono de negro:
0a00 00a0 0000 => #0a0000
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
