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

Например:

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

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

С другой стороны, chucknorr создает желтый фон !

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

8293
user456584 30 Ноя 2011 в 02:54

9 ответов

Лучший ответ

Это пережиток времен 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", и, ну, это оказалось коричневым.

7624
ib. 30 Сен 2020 в 06:03

правила синтаксического анализа цветов в устаревших версиях Атрибуты включают дополнительные шаги, чем те, которые упомянуты в существующих ответах. Компонент усечения до 2-значной части описывается как:

  1. Отменить все символы, кроме последних 8
  2. Удалять начальные нули по одному , пока все компоненты имеют начальный ноль
  3. Отбросить все символы, кроме первых 2

Некоторые примеры:

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

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

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>
27
Salman A 17 Окт 2018 в 14:53

chucknorris начинается с c , и браузер считывает его в шестнадцатеричном формате.

Поскольку A, B, C, D, E и F являются шестнадцатеричными символами.

Браузер преобразует chucknorris в шестнадцатеричное значение C00C00000000.

Затем шестнадцатеричное значение C00C00000000 преобразуется в формат RGB (делится на 3):

C00C00000000R:C00C, G:0000, B:0000

Браузеру нужно всего две цифры для обозначения цвета:

R:C00C, G:0000, B:0000R:C0, G:00, B:00C00000

Наконец, покажите 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>
37
ib. 30 Сен 2020 в 06:08

Ответ:

  • Браузер попытается преобразовать чакноррис в шестнадцатеричное значение.
  • Поскольку c - единственный допустимый шестнадцатеричный символ в chucknorris , значение превращается в: c00c00000000 ( 0 для всех недопустимых значений ).
  • Затем браузер делит результат на 3 группы: Red = c00c, Green = 0000, Blue = 0000.
  • Поскольку допустимые шестнадцатеричные значения для фона html содержат только 2 цифры для каждого типа цвета ( r , g , b ), последние 2 цифры усекаются. от каждой группы, оставляя значение rgb c00000, которое имеет кирпично-красноватый оттенок.
213
b1nary.atr0phy 8 Июн 2018 в 06:20

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

Код Netscape Classic, используемый для анализа цветовых строк, имеет открытый исходный код: https://github.com/zii/netscape/ blob / master / lib / layout / layimage.c # L150.

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

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

if (bytes_per_val > 4)
{
    bytes_per_val = 4;
}
238
SoyChai 23 Май 2021 в 05:43

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

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

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

P.S. Цифры в скобках - это версии браузеров, в которых я тестировал.

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

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

333
ib. 30 Сен 2020 в 06:08

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

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

423
Alireza 11 Фев 2020 в 11:11

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

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>
428
Mike Christensen 17 Сен 2014 в 16:09

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

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

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

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

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

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

1085
Jeremy Goodell 5 Окт 2017 в 17:10