Несколько нюансов использования пользовательских свойств

0 0

Добавим в CSS пару пользовательских свойств:

CSS html { –color-1: red; –color-2: blue; }

1234html {  –color-1: red;  –color-2: blue;}

Давайте сразу воспользуемся ими, чтобы сделать фоновый градиент:

Несколько нюансов использования пользовательских свойств

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

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

CSS html { –color-1: red; –color-2: blue; –bg: linear-gradient(to right, var(–color-1), var(–color-2)); }

123456html {  –color-1: red;  –color-2: blue;   –bg: linear-gradient(to right, var(–color-1), var(–color-2));}

Теперь предположим, что на странице есть пара div:

<div></div> <div class=”variation”></div>

12<div></div><div class=”variation”></div>

Позвольте мне стилизовать их:

CSS div { background: var(–bg); }

123div {  background: var(–bg);}

Это работает! Теперь позвольте мне добавить несколько изменений. Я не хочу, чтобы цвет менялся с красного на синий, я хочу, чтобы он изменился с зеленого на синий. Проще говоря, я изменю красный цвет на зеленый:

CSS html { –color-1: red; –color-2: blue; –bg: linear-gradient(to right, var(–color-1), var(–color-2)); } div { background: var(–bg); } .variation { –color-1: green; }

123456789101112html {  –color-1: red;  –color-2: blue;   –bg: linear-gradient(to right, var(–color-1), var(–color-2));}div {  background: var(–bg);}.variation {  –color-1: green;}

Это не работает, друзья.

Проблема, насколько я понимаю, в том, что –bg никогда не было объявлено ни в одном из div. Его можно использовать, потому что он был объявлен выше, но к тому времени, когда используется –bg, его значение заблокировано. Тот факт, что вы меняете какое-то другое свойство, которое использует –bg во время его объявления, не означает, что свойство прекращает поиск мест, где оно использовалось, и обновляет все, что использовало его в качестве зависимости.

Ух, такое объяснение кажется не совсем правильным. Но это лучшее, что у меня есть. Решение? Ну есть несколько.

Решение 1. Область видимости переменной.

CSS html { –color-1: red; –color-2: blue; } div { –bg: linear-gradient(to right, var(–color-1), var(–color-2)); background: var(–bg); } .variant { –color-1: green; }

123456789101112html {  –color-1: red;  –color-2: blue;} div {  –bg: linear-gradient(to right, var(–color-1), var(–color-2));  background: var(–bg);}.variant {  –color-1: green;}

Теперь, когда –bg объявлено в обоих div, изменение зависимости —color-1 действительно работает.

Решение 2. Разделите запятыми селектор, в котором вы устанавливаете большинство переменных.

Допустим, вы устанавливаете кучу переменных в :root. Тогда вы столкнетесь с проблемой. Вы можете просто добавить дополнительные селекторы к основному, чтобы убедиться, что вы попали в нужную область.

CSS html, div { –color-1: red; –color-2: blue; –bg: linear-gradient(to right, var(–color-1), var(–color-2)); } div { background: var(–bg); } .variation { –color-1: green; }

12345678910111213html,div {  –color-1: red;  –color-2: blue;   –bg: linear-gradient(to right, var(–color-1), var(–color-2));}div {  background: var(–bg);}.variation {  –color-1: green;}

Несколько нюансов использования пользовательских свойств

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

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

В другом, возможно, менее надуманном примере это могло бы выглядеть примерно так:

CSS :root, .button, .whatever-it-is-a-bandaid { –padding-inline: 1rem; –padding-block: 1rem; –padding: var(–padding-block) var(–padding-inline); } .button { padding: var(–padding); } .button.less-wide { –padding-inline: 0.5rem; }

1234567891011121314:root, .button,.whatever-it-is-a-bandaid {  –padding-inline: 1rem;  –padding-block: 1rem;  –padding: var(–padding-block) var(–padding-inline);} .button {  padding: var(–padding);}.button.less-wide {  –padding-inline: 0.5rem;}

Решение 3. Везде ставь переменные.

CSS * { –access: me; –whereever: you; –want: to; –hogwild: var(–access) var(–whereever); }

1234567* {  –access: me;  –whereever: you;  –want: to;   –hogwild: var(–access) var(–whereever);}

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

Решение 4. Введите новое дефолтное свойство.

Вся заслуга Стивена Шоу, который исследовал проблему, и это одно из первых мест, где я впервые увидел путаницу. Вернемся к нашей первой демонстрации:

CSS html { –color-1: red; –color-2: blue; –bg: linear-gradient(to right, var(–color-1), var(–color-2)); }

123456html {  –color-1: red;  –color-2: blue;   –bg: linear-gradient(to right, var(–color-1), var(–color-2));}

Мы хотим получить две вещи:

Способ переопределить весь фон

Способ перекрыть часть градиентного фона

Итак, мы сделаем так:

CSS html { –color-1: red; –color-2: blue; } div { –bg-default: linear-gradient(to right, var(–color-1), var(–color-2)); background: var(–bg, var(–bg-default)); }

12345678html {  –color-1: red;  –color-2: blue;}div {  –bg-default: linear-gradient(to right, var(–color-1), var(–color-2));  background: var(–bg, var(–bg-default));}

Обратите внимание, что мы не объявляли —bg вообще . Он просто сидит и ждет значения, и если он когда-нибудь его получит, то «побеждает» именно это значение. Но без него будет использоватся —bg-default. Теперь…

Если я устанавливаю —color-1 или —color-2, то будет заменена часть градиента, как и ожидалось (если я делаю это с помощью селектора, который касается одного из div).

Или я могу настроить сброс фона –bg на все, что захочу.

Похоже на хороший способ.

CodePen Embed Fallback

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

Автор: Chris Coyier

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

Оставьте ответ