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

7489

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

Expandir fragmento

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

Curiosamente, aunque chucknorriproduce un fondo rojo también, chucknorrproduce un fondo amarillo.

¿Que está pasando aqui?

html browser background-color

— usuario456584
fuente

154

Como nota al margen: no usar bgcolor. Utiliza CSS background.

— John Dvorak

47

¿Por qué alguna vez quieres agregar un color de fondo llamado chucknorris? ¿Cuál fue el color esperado?

— masterFly

106

@masterFly: No sé por qué mi comentario en la respuesta aceptada se eliminó por ser "no constructivo", porque responde a su pregunta bastante bien: la gente experimenta con estas cosas todo el tiempo. Tenía solo 10 años cuando descubrí esto y todo lo que estaba haciendo en ese momento era perder el tiempo y ver qué sucedía. No siempre tiene que tener una razón práctica para hacer algo, especialmente algo tan frívolo como esto.

— BoltClock

49

y <body bgcolor="stevensegal">prueba </body> es verde

— Chris

44

@BenDaggers Lea el historial de revisiones antes de realizar otra edición. La etiqueta css es irrelevante y ya se ha eliminado dos veces.

— ligereza corre en órbita el

6880

Es un remanente de los días de Netscape:

Los dígitos faltantes 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 pequeño comentario 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:

Reemplace todos los caracteres hexadecimales no válidos con ceros
```
chucknorris becomes c00c0000000
```
Llegue al siguiente número total de caracteres divisibles por 3 (11 -> 12)
```
c00c 0000 0000
```
Divídase 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 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>

Expandir fragmento

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 da un color dorado amarillo claro. A medida que la cadena comienza como 9 caracteres, mantenemos 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 hacerlo color="crap"y, bueno, sale marrón.

— guión
fuente

174

Tenga en cuenta que, a pesar de lo que dice la publicación del blog, cuando maneja cadenas de 3 caracteres, duplica cada carácter, en lugar de anteponer 0. es decir , se 0F6convierte en #00FF66, no #000F06.

— Aaron Dufour

634

@ usr: HTML se basa en ignorar intencionalmente la entrada con formato incorrecto;)

— Lily Ballard

59

También puede usar mi convertidor de color aleatorio de cadena a css para obtener el color de una cadena específica. Se basa en los 5 pasos para calcular el color de la cuerda por Jeremy Goodell .

— TimPietrusky

15

¿Una oportunidad oculta para la semántica? Podría hacer algunas páginas de error con esto: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>podría agregar un div con otro fondo o algo así, por lo que no es tan estéticamente impactante.

— Theraot

32

@Theraot también bgcolor="success"es un bonito verde. Curiosamente, uno puede anular estos colores utilizando los selectores de atributos / valores CSS (por ejemplo, td[bgcolor="chucknorris"] {...}).

— Daiscog

970

Lo siento no estar de acuerdo, pero de acuerdo con las reglas para analizar un valor de color legado Publicado por @Yuhong Bao , chucknorrisno equivalen a #CC0000, sino más bien #C00000, una tonalidad muy similar pero ligeramente diferente de rojo. He utilizado el complemento de Firefox ColorZilla para verificar esto.

Las reglas establecen:

haga que la cadena tenga una longitud que sea 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

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

— Jeremy Goodell
fuente

86

Lo descubrí, había malinterpretado algunas de las instrucciones de análisis: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - ¡Perfecto!

— Jeremy Goodell

17

En caso de que esté interesado, publiqué el algoritmo de 5 pasos como una ACTUALIZACIÓN en una pregunta similar que publiqué hoy: stackoverflow.com/questions/12939234/…

— Jeremy Goodell

18

@TimPietrusky creó esta increíble herramienta de demostración increíble para nombres de colores aleatorios. Simplemente vaya aquí: randomstringtocsscolor.com y haga clic en el cuadro y escriba "chucknorris".

— Jeremy Goodell

44

adamlevinefunciona según jsfiddle.net/LdyZ8/2959 pero las letras se bloquean en las ada00e000eque se rellena ada00e000e00pero luego se reduce al valor típico de 6 dígitos HEX de [ad]a0[0e]00[0e]00hacer así ad0e0e que aparece en el jsfiddle anterior.

— Martin

44

Sería mejor si esta respuesta solo contuviera el estado actual: el historial de esta respuesta y otras respuestas pertenece a los resúmenes y / o comentarios de edición.

— Peter Mortensen

397

La mayoría de los navegadores simplemente ignorarán los valores NO hexadecimales en su cadena de color, sustituyendo los dígitos no hexadecimales con ceros.

ChuCknorrisse traduce en c00c0000000. En este punto, el navegador va a dividir la cadena en tres secciones iguales, lo que indica Rojo , Verde y Azul valores: c00c 0000 0000. Los bits adicionales en cada sección serán ignorados, lo que hace que el resultado final #c00000sea de 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>

Expandir fragmento

— Mike Christensen
fuente

77

Aunque todavía tengo curiosidad de por qué OP dijo "en CSS" y no "en HTML". ¿Tal vez están usando un navegador súper antiguo o simplemente están equivocados?

— Mike Christensen

77

Entonces es más que probable que esté usando el bgcoloratributo en desuso .

— animuson

12

Los caracteres no válidos no se omiten, se tratan como 0.

— trata bien tus modificaciones el

55

(MIENTRAS que esta respuesta puede estar muerta) sugerencia: utilice el color de fondo en su lugar para demostrar los colores. El color del texto está sobre un área relativa tan pequeña que es difícil ver diferencias o similitudes

— Zoe

304

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

En chucknorristodo, exceptoc no es un valor hexadecimal válido.
Entonces 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 Chrome (31) y 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 cumple con los estándares web. Los estándares web se ajustan a él. # BADA55

— aWebDeveloper
fuente

297

¡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 cel carácter reconocido en hexadecimal, también convierte todos los caracteres no reconocidos en0 !

Entonces, chucknorrisen formato hexadecimal se convierte en: c00c00000000todos los demás caracteres se vuelven 0y cpermanecen 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 es de 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 referencia rápida para usted:

— Alireza
fuente

23

Esta es una explicación tan linda: D: D: D

— Dominik Bucher

2

Explicación tan sabia y muy simple y directa que he experimentado

— Saurin Vala

1

respuesta muy creativa :)

— ahmednawazbutt

222

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 Netscape Classic utilizado para analizar cadenas de color 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 quepan en 8 bits, razón por la cual se ignoran los ceros iniciales.

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 se agregaron estas líneas (en Netscape 4):

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

— Yuhong Bao
fuente

Gracias, me mostraste dónde está el viejo código fuente de Netscape ... ¿por qué es tan difícil de encontrar?

— kb1000

202

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 ).
El navegador luego se 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 , g , b ), los últimos 2 dígitos se truncan de cada grupo, dejando un valor rgb c00000cuyo color es un tono rojizo ladrillo.

— Webeng
fuente

22

chucknorris comienza con c , y el navegador lo lee en un valor hexadecimal.

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

El navegador se convierte chucknorrisen un valor hexadecimal, C00C00000000.

Luego, el C00C00000000valor hexadecimal se convierte al formato RGB (dividido entre 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

Por último, mostrar bgcolor = C00000en 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>

Expandir fragmento

— sameera lakshitha
fuente

15

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

Descarta todos los personajes excepto los últimos 8
Deseche los ceros iniciales uno por uno siempre que todos los componentes tengan un cero inicial
Descarta 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 en los que el usuario ingresa un color válido.

Mostrar fragmento de código

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>

Expandir fragmento

— Salman A
fuente