9 Вопрос: Почему HTML считает «чакноррис» цветным?

вопрос создан в Sun, Mar 10, 2019 12:00 AM

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

р>

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

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

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

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

    
7056
  1. В качестве примечания: не используйте bgcolor. Используйте CSS background.
    2016-09-04 12: 40: 40Z
  2. Почему вы хотите добавить цвет фона chucknorris? Какой был ожидаемый цвет?
    2016-11-24 05: 01: 13Z
  3. @ masterFly: я не знаю, почему мой комментарий под принятым ответом был удален за то, что он "неконструктивен", потому что он отвечает на ваш вопрос довольно хорошо: люди экспериментируют с эти вещи все время. Мне было всего 10 лет, когда я обнаружил это, и все, что я делал в то время, было возиться и смотреть, что случилось. У вас не всегда должна быть практическая причина что-то делать, особенно такая легкомысленная.
    2016-12-01 03: 36: 11Z
  4. и <body bgcolor="stevensegal"> test < /body > зеленый
    2017-10-01 08: 45: 32Z
9 ответов                              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", и, ну, он получается коричневым.

    
6511
2016-01-31 12: 08: 56Z
  1. Обратите внимание, что, несмотря на то, что говорится в этом сообщении в блоге, когда вы приступаете к обработке строк из 3 символов, вы дублируете каждый символ, а не добавляете их 0. то есть 0F6 становится #00FF66, а не #000F06.
    2013-02-05 20: 32: 22Z
  • @ usr: HTML построен на намеренном игнорировании некорректного ввода;)
    2013-02-05 23: 43: 02Z
  • Вы также можете использовать мою произвольную строку в цвете css конвертер, чтобы получить цвет для конкретной строки. Он основан на 5 шагов для вычисления строки цвет Джереми Гуделла .
    2013-03-11 16: 45: 17Z
  • Скрытая возможность для семантики? Вы можете сделать несколько страниц с ошибками с этим: <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span> Вы можете добавить div с другим фоном или что-то в этом роде, так что это не так уж эстетично.
    2013-12-16 22: 47: 35Z
  • @ Theraot bgcolor="success" тоже хороший зеленый. Интересно, что можно переопределить эти цвета с помощью селекторов атрибутов /значений CSS (например, td[bgcolor="chucknorris"] {...}).
    2016-03-01 12: 39: 17Z
  • Прошу прощения за несогласие, но в соответствии с правилами анализа устаревшего значения цвета, опубликованного @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, с тех пор отредактировали свои ответы, чтобы включить исправление.

        
    900
    2017-10-05 17: 10: 38Z
    1. Я понял это, я неправильно истолковал некоторые инструкции синтаксического анализа: "adamlevine" = "ada00e000e" = "ada00e000e00" = "ada0 0e00 0e00" = "ad 0e 0e "- Отлично !!
      2012-10-17 18: 11: 21Z
    2. Если вам интересно, я разместил 5-шаговый алгоритм в виде ОБНОВЛЕНИЯ по аналогичному вопросу, который я разместил сегодня: 2012-10-17 18: 50: 28Z
    3. @ TimPietrusky создал этот потрясающий невероятный демонстрационный инструмент для случайных названий цветов. Просто зайдите сюда: randomstringtocsscolor.com , нажмите на поле и введите «chucknorris».
      2014-02-06 19: 01: 38Z
    4. adamlevine работает в соответствии с jsfiddle.net/LdyZ8 /2959 но буквы блокируются в ada00e000e, который дополняется до ada00e000e00, но затем сокращается до типичного6-значное шестнадцатеричное значение [ad]a0[0e]00[0e]00, что делает ad0e0e, который появляется в jsfiddle выше.
      2016-01-26 22: 26: 26Z
    5. Было бы лучше, если бы этот ответ only содержал текущее состояние - историю этого ответа и другие ответы принадлежит в редактировании резюме и /или комментариев.
      2016-01-31 12: 13: 22Z

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

    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>
        
    365
    2014-09-17 16: 09: 13Z
    1. Хотя мне все еще любопытно, почему OP говорит «в CSS», а не «в HTML» - возможно, они используют очень старый браузер или просто ошибаются
      2011-11-29 23: 19: 12Z
    2. Так что он, скорее всего, использует устаревший атрибут bgcolor.
      2011-11-29 23: 20: 15Z
    3. Недопустимые символы не пропускаются, они рассматриваются как 0.
      2012-09-28 03: 30: 30Z
    4. (хотя этот ответ может быть мертвым): используйте вместо этого цвет фона для демонстрации цветов. Цвет текста находится на такой небольшой относительной площади, что трудно увидеть различия или сходство
      2017-06-07 11: 37: 08Z

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

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

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

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

    .

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

      

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

        
    272
    2018-06-11 06: 08: 02Z

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

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

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

     Почему HTML считает «chucknorris» цветом? »> </a> </p>
    </div>
<div class = 217

    2019-05-28 06: 53: 05Z
    1. Это очень симпатичное объяснение: D: D: D
      2019-06-09 21: 02: 13Z

    Спецификация WHATWG HTML имеет точный алгоритм анализа устаревшего значения цвета: https: //html.spec .whatwg.org /многостраничный /infrastructure.html # правила для разбора-а-унаследованного-цветового значения

    Код 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;
    }
    
        
    207
    2017-01-26 18: 45: 01Z

    Ответ.

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

    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>
        
    12
    2018-04-17 19: 16: 30Z
    1. Это очень старая разметка.
      2018-08-13 17: 07: 08Z

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

    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>
        
    7
    2018-10-17 14: 53: 02Z
    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);
      });
    });
    источник размещен Вот