Почему 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.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 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
                                  Что-то вроде этого? Аккуратно скроллим страничку вниз…
                                • UFO just landed and posted this here
                                    +5
                                    Вот честно, увидел сегодня здесь http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color, вопрос датирован 2011 годом, и подумал еще, что на Хабре наверняка было — не нашел. Ссылки на оригинальную статью и на английский вариант обсуждения тоже привел.
                                    D3 не читаю, так что кроме как случайным совпадением назвать не могу.
                                    • UFO just landed and posted this here
                                      +10
                                      я сразу попробовал цвет brucelee) Довольно приятный цвет оказался)
                                      • UFO just landed and posted this here
                                          +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>
                                                                                            

                                                                                            Only users with full accounts can post comments. Log in, please.