Великий апгрейд CSS-условий
Стартуем с готовой демонстрации. Она работает в Chrome версии 142 и выше.
У блока есть две CSS-переменные. При наведении на блок меняются только значения этих переменных. Однако изменение переменных приводит к изменению других стилей блока. Наведите курсор на блок и убедитесь, что фон изменяется.
Видеоверсия этого курса доступна во ВКонтакте и на Ютюбе
Удалим файл compare.css с готовым решением и разберём его по шагам.
Оставим код с переменными и их изменением при наведении.
Добавим внутрь .comparison фон, значение которого задаётся через функцию if(). Внутри if() сравниваем две переменные:
style(--x < --y)
Вот оно — полноценное нативное диапазонное сравнение CSS-переменных. Синтаксис максимально похож на сравнения в обычных языках программирования.
Добавим вторую ветку сравнения: если --x больше --y, устанавливаем фон зелёным.
Наведите курсор и проверьте, что всё работает.
Проверка на равенство выполняется следующим образом:
style(--x = --y)
В случае равенства устанавливаем фон светло-серым.
Чтобы увидеть ветку равенства в действии, установим начальные значения --x и --y равными 200px. В исходном состоянии карточка серая, а при наведении одно значение уменьшается, и if() тут же переключает фон на зелёный.
Добавим псевдоэлемент ::before и с помощью if() зададим сообщения: --x < --y, --x > --y или --x = --y.
Вместо проверки на равенство используем ветку else. Так тоже можно.
Добавим в разметку ещё два элемента, чтобы протестировать поведение сравнений.
Назначим каждой карточке свои --x и --y в спокойном состоянии и изменим их при наведении.
Сравнение переменных работает независимо для каждой карточки.
Упростим пример и посмотрим, что ещё можно сравнивать в обновлённом if().
До этого мы сравнивали CSS-переменные между собой. Теперь сравним переменную и значение. Работает.
Изменим значение --x на 90px, и теперь срабатывает ветка else.
Можно сравнивать не только переменные с переменными или значениями, но и значения со значениями.
Да, это вырожденный случай, с которым вы, скорее всего, никогда не столкнётесь. Но это работает!
Изменим одно из чисел на 300px, чтобы условие стало ложным. Сработала ветка else.
Ещё более интересный случай — сравнение значений разного типа. Одно значение — абсолютное, второе — относительное.
Сравниваем px и em. Удивительно, но это тоже работает!
Можно менять внешние условия, которые влияют на относительные единицы измерения, и условие будет пересчитываться на лету!
Давайте изменим размер шрифта, и результат сравнения изменится.
А теперь снова изменим размер шрифта при наведении. Наведите курсор на карточку и убедитесь, что условие пересчитывается на лету.
Магия? Да, магия! Сравнение абсолютных и относительных значений, работающее на лету, открывает портал в бездну примеров и хитрых кейсов. Так что ждём статей.
Важно отметить, что условное выражение style(...) используется в одинаковом виде как внутри if(), так и внутри контейнерных стилевых запросов.
Поэтому все предыдущие примеры будут работать и с директивой @container.
