19.01.2022

Динамическое управление цветами с помощью относительных цветов CSS

Динамическое управление цветами с помощью относительных цветов CSS

От создателя: относительные цвета CSS обеспечивают динамическую манипуляцию цветами, которую я всегда желал получить в обычном CSS, с того времени как цветовые функции Sass в первый раз появились на сцене ( darken(), lighten() и т. д.).

Позвольте мне разъяснить подробнее, почему это так важно для меня.

Динамические цвета в CSS через прозрачность

Я писал о разработке оттенков цвета с помощью переменных CSS, где тщательно описывается, как создавать динамические цвета с внедрением пользовательских свойств и вспомогательной цветовой функции альфа-канала. К примеру:

CSS

Но у такого подхода есть ограничения. Во-1-х: все цветовые значения пользовательского свойства должны быть определены в цветовом пространстве поддерживающем альфа-канал цветовой функции (rgb(), rgba(), hsl(), и hsla()). К примеру:

CSS

Вы не сможете «переводить» значение цвета пользовательского свойства от 1-го типа к другому:

CSS

Динамические цвета в CSS с внедрением значений цвета HEX невозможны. Хотя у вас есть возможность указать альфа-канал для цвета HEX, вы сможете сделать это только декларативно (т.е. #ff000080). В CSS нет понятия конкатенации строк.

CSS

И если вы используете именованные цвета в CSS, вам не получится сделать что-нибудь динамическое.

CSS

Но с относительными цветами в CSS все изменяется! Вы можете объявить значение пользовательского характеристики, используя любой желаемый цветовой тип (шестнадцатеричный, rgb, hsl, lch, либо даже с помощью ключевого слова, к примеру green), и на лету преобразовать его в хоть какой другой цветовой тип:

CSS

Это работает даже с главными словами!

CSS

Для меня самый обычной способ описать то, что здесь происходит, — это заимствовать терминологию из JavaScript. С помощью относительных цветов в CSS вы сможете декларативно выполнить своего рода приведение типа от 1-го цветового типа к другому, а потом деструктурировать нужные вам значения.

Я не знаю, поразило ли это вас так же очень, как и меня, но уделите минутку, чтобы подумать об этом. Представьте для себя возможности, которые начинают открываться с таким синтаксисом.

Динамические цвета в CSS через calc()

Динамическое изменение цвета с внедрением альфа-канала имеет свои недостатки. Прозрачные цвета перебегают в цвета, на которых они размещены. Вы можете получить «немного более светлый» вариант, изменив непрозрачность цвета, но он будет не всюду одинаковым. Это зависит от того, поверх какого цвета либо цветов он находится.

Динамическое управление цветами с помощью относительных цветов CSS

Время от времени нужен более светлый цвет без прозрачности. Тот, который непрозрачен. Либо иногда вам нужен «немного более черный» цвет, и в этом случае вы не сможете настроить альфа-канал, надеясь, что цвет станет малость темнее.

Раньше вы могли достигнуть такой гибкости в CSS, сделав детальные опции пользовательских свойств и определив каждый канал персонально:

CSS

Учтите, что при таком подходе, не поддерживаются шестнадцатеричные значения цвета. С относительными цветами CSS в сочетании с calc(), настроить динамическое изменение цвета сейчас очень просто.

CSS

Круто! Приведу еще несколько примеров для полноты:

CSS

Умопомрачительно! Цветовые функции Sass, позвольте мне указать вам на выход!

Вывод

Деструктуризация? Приведение типов? Эти слова принадлежат посту о CSS? CSS — это язык программирования? Единственное, что нам на данный момент нужно, это возможность определять пользовательские функции в CSS — тогда вы можете создавать свои собственные многоразовые функции lighten() и darken(). Но я отвлекся.

Помощь этого синтаксиса предоставлена в Safari Technology Preview 122. На момент написания этой статьи это все еще экспериментальная функция, потому вы должны включить ее в строке меню «Разработка> Экспериментальные функции» (Develop > Experimental Features).

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *