Сайт использует сервис веб-аналитики Яндекс Метрика с помощью технологии «cookie». Пользуясь сайтом, вы даете согласие на использование данной технологии.
В этом выпуске разбираем то, что ещё недавно казалось невозможным — сравнение CSS-переменных без единой строчки JavaScript. Да-да, на чистом CSS можно сравнивать значения, определять «больше», «меньше» и «равно», и менять стили прямо на лету. В ролике вы узнаете: – как работает приём с функцией sign() и почему она стала ключом к диапазонным сравнениям; – зачем регистрировать переменные через @property и чем они отличаются от обычных custom properties; – как реализовать логику сравнения через if() и через Container Style Queries; – почему это решение уже можно применять, но мы всё ещё ждём Firefox Всё — без JS, без хаков, только нативный CSS. Разберём пошагово, протестируем и посмотрим, как эта идея открывает путь к по-настоящему умным стилям. Демонстрация → Спецификация → Таймкоды: 00:00 Введение в сравнение CSS-переменных 00:50 Реализация сравнения на лету 01:39 Применимость и проблемы 03:27 Проблемы контейнерных запросов 05:08 Реализация сравнения переменных 07:59 Тестирование сравнения 10:09 Зачем нужна регистрация переменной sign? 11:42 Тестируем зарегистринованные и обычные переменные 13:50 Реализация сравнения на котейнерных запросах 15:34 Преимущества контейнерных директив 16:29 Заключение #css #cssvariables #frontend #webdevelopment
