От автора: ключевые слова цветов – один из двух старейших методов присвоения цвета на веб-страницах, который до сих пор крайне полезен в веб-дизайне и разработке. Всего в CSS 149 именованных цветов, которые вызываются по различным ключевым словам (посмотреть можно в демо к уроку, там же есть эквиваленты этих цветов в шестнадцатеричной системе счисления). У именованных цветов есть пара особенностей.
Во-первых, в CSS применяются как ключевые слова цветов, так и другие системы цветов. К примеру, ключевые слова можно использовать, чтобы задать фон для тега body при помощи стилей по ссылке на файл, ограниченных стилей или встраиваемых стилей:
|
1 2 3 |
body { background-color: tomato; } |
По большей части CSS регистронезависим. Это означает, что ключевые слова можно писать в верхнем регистре (BLACK), нижнем (black) и смешанном. Для большей ясности и читаемости предпочтителен нижний регистр.
Глядя на картинку выше, можно заметить, что в ключевых словах используются как американизмы, так и нормальные слова gray и grey, и цвет у них один и тот же. Тем не менее, в IE со словом grey возникают проблемы, оно отрисовывается зеленым цветом. По этой причине лучше всегда использовать gray.
transparent – специальное ключевое слово. С технической точки зрения оно относится не к hex цветам, а к RGB значению 0 alpha, а точнее rgb(0, 0, 0, 0). Значение transparent подходит везде, где можно прописать цвет, но чаще всего его используют в градиентах и рамках. В демо выше ключевое слово transparent я записал для ясности в восьмизначной форме по аналогии с hex цветами.
rebeccapurple – самое молодое ключевое слово в CSS. Ключевое слово появилось в честь Ребекки Майер. Ее отец Эрик Майер постоянно вносит что-то новое в стандарты CSS. Смерть Ребекки в шестилетнем возрасте потрясло все сообщество. В ее честь в спецификацию был добавлен цвет rebeccapurple, который поддерживается во всех последних версиях браузеров.
Возможные недостатки
У ключевых слов есть несколько возможных недостатков, о которых вам стоит знать:
Ограниченная выборка цветов. При помощи ключевых слов можно выбрать только те цвета в CSS, у которых есть имя.
Их нельзя настроить. В отличие от HSL, RGB или даже hex цветов, цвета по ключевым словам нельзя сделать светлее или темнее.
Сложно запомнить имена цветов. black, white и red запомнить легко, а вот darkgoldenrod не очень.
Не всегда прослеживается логика. Вы могли заметить, что darkgray на самом деле светлее, чем просто gray, и все это из-за исторического анахронизма. Точно так же darkslategrey больше зеленый, чем серый.
Неправильное написание может привести к неожиданным результатам. Браузер пытается перевести неизвестное ключевое слово в hex систему, что может привести к генерации совсем другого цвета. Произвольные слова также могут генерировать цвета. К примеру, <body bgcolor=»chucknorris»> превращается в красный цвет.
Обратите внимание, что для изменения цвета никогда нельзя использовать инлайновые атрибуты. Делайте это через CSS. Тем не менее, в сети до сих пор полно примеров данной практики.
Подводя итог на основе возможных минусов, я, как правило, использую ключевые слова при прототипировании, а после доделки дизайна перехожу на HSL. Описанные выше проблемы можно решить:
В Sass можно создавать свои ключевые слова цветов. Я создал свою систему цветов (The New Defaults) с более натуральными и простыми для запоминания именами.
В Sass также можно делать цвета светлее и темнее (в том числе и по ключевым словам).
Если вы хотите запомнить ключевые слова CSS цветов, то специально для вас Крис Гайлман создал игру по подбору цвета по ключевым словам.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
