В любом языке программирования есть особые моменты, которые людям кажутся невероятными и смешными, но для компьютеров выглядят совершенно логичными. Вы наверняка встречали много абсурдных концепций в JavaScript. Да, JS в этом отношении интересен, но сегодня у нас другой гость: HTML.
Что такое HTML?
HTML — это язык разметки, разработанный специально для веб-сред. Любой сайт, какой вы встречаете в интернете, содержит разметку, представляющую его содержимое и иерархию. Если вы захотите увидеть эту разметку, то для этого нужно просто кликнуть на интересующей части страницы правой кнопкой и выбрать “Просмотреть код элемента”.
Что происходит с атрибутами цвета в HTML?
С появлением CSS атрибуты стиля HTML утратили актуальность и постепенно их использовать перестали. Тем не менее браузеры все еще распознают и выполняют эти атрибуты. К ним относятся bgcolor и color, которые и станут героями нашей статьи.
Вот вам факт. Нижеприведенный HTML-код абсолютно валиден, и его выводом будет не просто черный экран, а темно-красный.
<body bgcolor="chucknorris"> I am valid. </body>Вы можете подумать, что это шутка, скрытая в языке его создателями просто забавы ради, и это стало бы отличным сюрпризом. Но, к сожалению, это просто (!) недосягаемый разум HTML. Атрибуты bgcolor и color ожидают, что их значениями будут названия цветов, либо hex- или RGB-значения. При этом происходит проверка, является ли значение названием цвета. Если нет, то проверка повторяется уже для RGB. Если и здесь отрицательный ответ, то проверяется наличие hex-значения.
HTML является настолько мощным (!) языком, что автоматически помещает # перед значением, если вы сами этого не делаете. Поэтому и FF00FF, и #FF00FF в HTML будут рассматриваться одинаково. Более того, он может конвертировать любое строковое значение в шестнадцатеричное (hex), используя алгоритм, который я объясню ниже. Вообще, вся эта история с Чаком Норрисом вырисовывается как раз из этого алгоритма.
Алгоритм
Для современном HTML (HTML5) bgcolor и color признаны устаревшими, но браузеры все равно могут распознавать и выполнять эти атрибуты. Обычно они ожидают значение цвета, следовательно, если передать этим атрибутам строку, то HTML постарается преобразовать ее в hex-код и применить его в виде значения. Алгоритм, реализующий это преобразование, состоит из семи шагов. При этом он способен конвертировать любую не-hex строку в hex-код.
- Браузер пробует распознать цвет.
- Если ему это не удается, находит hex-символы.
- Заменяет все не-hex символы на 0.
- Если количество символов не кратно 3, добавляет 0, пока оно таковым не станет.
- Делит вывод предыдущего шага на три равные части.
- Каждая часть усекается до двух символов путем удаления всех, кроме двух первых.
- Усеченные части поочередно объединяются, и в результате получается hex-код.
Вот этот самый алгоритм и превращает Чака Норриса в красный. Далее мы применим его шаг за шагом и посмотрим, действительно ли Чак — это красный.
1. Распознавание атрибутов
Браузер начинает интерпретировать HTML для формирования содержимого сайта. Он проходит по всему элементу тела (body) и видит в нем атрибут bgcolor, определяющий фоновый цвет этого элемента.
<body bgcolor="chucknorris"> ... </body>2. Определение цвета
Браузер видит атрибут bgcolor как chucknorris, который не является названием цвета или значением RGB. Тогда он решает, что переданное значение должно быть шестнадцатеричным, но в зашифрованном виде, и запускает алгоритм конвертации.
3. Замена символов
Hex-значения состоят из 16 разных символов, которые могут включать цифры от 0 до 9 и буквы от A до F. Прочие символы к шестнадцатеричным не относятся. На этом шаге браузер заменяет все не-hex символы на 0, который является шестнадцатеричным.
В chucknorris единственным hex-символом является c, значит все остальные заменяются на 0.
chucknorris => c00c00000004. Добавление нулей
Цвета в цифровом пространстве состоят из трех компонентов, а именно красного, зеленого и синего (RGB). Именно поэтому из созданной на предыдущем шаге строки необходимо извлечь три части. Однако, как можно заметить, выходная строка содержит 11 символов, которые поровну на три части не делятся. Следовательно, согласно алгоритму, браузер должен добавить в конец этой строки один 0 .
c00c0000000 => c00c000000005. Извлечение трех каналов (RGB)
Теперь, когда строка состоит из 12 символов, браузер может разделить ее на 3 равные части, каждая из которых будет представлять цветовой канал слева направо: красный, зеленый и синий.
c00c00000000 => c00c 0000 00006. Усечение строк
Каждая подстрока содержит четыре символа. Тем не менее браузеру для формирования hex-кода цвета от каждого канала нужно лишь по два. На этом шаге подстроки усекаются до двух символов, чтобы удовлетворить этим требованиям. Делается это путем удаления всех символов, кроме первых двух.
c00c 0000 0000 => c0 00 007. Формирование hex-кода
Пришло время формирования hex-кода и закрашивания фонового цвета Чаком Норрисом. У нас есть красный, зеленый и синий каналы по-отдельности. Для создания из них hex-кода нужно добавить в начало # и следом поочередно разместить их значения.
Та-дааа! Мы только что извлекли шестнадцатеричный код из chucknorris, представленный как #C00000, то есть темно красный.
Заключение
С помощью этого алгоритма вы можете легко узнать hex-эквивалент любой строки. Так что теперь пора вам самим попробовать и посмотреть, что получится. Есть много забавных допустимых строк, из которых сгенерируются разные цвета. Но имейте в виду, что работает это только в HTML, не в CSS. Следовательно, попытка установить цвета, используя стиль с кастомными строками, просто ничего не даст. Также помните, что атрибуты bgcolor и color в HTML5 считаются устаревшими, поэтому старайтесь избегать их применения в реальных проектах.
Читайте также:
- Возможности автозаполнения для веб-разработчиков
- Организация таблиц стилей: самые свежие рекомендации
- Топ 5 Open Source HTML5 видеоплееров
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Can Durmus: Did You Know HTML Thinks Chuck Norris Is a Color?
