Почему HTML считает «chucknorris» цветом?

7490

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

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

Развернуть фрагмент

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

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

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

html browser background-color

— user456584
источник

154

В качестве примечания: не используйте bgcolor. Используйте CSS background.

— Джон Дворжак

48

Почему вы хотите добавить цвет фона chucknorris? Какой был ожидаемый цвет?

— MasterFly

107

@masterFly: я не знаю, почему мой комментарий под принятым ответом был удален за то, что он «не конструктивен», потому что он отвечает на ваш вопрос довольно хорошо: люди постоянно экспериментируют с этими вещами. Мне было всего 10 лет, когда я обнаружил это, и все, что я делал в то время, было возиться и смотреть, что случилось. У вас не всегда должна быть практическая причина что-то делать, особенно такая легкомысленная, как эта.

— BoltClock

49

и <body bgcolor="stevensegal">тест </ body> зеленый

— Крис

4

@BenDaggers Пожалуйста, прочитайте историю изменений, прежде чем делать другое редактирование. CSS тег не имеет никакого отношения и уже дважды удален.

— Гонки

6883

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

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

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

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

Заменить все недействительные шестнадцатеричные символы на 0
```
chucknorris becomes c00c0000000
```
Заполните следующее общее количество символов, делимое на 3 (11 -> 12)
```
c00c 0000 0000
```
Разделить на три равные группы, где каждый компонент представляет соответствующий компонент цвета цвета RGB:
```
RGB (c00c, 0000, 0000)
```
Обрезать каждый из аргументов справа вниз до двух символов

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

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"и, ну, это выходит коричневым.

— тире
источник

174

Обратите внимание, что, несмотря на то, что говорится в этом сообщении в блоге, когда вы приступаете к обработке 3-символьных строк, вы дублируете каждый символ, а не ставите 0., то есть 0F6становится #00FF66, а не #000F06.

— Аарон Дюфур

634

@usr: HTML построен на преднамеренном игнорировании искаженного ввода;)

— Лили Баллард

59

Вы также можете использовать мою произвольную строку для преобразования цветов CSS, чтобы получить цвет для конкретной строки. Он основан на 5 шагах для расчета цвета строки Джереми Гуделлом .

— ТимПетрусский

15

Скрытая возможность для семантики? Вы можете сделать несколько страниц с ошибками с этим: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>Вы можете добавить div с другим фоном или что-то в этом роде, так что это не так уж эстетично.

— Theraot

32

@ Theraot bgcolor="success"тоже хороший зеленый. Интересно, что эти цвета можно переопределить с помощью селекторов атрибутов / значений CSS (например, td[bgcolor="chucknorris"] {...}).

— daiscog

970

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

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

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

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

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

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

— Джереми Гуделл
источник

86

Я понял это, я неверно истолковал некоторые инструкции синтаксического анализа: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e" - Отлично !!

— Джереми Гуделл

17

Если вам интересно, я разместил 5-шаговый алгоритм в виде ОБНОВЛЕНИЯ по аналогичному вопросу, который я разместил сегодня: stackoverflow.com/questions/12939234/…

— Джереми Гуделл

18

@TimPietrusky создал этот потрясающий невероятный демонстрационный инструмент для случайных названий цветов. Просто зайдите сюда: randomstringtocsscolor.com, нажмите на поле и введите «chucknorris».

— Джереми Гуделл

4

adamlevineработает в соответствии с jsfiddle.net/LdyZ8/2959, но блокируются буквы, в ada00e000eкоторые дополняется, ada00e000e00но затем сокращается до типичного шестнадцатеричного значения HEX, [ad]a0[0e]00[0e]00что делает ad0e0e, который появляется в jsfiddle выше.

— Мартин

4

Было бы лучше, если бы этот ответ содержал только текущее состояние - история этого ответа и других ответов содержится в редактируемых резюме и / или комментариях.

— Питер Мортенсен

397

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

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>

Развернуть фрагмент

— Майк Кристенсен
источник

7

Хотя мне все еще интересно, почему OP говорит «в CSS», а не «в HTML» - может, они используют супер старый браузер или просто ошибаются?

— Майк Кристенсен

7

Так что он, скорее всего, использует устаревший bgcolorатрибут.

— animuson

12

Недопустимые символы не пропускаются, они рассматриваются как 0.

— Хорошо относитесь к своим модам.

5

(Хотя этот ответ может быть мертв) предложение: используйте цвет фона, чтобы продемонстрировать цвета. Цвет текста находится на такой небольшой относительной площади, что трудно увидеть различия или сходства

— Zoe

304

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

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

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

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

,

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

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

— aWebDeveloper
источник

298

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

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

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

— Алиреза
источник

23

Это так мило объяснение: D: D: D

— Доминик Бучер

2

Такое мудрое и очень простое и прямолинейное объяснение, которое я когда-либо испытывал

— Саурин Вала

1

очень креативный ответ :)

— ahmednawazbutt

222

HTML-спецификация WHATWG имеет точный алгоритм анализа устаревшего значения цвета: 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-разрядные, поэтому начальные нули игнорируются.

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

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

— Юйхонг Бао
источник

Спасибо, вы показали мне, где находится старый исходный код Netscape ... почему его так сложно найти?

— kb1000

202

Ответ:

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

— Webeng
источник

22

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

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

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

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

C00C00000000 => R:C00C, G:0000, B:0000

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

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>

Развернуть фрагмент

— Самера Лакшита
источник

15

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

Отменить все символы, кроме последних 8
Сбросить ведущие нули один за другим если все компоненты имеют начальный ноль
Отменить все символы, кроме первых 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>

Развернуть фрагмент

— Салман А
источник