Esse comportamento tem relação com o parser de atributos legados em navegadores, no caso bgcolor
, um atributo obsoleto (vide link e html.spec.whatwg.org), inclusive nem se recomenda usar esse atributo. A alternativa recomendada é fazer uso do atributo CSS background-color
que não sofre desse comportamento da pergunta. Veja que o exemplo da pergunta não se aplica quando se usa o CSS:
body {
background-color: chucknorris;
}
<body> teste chucknorris não funciona com "background-color"</body>
O comportamento apresentado na pergunta não se restringi somente ao texto chucknorris
ou esquadraoclasseA
ou Fulano
, etc. Ele pode ser reaplicado a qualquer texto aleatório. Por exemplo gandalf
, melancia
, graxa
, etc. Veja o exemplo nesta tabela abaixo:
<table>
<tr>
<td bgcolor="fulano" cellpadding="8" width="100" align="center">fulano</td>
<td bgcolor="esquadraoclasseA" cellpadding="8" width="100" align="center">esquadraoclasseA</td>
<td bgcolor="gandalf" cellpadding="8" width="100" align="center">gandalf</td>
</tr>
<tr>
<td bgcolor="melancia" cellpadding="8" width="100" align="center">melancia</td>
<td bgcolor="graxa" cellpadding="8" width="100" align="center">graxa</td>
<td bgcolor="aleatório" cellpadding="8" width="100" align="center">aleatório</td>
</tr>
</table>
O que acontece é que os navegadores não conseguem entender o texto informado e o que eles tentam é transformar em algo que entendam, no caso uma string em hexadecimal, verificando quais caracteres do texto são um hexadecimal válido. Caso seja um hexadecimal válido, mantém, caso contrário, substitui por um zero (0
).
Vemos pegar de exemplo o texto esquadraoclasseA
que produz um fundo vermelho no exemplo. O que o navegador vai pensar e fazer é:
- O que é esse
esquadraoclasseA
? Não sei.
- Vou tentar converter
esquadraoclasseA
para hexadecimal
- O que é esse
e
? É um hexadecimal válido. Maravilha!
- Agora eu tenho o texto
esquadraoclasseA
ainda.
- Pera ai! O que é esse
s
? Não é um hexadecimal. Vou colocar um 0
- Agora eu tenho o texto
e0quadraoclasseA
. Opa!
- E por esse caminho eu vou...
- Ufa! Finalmente terminei. Agora eu tenho a string:
e000ad0a0c0a00eA
e000ad0a0c0a00eA
é um hexadecimal válido, mas preciso de um padrão RGB
- Vou dividir
e000ad0a0c0a00eA
em 3 seções do RGB
. Se o tamanho da string não for múltiplo de 3, completo com 0
no fim da string:
`e000ad0a0c0a00eA` => tamanho 16. Preciso completar com `0` até ter 18.
`e000ad0a0c0a00eA00` => tamanho 18.
`e000ad0a0c0a00eA00` => Em 3 seções temos: `R:e000ad G:0a0c0a B:00eA00`.
- Para cada seção, vou pegar apenas os 2 primeiros valores:
`R:e000ad G:0a0c0a B:00eA00` => `R:e0 G:0a B:00`
Agora, vou juntar esses valores: RGB: e00a00
OPA! Finalmente tenho a string e00a00
, um hexadecimal válido. Vou usar ele #e00a00
como cor de fundo.
Logo que cor é esse #e00a00
? A mesma de esquadraoclasseA
. Veja no exemplo:
td {
color: white;
}
<table>
<tr>
<td bgcolor="esquadraoclasseA" cellpadding="8" width="100" align="center">esquadraoclasseA</td>
<td bgcolor="#e00a00" cellpadding="8" width="100" align="center">#e00a00</td>
</tr>
</table>
Vamos replicar esse passao-a-passo para o exemplo graxa
e ver o resultado final:
graxa
vamos substituir tudo não hexadecimal por 0
- Temos
00a0a
- O tamanho de
00a0a
é 5 e não é múltiplo e 3. Vou acrescentar mais um 0
para chegar ao tamanho 6
- Tenho agora a string
00a0a0
. Vou dividir nas 3 seções do RGB: R:00 G:a0 B:a0
- Vou usar os 2 primeiros dígitos de cada seção para montar o hex da cor
- Finalmente teremos a string
#00a0a0
Agora vamos testar a cor #00a0a0
no exemplo abaixo:
<table>
<tr>
<td bgcolor="graxa" cellpadding="8" width="100" align="center">graxa</td>
<td bgcolor="#00a0a0" cellpadding="8" width="100" align="center">#00a0a0</td>
</tr>
</table>
Nota
Essa resposta é baseada nas respostas desta pergunta do Stack Overflow, tentando extrair o que eu acho mais interessante de cada uma.
Gandalf
ciano. :)[a, b, c, d, e, f]
bgcolor=""
está em desuso/obsoleto: html.spec.whatwg.org/multipage/obsolete.html, conforme o link: Os elementos da lista a seguir são totalmente obsoletos e não devem ser usados pelos autores: html.spec.whatwg.org/multipage/…