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

Как вывести 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