Від автора: ключові слова квітів – один з двох найстаріших методів присвоєння кольору на веб-сторінках, який досі вкрай корисний у веб-дизайні і розробки. Всього в CSS 149 іменованих кольорів, які викликаються за різними ключовими словами (подивитися можна в демо до уроку, там же є еквіваленти цих квітів в шістнадцятковій системі числення). У іменованих кольорів є пара особливостей.
По-перше, в CSS застосовуються як ключові слова квітів, так і інші системи кольорів. Наприклад, ключові слова можна використовувати, щоб задати фон для тега body за допомогою стилів посилання на файл, обмежених стилів або вбудованих стилів:
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 систему, що може призвести до генерації зовсім іншого кольору. Довільні слова також можуть генерувати кольору. Приміром, перетворюється в червоний колір.
Зверніть увагу, що для зміни кольору ніколи не можна використовувати инлайновые атрибути. Робіть це через CSS. Тим не менш, в мережі досі повно прикладів даної практики.
Підводячи підсумок на основі можливих мінусів, я, як правило, використовую ключові слова прототипировании, а після доробки дизайну переходжу на HSL. Описані вище проблеми можна вирішити:
У Sass можна створювати свої ключові слова квітів. Я створив свою систему кольорів (The New Defaults) з більш натуральними і простими для запам’ятовування іменами.
У Sass також можна робити кольору світліше і темніше (в тому числі й за ключовими словами).
Якщо ви хочете запам’ятати ключові слова CSS квітів, то спеціально для вас Кріс Гайлман створив гру з підбору кольору за ключовими словами.
