Что знает JS, теперь знает и CSS
prop-for-that передаёт состояние браузера и элементов в CSS-переменные: курсор, цвета медиа, батарея, скролл и валидация форм.
Все мы знаем вечную боль: JavaScript умеет отслеживать кучу событий рантайма (позицию курсора, скорость скролла, заряд батареи, размер элемента через ResizeObserver), но чтобы передать эти данные в CSS для анимации или стилизации, приходится вешать тонны слушателей и вручную перебивать инлайн-стили.
Библиотека prop-for-that элегантно решает эту проблему. Её концепция проста: она вытаскивает скрытое состояние браузера и элементов прямо в нативные CSS-переменные (--live-* и --const-*), а дальше полностью умывает руки. Вся логика, анимации и математика остаются в вашем файле стилей.
Как это выглядит на практике?
Базовый запуск одной строчкой в HTML: Достаточно один раз импортировать авто-скрипт и накинуть дата-атрибут data-props-for на нужный узел, указав, какие метрики мы хотим слушать.
<div id="card" data-props-for="pointer-local">...</div>Вся магия — в чистом CSS: Элемент автоматически получает переменные --live-local-pointer-x-ratio и y-ratio (значения от 0 до 1). Теперь эффект наклона карточки за курсором (tilt effect) пишется без единой строчки JS-кода:
.tilt-card {
--rx: calc((0.5 - var(--live-local-pointer-y-ratio)) * 16deg);
--ry: calc((var(--live-local-pointer-x-ratio) - 0.5) * 16deg);
transform: rotateX(var(--rx)) rotateY(var(--ry));
}Что еще умеет вытаскивать в CSS-рантайм?
Медиа и цвета: Извлекает доминирующие цвета и палитру из картинок (img-color) или прямо «на лету» из проигрываемого видео (video-color стримит доминантный цвет ~4 раза в секунду). Идеально для создания динамической подсветки (ambient glow) вокруг плеера.
Глобальные метрики на уровне :root: Заряд батареи (--live-battery-level), текущий FPS, скорость сетевого соединения, тригонометрию и даже скорость скролла с затуханием (--live-scroll-velocity).
Состояние форм и валидацию: То, что псевдоклассы не умеют хранить. История взаимодействия с полями (--live-dirty, --live-touched) и общая готовность формы (--live-all-valid), что позволяет нативно открывать/блокировать кнопку отправки.
В связке с @container style() запросами, которые сейчас активно развиваются, этот тулчейн превращает CSS в полноценный реактивный движок. Например, можно автоматически отключать тяжелые анимации на сайте, если заряд батареи падает ниже 20%, используя исключительно декларативный подход.