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

    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.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 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]
                          • +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
                                  • +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».

                                                  Так что Чак Норрис это зомби.
                                                • +7
                                                  Теперь сарказм будем выделять цветом Чака Норриса
                                                  • +30
                                                    Зачем, если у сарказма свой собственный цвет?
                                                    • +5
                                                      И поясните с какого перепуга минус.
                                                      Попробуйте сами <font color='sarcasm'>
                                                      • +3
                                                        Тссс! Никто не должен знать!
                                                        (это цвет «Paranoid», так можно выражать эмоции!)
                                                        • +4
                                                          Молчу как рыба об лед!
                                                          (font color='dontspeak')
                                                        • +10
                                                          Иронию не заметят: irony
                                                          Сарказм заметят: sarcasm
                                                    • 0
                                                      Вообще, никто не может игнорировать Чака Норриса. Просто HTML думает, что умнее Чака, а CSS просто боится и делает вид, что Чака не заметил.
                                                      • +7
                                                        Теперь не будет отмазки «Нельзя просто так взять и написать в коде „хочу чтобы было красиво“
                                                        это sobeautiful
                                                        • +5
                                                          Спасибо HotWaterMusic за такую статью на Хабре!
                                                        • 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>
                                                                                    

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