🎚 «Больше или равно» в CSS без единого if
Новая CSS-функция progress(значение, от, до) показывает, где значение лежит в диапазоне: дробь от 0 до 1. Всё, что за границами, по умолчанию обрезается до 0 или 1.
Отсюда трюк. В диапазоне от 0 до порога ровно 1 выйдет, только когда значение достигло порога. Это готовый флаг.
Например, бейджи за фильмы: пороги 3, 6 и 9 в --badgeLevel, число фильмов в --movieCount:
.badge {
--isLevelUnlocked: progress(var(--movieCount), 0, var(--badgeLevel));
}
При 2 фильмах из 6 получится 0.33, при 6 или 10 будет 1. Container style query (проверка значения переменной у родителя) показывает бейдж при style(--isLevelUnlocked: 1). Перебирать уровни в JS не нужно.
Учтите, что флаг регистрируют через @property с типом , чтобы style query могла проверить его значение.
Приём годится для любого сравнения с порогом, не только для бейджей.
👉 @seniorFront
Новая CSS-функция progress(значение, от, до) показывает, где значение лежит в диапазоне: дробь от 0 до 1. Всё, что за границами, по умолчанию обрезается до 0 или 1.
Отсюда трюк. В диапазоне от 0 до порога ровно 1 выйдет, только когда значение достигло порога. Это готовый флаг.
Например, бейджи за фильмы: пороги 3, 6 и 9 в --badgeLevel, число фильмов в --movieCount:
.badge {
--isLevelUnlocked: progress(var(--movieCount), 0, var(--badgeLevel));
}
При 2 фильмах из 6 получится 0.33, при 6 или 10 будет 1. Container style query (проверка значения переменной у родителя) показывает бейдж при style(--isLevelUnlocked: 1). Перебирать уровни в JS не нужно.
Учтите, что флаг регистрируют через @property с типом , чтобы style query могла проверить его значение.
Приём годится для любого сравнения с порогом, не только для бейджей.
👉 @seniorFront