18.10.2021

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

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

От создателя: в последнее время я увидел некую проблему при использовании пользовательских параметров, которая сбивает людей с толку, включая и меня, потому я постараюсь описать ее.

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

CSS

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

CSS

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

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

CSS

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

CSS

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

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

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

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

CSS

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

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

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

CSS

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

CSS

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

CSS

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

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

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

CSS

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

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

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

Итак, мы создадим так:

CSS

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

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

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

Похоже на неплохой способ.

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

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

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

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