Вопрос: Почему HTML считает, что «chucknorris» - это цвет?


Почему некоторые случайные строки генерируют цвета при вводе в качестве фоновых цветов в HTML? Например:

<body bgcolor="chucknorris"> test </body>

... создает документ с красный фон во всех браузерах и платформах.

Интересно, что chucknorriтакже создает красный фон, chucknorrсоздает желтый фон.

Что происходит Вот ?


6460


источник


Ответы:


Это отрыв от дней Netscape:

Отсутствующие цифры считаются 0 [...]. Неверная цифра просто интерпретируется как 0. Например, значения # F0F0F0, F0F0F0, F0F0F, #FxFxFx и FxFxFx одинаковы.

Это из сообщения в блоге Немного расспросы по поводу разбора цвета Microsoft Internet Explorer который охватывает его очень подробно, включая различные длины значений цвета и т. д.

Если мы применим правила в свою очередь из сообщения в блоге, мы получим следующее:

  1. Замените все несущие шестнадцатеричные символы на 0

    chucknorris becomes c00c0000000
    
  2. Выложите до следующего общего количества символов, делящихся на 3 (11 -> 12)

    c00c 0000 0000
    
  3. Разделите на три равные группы, причем каждый компонент представляет соответствующий цветовой компонент цвета RGB:

    RGB (c00c, 0000, 0000)
    
  4. Усечение каждого из аргументов с точностью до двух символов

Это дает следующий результат:

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

Вот пример, демонстрирующий bgcolorатрибут в действии, чтобы произвести этот «удивительный» образец цвета:

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

Это также отвечает на другую часть вопроса; Почему bgcolor="chucknorr"производить желтый цвет? Ну, если мы применяем правила, строка:

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

Это дает светло-желтого золота. Поскольку строка начинается с 9 символов, мы сохраняем второй C на этот раз, поэтому она заканчивается окончательным значением цвета.

Я изначально столкнулся с этим, когда кто-то указал, что вы можете сделать color="crap"и, ну, он выходит коричневый.


5966



Мне жаль, что не согласен, но в соответствии с правилами для разбора унаследованного цвета @Yuhong Bao , chucknorrisНЕ приравнивается к #CC0000, а скорее #C00000, очень похожий, но слегка отличающийся оттенок красного. Я использовал Дополнение Firefox ColorZilla для проверки этого.

Правила гласят:

  • сделайте строку длиной, кратной 3, добавив 0s: chucknorris0
  • разделите строку на 3 строки равной длины: chuc knor ris0
  • усечь каждую строку до двух символов: ch kn ri
  • сохраните шестнадцатеричные значения и добавьте 0, если необходимо: C0 00 00

Я смог использовать эти правила для правильной интерпретации следующих строк:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

ОБНОВИТЬ: Первоначальные ответчики, которые сказали, что цвет был #CC0000с тех пор отредактировали свои ответы, включив исправление.


815



Большинство браузеров просто игнорируют любые NON-шестнадцатеричные значения в вашей цветовой строке, заменяя шестнадцатеричные цифры нулями.

ChuCknorrisпереводит на c00c0000000, В этот момент браузер разделит строку на три равные части, что указывает на красный , зеленый а также синий значения: c00c 0000 0000, Дополнительные биты в каждом разделе будут проигнорированы, что делает окончательный результат #c00000который является красноватым цветом.

Обратите внимание, что это делает не применяются к синтаксическому разбору CSS, которые следуют стандарту 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>


333



The browser is trying to convert chucknorris into hex colour code, because it's not a valid value.

  1. In chucknorris, everything except c is not a valid hex value.
  2. So it gets converted to c00c00000000.
  3. Which becomes #c00000, a shade of red.

This seems to be an issue primarily with Internet Explorer and Opera (12) as both Chrome (31) and Firefox (26) just ignore this.

P.S. The numbers in brackets are the browser versions I tested on.

.

On a lighter note

Chuck Norris doesn't conform to web standards. Web standards conform to him. #BADA55


213



The WHATWG HTML spec has the exact algorithm for parsing a legacy color value: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

The code Netscape Classic used for parsing color strings is open source: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

For example, notice that each character is parsed as a hex digit and then is shifted into a 32-bit integer without checking for overflow. Only eight hex digits fit into a 32-bit integer, which is why only the last 8 characters are considered. After parsing the hex digits into 32-bit integers, they are then truncated into 8-bit integers by dividing them by 16 until they fit into 8-bit, which is why leading zeros are ignored.

Update: this code does not exactly match what is defined in the spec, but the only difference there is a few lines of code. I think it is these lines that was added (in Netscape 4):

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

184



Answer:

  • The browser will try to convert chucknorris into a hexadecimal value.
  • Since c is the only valid hex character in chucknorris, the value turns into: c00c00000000(0 for all values that were invalid).
  • The browser then divides the result into 3 groupds: Red = c00c, Green = 0000, Blue = 0000.
  • Since valid hex values for html backgrounds only contain 2 digits for each color type (r, g, b), the last 2 digits are truncated from each group, leaving an rgb value of c00000 which is a brick-reddish toned color.

164



The reason is the browser can not understand it and try to somehow translate it to what it can understand and in this case into a hexadecimal value!

chucknorris starts with c which is recognised character in hexadecimal, also it's converting all unrecognised characters into 0!

So chucknorris in hexadecimal format becomes: c00c00000000, all other characters become 0 and c remains where they are...

Now they get divided by 3 for RGB(red, green, blue)... R: c00c, G: 0000, B:0000...

But we know valid hexadecimal for RGB is just 2 characters, means R: c0, G: 00, B:00

So the real result is:

bgcolor="#c00000";

I also did the steps in the image as a quick reference:

Why does HTML think “chucknorris” is a color?


127



chucknorris is stats with c the browser read into a hexadecimal value.

because a,b,c,d,e,f are characters in hexadecimal

The browser chucknorris convert to c00c00000000 hexadecimal value.

Then c00c00000000 hexadecimal value convert to RGB format(divided by 3)

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

The browser needs only 2 digits to indicate the colour.

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

finally, show bgcolor = c00000 in web browser.

Here's an example demonstrating

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


1