Хороший… Плохой… Главное — у кого ружьё!
6,4
рейтинг
21 марта 2013 в 14:29

Разработка → Почему HTML считает, что «chucknorris» — это цвет?

HTML*
image

Вы никогда не пробовали задавать цвет фона в HTML при помощи разных строк? Например, строка

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

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

Кстати, если слово chucknorri тоже приводит к красному цвету, то chucknorr дает желтый!

Стало интересно, почему так происходит? Добро пожаловать под кат.

Оказывается, так заведено еще со времен популярности Netscape:

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

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

  • Заменяем все неправильные шестнадцатеричные символы нулями 0, chucknorris превращается в c00c0000000
  • “Добиваем” число нулями до количества знаков, делимого на 3 (11 -> 12), получаем
    c00c 0000 0000
  • Разбиваем на три группы, каждая из которых отвечает за одну компоненту RGB:
    RGB (c00c, 0000, 0000)
  • Обрезаем каждый из аргументов справа, оставляя 2 символа, и получаем наш результат
    RGB (c0, 00, 00) = #C00000 или он же RGB(192, 0, 0).

Вот и получаем мы следующее (jsfiddle):

image

Кстати, похоже, что в CSS спецификацию все-таки изменили, так что неправильные имена цветов попросту игнорируются:

<p><font color='chucknorris'>Красный</font></p>
<p><font color='#cc0000'>И тут тоже красный</font></p>
<p><span style="color: chucknorris">Черный!</span></p>

P.S. GangnamStyle, естественно, тоже сработает.
По мотивам Stackoverflow и Sam's Place.
Владимир Маслов @HotWaterMusic
карма
166,7
рейтинг 6,4
Хороший… Плохой… Главное — у кого ружьё!
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (100)

  • +32
    >Пропускаемые цифры распознаются как 0
    А давайте все дружно не будем пользоваться этим эффектом, а будем писать корректный код?
    Ну пожалуйста…
    • +76
      Чак Норрис не одобряет ваш комментарий!
      • –19


        После такого поста всем срочно по синей таблетке!
        И вы просыпаетесь утром, собираетесь на работу и четко помните, что каждый цвет имеет свой код...
        • +134
          «Чак Норрис ужасный актер! Если он такой крутой, пусть придет и ударит меня головой о клавиаорорапрл б56тилл675лпрпларолпигарапне56»
          • +62
            походу, из последних сил закрыл кавычку и нажал кнопку «написать», мужик!
            • +51
              это уже сам Чак дописал.
              • +51
                Чак Норрис может хлопнуть вращающейся дверью.
                • –10
                  Чак Норрис может хлопнуть вращающейся дверью взглядом!
                • +2
                  Сверхзвук.
                • 0
                  Чак Норрис в принципе может заставить любую дверь вращаться.
            • +19
              походу, из последних сил закрыл кавычку и нажал кнопку «написать», мужик!

              Сначала кавычки открыл, а потом писал внутри ;)
              • –1
                Ну не в IDE ж он коментарий писал.
                • +17
                  А я обычно именно так цитаты и пишу. Сначала открываю кавычки (или скобки), потом перемещаюсь внутрь, потом пишу внутренности, выхожу из кавычек (или скобок) и пишу дальше
                  • +11
                    Ого, я думал я один такой
                    • +16
                      Я думал все программисты такие.
                      • +1
                        Многие IDE так почему-то не думают.
                        • +1
                          ну к примеру sublime text когда открываешь, " { ( автоматически ставит закрывающий символ, тока вот не знаю можно ли sublime text считать IDE, это наверно скорее редактор кода.
                          • +1
                            Он и является редактором. Чтобы ставить закрывающие знаки — не нужно быть IDE.
                            • 0
                              Создается впечатление, что для этого нужно быть не IDE :) по существу вопроса: если есть такая привычка, а ваша IDE c вами не согласна, для этого есть пример как сделать это в AutoHotKey, чуть ниже этого коммента. Вот здесь
                            • +3
                              Уф, успокоили, а то я уж подумал, что я — IDE :)
                    • +15
                      Я так пару бланков в банке испортил. Ставишь сразу 2 кавычки, ставишь между ними ручку, думаешь, просишь новый бланк.
                      • +1
                        Сильная профессиональная деформация налицо :) Я пока только по несколько секунд туплю, когда Backcpace «ищу», сделав ошибку.
                      • 0
                        Так это вы «xxx» из той цитаты?
                        • 0
                          Наверное та цитата взята из этого комментария :)
                • +30
                  Чак Норрис может писать между кавычками на бумаге, неужели вы не в курсе?
                • +2
                  AutoHotKey, например, это умеет ;)
                  :b0:(::){left 1}
                  :b0:"::"{left 1}
                  
    • +2
      Хм. Судя по изменению кармы, можно подумать, что я какую-то гадость предлагаю.
      Или это сам Чак Норрис минусует?:)
      • +30
        Чак Норрис минусует только один раз. Насмерть.
        • +10
          Чак Норрис может забанить НЛО.
          • +8
            Чак Норрис прилетел и ничего здесь не оставил.
            • +9
              Чак Норрис прилетел и оставил здесь НЛО.
  • +9
    сделает фон документа красным во всех браузерах и на всех платформах

    Скажем так, не красным, а кроваво-красным. Все-таки отличие от red есть.
    • +3
      Спасибо за замечание, поправил.
      • +1
        Кроваво-чаковым, я бы даже сказал.
        • +1
          Тогда уж «чаково-красным» :)
    • +4
      [englishman] Bloody red! [/englishman]
      • +2
        Bloody hell!
  • +36
    Страшно представить, что будет если в размер шрифта поставить chucknorris
    • +38
      Никто не выжил, что бы рассказать.
      • +4
        Сейчас попробую, через минуту отпишусь, чем закончилось.
      • +1
        я вот попробовал, написал и со мной ничего не произ
        • +2
          Хабрашаблон уже:

          try { ... /* dangerous things */ } finally { postComment(); }
    • 0
      Что-то вроде этого? Аккуратно скроллим страничку вниз…
  • НЛО прилетело и опубликовало эту надпись здесь
    • +5
      Вот честно, увидел сегодня здесь http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color, вопрос датирован 2011 годом, и подумал еще, что на Хабре наверняка было — не нашел. Ссылки на оригинальную статью и на английский вариант обсуждения тоже привел.
      D3 не читаю, так что кроме как случайным совпадением назвать не могу.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +10
    я сразу попробовал цвет brucelee) Довольно приятный цвет оказался)
    • +5
      А мне показалось, что они с chucknorris похожи
      • +2
        кто нибудь пробовал? — arnoldschwarzenegger
        • +17
          Arnold Schwarzenegger
  • +18
    Еще «zeleniy» интерпретируется как надо.
  • +3
    Напомнило баян про цвет beer :)
  • +2
    Вы попробуйте brucewillis :)
    <body bgcolor="brucewillis"> test </body>
    • +2
      Да что Брюс, какой оказывается приятный цвет GreatRash!
      • +4
        Ну да, ничего
        • +5
          Не очень смотрится цвет в контексте вашего аватара, если второпях не разобраться, что на нем изображено.
          • 0
            Со вчерашнего вечера думал, так и не допер. На что похож мой аватар?
            • +3
              крепкий орешек часть 1 и часть 2, и продолжение в виде бонусной части.
            • 0
              На злобный, говорящий писюн. :)
              • +2
                Это робот-маньяк из футурамы, а у вас странные ассоциации =)
  • +4
    bgcolor=«Chuck Norris» — лучше писать с пробелом и с большой буквы, тоже работает :)
  • +4
    Когда-то был популярен цвет PIZDEC
  • +13
    Чую, кто-то опять запустит диалоги отсюда на баш…
  • –2
    У каждого человека есть свой цвет! Например, bgcolor=«Ilya Gorohov» дает почти черный!
    • –2
      Ну и ник можно ввести, если он >= 6 символов, bgcolor="Tairesh" — салатовый
      • +1
        Мой цвет близок к цвету чака норриса ).
  • +2
    Если чё, в 1972 года Брюс Ли убил Чака Норриса в фильме «Way of the dragon».

    Так что Чак Норрис это зомби.
    • +8
      Цой то жив.
  • +7
    Теперь сарказм будем выделять цветом Чака Норриса
    • +30
      Зачем, если у сарказма свой собственный цвет?
      • +5
        И поясните с какого перепуга минус.
        Попробуйте сами <font color='sarcasm'>
        • +3
          Тссс! Никто не должен знать!
          (это цвет «Paranoid», так можно выражать эмоции!)
          • +4
            Молчу как рыба об лед!
            (font color='dontspeak')
        • +10
          Иронию не заметят: irony
          Сарказм заметят: sarcasm
  • 0
    Вообще, никто не может игнорировать Чака Норриса. Просто HTML думает, что умнее Чака, а CSS просто боится и делает вид, что Чака не заметил.
  • +7
    Теперь не будет отмазки «Нельзя просто так взять и написать в коде „хочу чтобы было красиво“
    это sobeautiful
  • +5
    Спасибо HotWaterMusic за такую статью на Хабре!
    • +2
      Всегда пожалуйста!
  • 0
    Ага, как в том анекдоте, черный это цвет и белый это цвет, поэтому продал я тебе ЦВЕТНОЙ телевизор.
  • +4
    Это можно использовать во всяких IT-головоломках.
  • +8
    По моему мнению, лучший пост за последнее время.
    Особенно среди гугл ридера, патентных войн и реестра запрещенных сайтов.
  • +2
    Даёшь цветовой анализ словаря Ожегова!
  • +1
    Очень давно видел такой вопрос на stackoverflow
    • +1
      Очень давно не читали последних строчек в постах :)
      • +1
        Ну когда писал — этого не было
  • 0
    А вы говорите, что слова не имеют цвета, вот!
  • +1
    Ждем генератор из готовых цветов в цвета-слова по словарю
    • +1
      Да чего тут писать?
      Только вот мое решение не кроссбраузерное и не учитывает вложенных элементов.

      (function() {
      function colorize(element) {
           var translate = function(text) {
                 var result = "", replace_array = { "а":"a","б":"b","ц":"c","д":"d","е":"е","ф":"f" };
                 
                 for (var i = 0; i < text.length; i++)
                    if (text[i] in replace_array)
                         result += replace_array[text[i]];
                    else if (/[\dA-Fa-f]/.test(text[i]))
                         result += text[i];
                    else result += '0';
                 return result;
           };
           var words = element.innerText.split(' '),
                 resulthtml = "";
           
           for (var i = 0; i < words.length; i++) {
                resulthtml += '<font color="' + translate(words[i]) + '" >' + words[i] + '</font> ';
           }
           console.log(resulthtml);
           element.innerHTML = resulthtml;
      }
      
      colorize(document.getElementsByClassName("content")[0]); })();
      
      • 0
        наоборот — подменять готовый цвет, например f0ca00 на кодовое слово

        <p><font color="f0ca00">Этот цвет</font></p>
        <p><font color="forecasting">Такой же как этот</font></p>
        
    • +3
      Генератор фирменного цвета в помощь дизайнерам :)
      • +1
        Главное, чтобы не патентым троллям.
    • 0
      Угу, это ведь по сути хэш-функция — преобразование идёт в одну сторону. Хотя для сохранения паролей использовать было бы небезопасно — из-за очень большого количества коллизий.

      Но сама идея о том, что на какой-нибудь картинке может быть полоска высотой в один пиксель, в которой может быть, теоретически, зашифровано довольно длинное сообщение (если преобразовывать каждое слово в один пиксель), кажется мне довольно интересной. :)
  • +2
    А ассоциативное смысло-цветовое соответствие-то какое! :-)
  • 0
    Так и подмывает посмотреть, что будет в случае с «русскими» цветами типа color='Jeegoorda' или color='Boyarskiy', но я что-то боюсь пробовать. ;-)
    • +3
      <body bgcolor="dimabilan"> test </body>
      

      Что-то оно всё таки знает :-)
  • +1
    Всем спасибо :)
    Пятница удалась.
  • 0
    Если длина каждого компонента RGB после разрезки больше 2, а первым символом выступает 0, то нужно удалить 0 из начала каждого компонента.

    specialist
    00ec0a0000
    00ec0a000000
    00ec 0a00 0000
    0ec a00 000
    0ea000
  • 0
    «Цветовой тест Тьюринга» пройден

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


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

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.