Почему HTML думает, что" chucknorris " - это цвет?

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

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

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

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

что происходит здесь?

8 ответов


это пережиток дней Netscape:

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

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

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

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

    chucknorris becomes c00c0000000
    
  2. Pad до следующего общего количества символов, кратных 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" и, ну, получается коричневый.


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

правила:

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

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

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

обновление: в оригинальные ответчики, которые сказали, что цвет был #CC0000 С тех пор отредактировали свои ответы, чтобы включить исправление.


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

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>

браузер пытается преобразовать chucknorris в шестнадцатеричный цветовой код, потому что это недопустимое значение.

  1. на chucknorris, все, кроме c не является допустимым шестнадцатеричным значением.
  2. поэтому он преобразуется в c00c00000000.
  3. что будет #c00000, а оттенок красного.

Это, кажется, проблема в первую очередь с Internet Explorer и Опера (12) как Chrome (31) и Firefox (26) просто игнорируют это.

П. С. цифры в скобках указаны версии браузеров, я тестировал на.

.

на более легкой ноте

Чак Норрис не соответствует веб-стандартам. Веб-стандарты соответствуют к нему. # BADA55


спецификация WHATWG HTML имеет точный алгоритм для анализа устаревшего значения цвета: https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

код Netscape Classic, используемый для разбора цветных строк, является открытым исходным кодом: https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

например, обратите внимание, что каждый символ интерпретируется как шестнадцатеричное число, а затем сдвигается в 32-разрядное целое число без проверки на переполнение. Только восемь шестнадцатеричных цифр вписываются в 32-разрядное целое число, поэтому рассматриваются только последние 8 символов. После разбора шестнадцатеричных цифр на 32-разрядные целые, они затем усекаются на 8-разрядные целые, деля их на 16, пока они не поместятся в 8-разрядные, поэтому начальные нули игнорируются.

Update: этот код точно не соответствует тому, что определено в спецификации, но единственное различие заключается в нескольких строках кода. Я думаю, что это эти строки, которые были добавлены (в Netscape 4):

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

ответ:

  • браузер попытается преобразовать chucknorris в шестнадцатеричное значение.
  • С c является единственным допустимым шестнадцатеричным символом в chucknorris, стоимость превращается в: c00c00000000(0 для всех значений, которые были признаны недействительными).
  • браузер делит результат на 3 groupds: Red = c00c, Green = 0000, Blue = 0000.
  • поскольку допустимые шестнадцатеричные значения только для HTML-фонов содержит 2 цифры для каждого типа цвета (r, g, b), последние 2 цифры усекаются из каждой группы, оставляя значение rgb c00000 который кирпично-красноватый тонированный цвет.

причина в браузер не понимаю это и пытаться как-то перевести его на то, что он может понять и в этом случае в шестнадцатеричное значение!

chucknorris начинается с c который распознается символом в шестнадцатеричном формате, также он преобразует все нераспознанные символы в 0!

так chucknorris в шестнадцатеричном формате выглядит так: c00c00000000, все остальные персонажи становятся 0 и c остается там, где они являются...

теперь они делятся на 3 RGB(красный, зеленый, синий)... R: c00c, G: 0000, B:0000...

но мы знаем, что действительный шестнадцатеричный для RGB всего 2 символа, означает R: c0, G: 00, B:00

таким образом, реальный результат:

bgcolor="#c00000";

Я также добавил шаги в изображении в качестве быстрой ссылки:

Why does HTML think “chucknorris” is a color?


chucknorris статистика с c браузер считывает шестнадцатеричное значение.

потому что a,b,c,d,e, f символы в шестнадцатеричном

обозреватель chucknorris преобразовать в c00c00000000 шестнадцатеричное значение.

затем c00c00000000 преобразовать в шестнадцатеричное значение RGB с формат (разделенный на 3)

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

в браузеру нужно только 2 цифры, чтобы указать цвет.

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

и, наконец, шоу bgcolor = c00000 в веб-браузере.

вот пример

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