Как вывести CSS-переменную | CSS Боль

Описание: Хотите показать значение CSS-переменной прямо на странице — без JavaScript? Оказывается, CSS-счётчики это умеют, и хватит буквально пары строчек. Ссылка на демонстрацию в Телеграме: https://t.me/cssbol/36.

Разбираем приём через counter-reset и counter(): как вывести целое число, как обойти ограничение на дробные через calc(), как анимировать значение с @property. Отдельная тема — переменные с единицами измерения (градусы, пиксели): для них есть хак tan(atan2()), который откусывает размерность. Финал — круговой прогресс-бар с тремя CSS-счётчиками, работающий без if() во всех браузерах.

Таймкоды:
00:00 Вывести CSS-переменную — без JavaScript?
01:16 Что разберём в видео
02:00 counter-reset: базовая реализация
02:40 Ограничение счётчиков — только целые числа
04:46 calc() для дробных значений
05:37 Анимация счётчика через @property
07:39 Переменные с единицами измерения
09:11 tan(atan2()) — как это работает
12:30 Статья Джейн Ори про tan(atan2())
13:20 Баги в браузерах и обходные пути
14:08 Статья Романа Комарова про CSS-миксин
15:05 Итог: три счётчика без if()

Ссылки:
– Круговой прогресс-бар на CSS →    • Сложный круговой прогрессбар — простая реа...  
– Статья Джейн Ори про tan(atan2()) → https://dev.to/janeori/css-type-casti...
– Статья Романа Комарова про CSS-миксин → https://kizu.dev/preview-mixin/
– Канал в Телеграме → https://t.me/cssbol

Подписывайтесь на канал, чтобы не пропустить новые выпуски CSS Боли!

#css #customproperties #counterreset #frontend #webdevelopment