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

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

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

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

CSS :root { –color: 255 0 0; } .selector { background-color: rgb(var(–color) / 0.5); }

1234567

:root {  –color: 255 0 0;} .selector {  background-color: rgb(var(–color) / 0.5);}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

CSS :root { –color-rgb: 251 0 0; –color-hsl: 5 10% 50%; } .selector { background-color: rgb(var(–color-rgb) / 0.5); background-color: hsl(var(–color-hsl) / 0.5); }

123456789

:root {  –color-rgb: 251 0 0;  –color-hsl: 5 10% 50%;} .selector {  background-color: rgb(var(–color-rgb) / 0.5);  background-color: hsl(var(–color-hsl) / 0.5);}

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

CSS :root { –color: #fb0000; } .selector { /* Coercing a HEX color to an RGB one doesn’t work */ background-color: rgb(var(–color) / 0.5); }

12345678

:root {  –color: #fb0000;} .selector {  /* Coercing a HEX color to an RGB one doesn’t work */  background-color: rgb(var(–color) / 0.5);}

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

CSS :root { –color: #ff0000; } .selector { /* You can’t dynamically specify the alpha channel. */ background-color: var(–color) + “80”; }

12345678

:root {  –color: #ff0000;} .selector {  /* You can’t dynamically specify the alpha channel. */  background-color: var(–color) + “80”;}

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

CSS :root { –color: green; } .selector { /* how would you even??? */ background-color: var(–color) + “opacity: .5”; }

12345678

:root {  –color: green;} .selector {  /* how would you even??? */  background-color: var(–color) + “opacity: .5”;}

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

CSS :root { –color: #fb0000; } .selector { /* can’t do this */ background-color: rgb(var(–color) / 0.5); /* can do this */ background-color: rgb(from var(–color) r g b / .5); }

1234567891011

:root {  –color: #fb0000;} .selector {  /* can’t do this */  background-color: rgb(var(–color) / 0.5);    /* can do this */  background-color: rgb(from var(–color) r g b / .5);}

Это работает даже с ключевыми словами!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS :root { –color: red; } .selector { background-color: rgb(from var(–color) r g b / .5); }

1234567

:root {  –color: red;} .selector {    background-color: rgb(from var(–color) r g b / .5);}

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

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

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

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

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

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

CSS :root { /* Define individual channels of a color */ –color-h: 0; –color-s: 100%; –color-l: 50%; } .selector { /* Dynamically change individual channels */ color: hsl( var(–color-h), calc(var(–color-s) – 10%), var(–color-l) ); }

123456789101112131415

:root {  /* Define individual channels of a color */  –color-h: 0;  –color-s: 100%;  –color-l: 50%;} .selector {  /* Dynamically change individual channels */  color: hsl(    var(–color-h),    calc(var(–color-s) – 10%),    var(–color-l)  );}

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

CSS :root { –color: #ff0000; } .selector { color: hsl(from var(–color) h calc(s – 10%) l); }

123456

:root {  –color: #ff0000;}.selector {    color: hsl(from var(–color) h calc(s – 10%) l);}

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

CSS :root { –color: #ff0000; } .selector { /* syntax: hsl(from var() h s l / alpha) */ /* change the transparency */ color: hsl(from var(–color) h s l / .5); /* change the hue */ color: hsl(from var(–color) calc(h + 180deg) s l); /* change the saturation */ color: hsl(from var(–color) h calc(s + 5%) l); /* change all of them */ color: hsl( from var(–color) calc(h + 10deg) calc(s + 5%) calc(l – 10%) / calc(alpha – 15%) ); }

1234567891011121314151617181920212223242526

:root {  –color: #ff0000;} .selector {  /* syntax: hsl(from var() h s l / alpha) */    /* change the transparency */  color: hsl(from var(–color) h s l / .5);    /* change the hue */  color: hsl(from var(–color) calc(h + 180deg) s l);    /* change the saturation */  color: hsl(from var(–color) h calc(s + 5%) l);    /* change all of them */  color: hsl(    from var(–color)    calc(h + 10deg)    calc(s + 5%)    calc(l – 10%)    /    calc(alpha – 15%)  );}

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

Вывод

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

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

Автор: Jim Nielsen

Источник: webformyself.com