прозрачность - html text color




Почему HTML считает, что «chucknorris»-это цвет? (6)

Большинство браузеров просто игнорируют любые 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>

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

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

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

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

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


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

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

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

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

,

На более светлой ноте

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


Сожалею, что не согласен, но согласно правилам для разбора устаревшего значения цвета, опубликованного @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 , с тех пор отредактировали свои ответы, включив исправление.


Спецификация 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-битные, поэтому ведущие нули игнорируются.

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

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

Правила разбора цветов по устаревшим атрибутам включают дополнительные шаги, чем те, которые указаны в существующих ответах. Компонент truncate до 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>


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

потому что 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>







background-color