Почему 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>

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

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

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

Ответы: