Нова синтаксиса відносних кольорів у CSS — використання from та calc()

Незалежно від того, чи це функція кольору rgb() чи hsl(), тепер підтримується відносний синтаксис з використанням ключового слова from. Це дозволяє встановлювати схожі або доповнюючі кольори на основі існуючого значення кольору.

Це особливо корисно для реалізації інтерактивних ефектів, таких як стани при наведенні.

Суть відносного синтаксису — розбиття кольорів.

Давайте спершу розглянемо синтаксис.
Цей синтаксис може виглядати складно, але насправді він досить простий і легко засвоюється.

Наприклад, щоб встановити колір тексту червоним:

p {  
 color: rgb(from red r g b / alpha);  
}

Ефект реального часу виглядає так:

Якщо ви використовуєте браузер Chrome або Safari версії 18 і вище, ви побачите, що текст вище (включаючи зовнішній пунктирний текст) буде червоним.

Значення r, g, b та alpha насправді є розкладеними компонентами червоного кольору з обчисленими значеннями 255, 0, 0 та 1 (або 100%).

Тому ми можемо застосувати ці розкладені значення, щоб встановити відповідний колір.

Встановлення безпосередньо

Значення r, g, b та alpha можна безпосередньо замінити числами для зміни обчисленого значення кольору.

Наприклад, щоб встановити червоний колір з 50% прозорістю, ми можемо зробити так:

p {  
 color: rgb(from red r g b / .5);  
}

Ефект реального часу виглядає так:

Цей метод простіший, ніж використання color-mix(), але color-mix() підтримується вже довше і має кращу сумісність.

Наприклад, значення RGB для фіолетового — це rgb(255, 0, 255), тому замінивши b у коді вище на 255, ми отримаємо фіолетовий.

p {  
 color: rgb(from red r g 255 / alpha);  
}

Зверніть увагу, що в реальній розробці ми б не використовували вищезазначений метод.
Це просто демонстрація синтаксису.

Використання calc() на практиці

У виробництві зазвичай використовують функцію calc(), щоб виконувати відносні обчислення значень кольорів. Причина проста: якщо ви вже знаєте точне значення кольору, навіщо використовувати відносний синтаксис? Це буде зайвим.

Напівполовинний червоний колір.

canvas {  
 background-color: rgb(from red calc(r / 2) g b / alpha);  
 /\* рівно rgb(128,0,0) \*/  
}

На цьому етапі це темно-червоний фон.

Наведений приклад не є поширеним; він лише демонструє, як працює calc().

Текст, що автоматично адаптується до кольору фону

Тепер перейдемо до основної теми.

Насправді, я використовую концепцію автоматичного адаптування тексту до кольору фону вже багато років.
Однак раніше для цього доводилося використовувати окремо змінні r, g і b.

Тепер, завдяки відносному синтаксису для значень кольорів, наша реалізація стала набагато простішою.

Припустимо, є кнопка з класом btn:

\Я кнопка\

.btn {  
 font-size: 150%;  
 padding: .5em 2em;  
 --bgcolor: var(--color, #2c87ff);  
 background-color: var(--bgcolor);  
 color: hsl(from var(--bgcolor) h s calc((l - 60) * -999999));  
 border: .2em solid;  
 border-color: hsl(from var(--bgcolor) h s calc(l - 20 * clamp(-1, calc(l - 50), 1)));  
}

Ефект рендерингу в реальному часі виглядає наступним чином:

Змінюючи значення поля введення кольору на демонстраційній сторінці, ви зможете побачити, що коли колір змінюється, текст на кнопці автоматично адаптується до білого або чорного кольору. Колір рамки, з іншого боку, використовує темний колір на світлому фоні і світлий колір на темному фоні.
Це розумна реалізація, а ефект показано на відео нижче:

Наведення, клік та інші зміни кольорів у суміжних станах

При наведенні на текстове посилання колір буде відповідним чином підсвічено.

Раніше ми обирали два різних значення кольорів для цього.

Тепер, крім використання функції color-mix() (змішування з білим), ми також можемо використовувати відносний синтаксис кольорів. Однак ми більше не можемо використовувати функцію rgb(); замість цього потрібно використовувати функцію hsl().
Це тому, що зміна кольору для таких взаємодій зазвичай полягає в коригуванні яскравості або насиченості, і функція hsl() ідеально підходить для цієї мети.

\Я — посилання\

.link {  
 --color: #2a80eb;  
 color: var(--color);  
}  
.link:hover {  
 color: hsl(from var(--color) h s calc(l + 10));  
}

Аналогічно, при натисканні на кнопку фон потемніє відповідно.

Окрім використання box-shadow для внутрішньої тіні або властивості filter з фільтром яскравості, ми також можемо спробувати використовувати відносні значення кольорів.

Приклад використання:

\Я — кнопка\

.btn {  
 --color: #2a80eb;  
 background-color: var(--color);  
 color: #fff;  
 border: 0;  
}  
.btn:active {  
 background-color:hsl(from var(--color) h s calc(l - 10));  
}

Є так багато нових можливостей, що це просто вражає.

Відносний синтаксис кольорів у CSS тепер підтримується всіма сучасними браузерами.
Ось скріншот нижче:

Ці функції почали підтримуватися лише нещодавно.

З огляду на попередній досвід, ймовірно, ще потрібно буде два роки, щоб ми змогли використовувати їх у проектах, таких як середньо-платформні системи.

Багато нових функцій перетинаються між собою, такі як вкладення в CSS і синтаксис @scope у CSS, відносні кольори в CSS і функція color-mix(), і так далі.

Проблема в тому, що підтримка браузерів для цих функцій непостійна, що ускладнює їх застосування в продуктивних середовищах у короткостроковій перспективі. В результаті, майже ніхто в спільноті не обговорює їх.

Поточні можливості JavaScript цілком достатні для обробки всіх інтерактивних сценаріїв.

Ці "корисні" функції не мають терміновості та необхідності, через що людям важко сприймати їх серйозно.
Насправді, було б дивно, якби це було інакше.

Здається, що люди, які встановлюють стандарти, впроваджують нові функції для своїх «KPI», постійно додаючи все більше і більше. Чи є ця тенденція "більше — краще" доброю чи помилкою, покаже лише час.

Перекладено з: A New CSS Relative Color Syntax — Using from and calc()