В CSS еще не было правила переключения или условного if за исключением специфики запросов @media и некоторых глубоких уловок с настраиваемыми свойствами CSS . Давайте посмотрим, почему это было бы полезно, если бы мы это сделали, и рассмотрим трюк, который сегодня можно использовать для этого.
Содержание статьи
Недавние разговоры о возможности
Несмотря на то, что сегодня ни одна из этих вещей неприменима, только в прошлом году было много разговоров о концепции универсального условного CSS:
Итак, да. Спрос на условный CSS есть.
Представьте себе, почему условный CSS был бы полезен
Возможно визуальное изменение после некоторой прокрутки. Визуальное изменение после числового ввода находится в определенном диапазоне. Компонент с несколькими состояниями.
Существует целый жанр чрезвычайно популярных библиотек JavaScript для пользовательского интерфейса (например, React, Vue и т. Д.), Которые в основном предназначены для создания пользовательского интерфейса на основе состояния. Ясно, что это потребность разработчика. Если бы мы могли перенести этот стиль на основе состояний в CSS, это тем более, что нам может понадобиться JavaScript — и, возможно, лучшее разделение проблем.
Общая тема
У нас уже есть настраиваемые свойства в CSS, и мы можем основывать на них логику изменения состояния, изменяя блок стилей как побочный эффект изменения настраиваемого свойства на определенные значения.
Это правда, что у нас уже есть механизмы для изменения блоков стилей. Мы можем изменить класс с помощью JavaScript, и этот класс может применять все, что угодно в CSS. Но это не значит, что стили CSS на основе состояний бесполезны. У нас не всегда есть возможность или мы можем не захотеть писать для этого какой-либо JavaScript, а вместо этого изменяем настраиваемые свойства другими способами (например, медиа-запросы, изменения HTML и т. Д.). Выполнение этого в CSS означает разделение бизнес-логики и логики визуального стиля.
Уловка! Использование @keyframes для состояния
CSS @keyframes можно использовать для переключения конкретных изменений . Благодаря силе свойства animation открывается возможность выбрать, какой именно кадр показывать, и сделать паузу точно на этом кадре, эффективно имитируя оператор или состояние переключателя. стили на основе.
Давайте посмотрим на это в действии, поиграв со свойством animation-delay :
Вот что происходит в этой ручке:
-
animation-delay: Отрицательные значения задержки приводят к срабатыванию определенного кадра (или промежуточного кадра) (положительные значения в этом случае не работают). Мы воспользуемся этим трюком для принудительного создания состояний. -
animation-play-state: paused: На самом деле мы ничего не анимируем, поэтому анимация останется приостановленной . -
animation-duration: Фактическая длительность не имеет значения, ей просто нужен один, так что есть временной интервал для удержания различных ключевых кадров. Мы сделаем это значение вроде100.001sчтобы, если мы задержим на100sпоследний ключевой кадр все равно будет работать. Длительность должна быть больше, чем значение задержки.
Первый вход диапазона изменяет анимацию-задержку в диапазоне от -100s до ] 0s .
Практический вариант использования
Прежде чем мы перейдем непосредственно к рабочему примеру, стоит обсудить этот трюк более подробно, потому что есть некоторые нюансы, о которых вам следует знать.
Во-первых, трюк работает только с числовыми значениями. Итак, значения цвета или строки, потому что это строго математические вычисления.
Во-вторых, есть логический трюк. Рассмотрим переменную - значение: 10 которая может принимать любое числовое значение от 0 до 100. Мы хотим применить цвет, если значение больше 5. Как мы узнаем, больше или меньше 5? И даже если мы действительно знаем, как это помогает нам на самом деле?
- выше 5: зажим (0, var (- значение) - 5, 1)
- значение |
- выше-5 |
Результат |
|---|---|---|
| 0 | 0 | 0 — 5 = -5, зажим () заставляет значение не менее 0 |
| 2 | 0 | 2 — 5 = -3, зажим () принудительно устанавливает значение не менее 0 |
| 5 | 0 | 5 — 5 = 0 |
| 7 | 1 | 7 — 5 = 2, зажим () заставляет значение не больше 1 |
] clamp () похожа на более умную calc () тем, что позволяет нам строго ограничивать вычисляемое значение диапазоном при объявлении идеального значения. Этот диапазон — все, что нужно для получения логической переменной.
Запишите любое математическое значение во втором параметре фиксатора () и это даст либо 0 (или меньше), либо 1 (или больше). Старайтесь не писать математические выражения, которые могут привести к числу от 0 до 1.
Вот как это работает:
Единственная задача ввода диапазона — «транслировать» его значение путем определения значений для - value - min и - max затем изменение - значения с использованием события oninput . Это самая минимальная вещь, которую можно сделать, чтобы добиться подобного состояния поведения в CSS. JavaScript не требуется.
Используя математические функции CSS, можно вывести «завершенный» процент индикатора выполнения на основе тех же переменных:
- завершено: calc ((var (- value) - var (- min)) / (var (- max) - var (- min)) * 100);
Теперь мы знаем, превышает ли значение определенный процент, что дает нам еще один способ внести изменения по состоянию:
- больше 30: струбцина (0, var (- завершено) - 30, 1);
--over-70: зажим (0, var (- завершено) - 70, 1);
/ * ... и так далее ... * /
Хорошо, но как мы можем использовать это для выбора определенного ключевого кадра? Используя функцию max () :
- кадр: макс (
calc (1 - var (- более 30)),
var (- более 30) * 2,
var (- более 70) * 3,
var (- is-100) * 4
);
Суть булевых значений CSS в том, что есть много способов их использования для достижения определенной цели, и нужно проявить творческий подход, найти формулу, которая будет короткой и удобочитаемой.
В приведенной выше формуле логические значения будут «переключать» номер кадра, если логическое значение имеет значение 1 . Поскольку мы используем функцию max наибольший номер переключенного кадра будет вычисленным значением - кадр .
Обратите внимание, что изменение цвета имеет небольшой переход. Мы могли бы сделать это с помощью background: currentColor; в области заливки, которая наследует цвет от родительского элемента, но я решил использовать CSS Houdini, чтобы проиллюстрировать возможности назначения переходов переменным CSS, объявив его типа .
Пример часто используемого логического трюка CSS можно увидеть в приведенном ниже Pen, который является компонентом только для CSS с множеством переменных, которые допускают широкий диапазон настроек:
Я уверен, что есть много других вариантов использования этого маленького трюка, и я очень рад увидеть, что еще можно было бы достичь творческим подходом сообщества.
Загрузка...
