fondo - ¿Por qué HTML piensa que "chucknorris" es un color?
html color (9)
El navegador está intentando convertir chucknorris en código de color hexadecimal, porque no es un valor válido.
- En
chucknorris, todo exceptocno es un valor hexadecimal válido. - Así se convierte a
c00c00000000. - Que se convierte en # c00000 , un tono de rojo.
Esto parece ser un problema principalmente con Internet Explorer y Opera (12), ya que tanto Chrome (31) como Firefox (26) simplemente ignoran esto.
PS 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
¿Por qué ciertas cadenas aleatorias producen colores cuando se introducen 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.
Curiosamente, mientras que chucknorri produce un fondo rojo también, chucknorr produce un fondo amarillo.
¿Que está pasando aqui?
Es un remanente de los días de Netscape:
Los dígitos que faltan 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 Un poco de perorata sobre el análisis de color de Microsoft Internet Explorer que lo cubre con gran detalle, incluidas las longitudes variables de los valores de color, etc.
Si aplicamos las reglas a su vez de la publicación del blog, obtenemos lo siguiente:
Reemplace todos los caracteres hexadecimales no válidos con 0
chucknorris becomes c00c0000000Rellena el siguiente número total de caracteres divisibles por 3 (11 -> 12)
c00c 0000 0000Dividido en tres grupos iguales, con cada componente representando el componente de color correspondiente de un color RGB:
RGB (c00c, 0000, 0000)Trunca cada uno de los argumentos de la derecha a dos caracteres
Lo que da el siguiente resultado:
RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)
Aquí hay un ejemplo que demuestra el atributo bgcolor en acción, para producir esta muestra de color "increíble":
<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, mantenemos la segunda C esta vez, por lo que termina en el valor de color final.
Originalmente me encontré con esto cuando alguien me indicó que podías hacer color="crap" y, bueno, sale marrón.
La especificación HTML 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 utiliza Netscape Classic 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 cambia 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 encajan en 8 bits, por lo que se ignoran los ceros a la izquierda.
Actualización: este código no coincide exactamente con lo que está definido 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;
}
La mayoría de los navegadores simplemente ignorarán los valores no hexadecimales en su cadena de color, sustituyendo los dígitos no hexadecimales por ceros.
ChuCknorris traduce a c00c0000000 . En este punto, el navegador dividirá la cadena en tres secciones iguales, indicando los valores Rojo , Verde y Azul : c00c 0000 0000 . Los bits adicionales en cada sección se ignorarán, lo que hace que el resultado final sea #c00000 que es 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>
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 ...
chucknorris comienza con c que es un carácter reconocido en hexadecimal, y también convierte todos los caracteres no reconocidos en 0 .
Entonces chucknorris en formato hexadecimal se convierte en: c00c00000000 , todos los demás caracteres se convierten en 0 c permanece donde está ...
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, 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:
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. Usé el complemento ColorZilla de Firefox para verificar esto.
Las reglas establecen:
- 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 donde sea necesario:
C0 00 00
Pude usar estas reglas para interpretar correctamente las siguientes cadenas:
-
LuckyCharms -
Luck -
LuckBeALady -
LuckBeALadyTonight -
GangnamStyle
ACTUALIZACIÓN: los encuestados originales que dijeron que el color era #CC0000 han editado sus respuestas para incluir la corrección.
Las reglas para analizar colores en atributos heredados involucran pasos adicionales a los mencionados en las respuestas existentes. La parte truncada del componente a 2 dígitos se describe como:
- Descartar todos los personajes excepto los últimos 8
- Descarte los ceros iniciales uno por uno siempre que todos los componentes tengan un cero inicial
- Desecha 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> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Responder:
- El navegador intentará convertir chucknorris en un valor hexadecimal.
- Como
ces 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
c00000que es un color de tono rojizo.
chucknorris es estadísticas con c que 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.
Luego c00c00000000 valor hexadecimal se convierte al formato RGB (dividido por 3)
c00c00000000=>R:c00c,G:0000,B:0000
El navegador solo necesita 2 dígitos para indicar el color.
R:c00c,G:0000,B:0000=>R:c0,G:00,B:00=>c00000
Finalmente, muestre 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>