Новая 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 с типом <number>, чтобы style query могла проверить его значение.
Приём годится для любого сравнения с порогом, не только для бейджей.
👉 @seniorFront