🎚 «Больше или равно» в 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

@frontend_mind