Prop for that

Адам Аргайл выпустил небольшую JS-библиотеку prop-for-that, которая следит за различными параметрами страницы и записывает значения в пользовательские свойства CSS. Это позволяет писать стили на основе значений этих свойств.

Что библиотека может отслеживать:

- Положение курсора (x, y) в px и % от области просмотра;
- Размер области просмотра;
- Текущее время (часы, минуты, секунды, текущий timestamp);
- Количество кадров в секунду;
- Онлайн-статус;
- Состояние видимости и фокусировки страницы;
- Параметры сети (тип, downlink, rtt, режим экономии данных);
- Состояние батареи (процент заряда, заряжается ли);
- Нагрузку на CPU;
- Прокрутку (направление и скорость);
- Визуальную область просмотра (pinch-zoom, отображение виртуальной клавиатуры);
- Виртуальную клавиатуру (открыта ли, размеры, координаты);
- Ориентацию устройства;
- Параметры акселерометра;
- Геолокацию;
- Плотность пикселей экрана;
- Количество ядер процессора;
- Доступный объём оперативной памяти;
- Ширину полосы прокрутки;
- Тип навигации;
- Мета-данные (theme-color, og-image, color-scheme);
- Размеры элемента;
- Видимость элемента;
- Значение <input type="range">;
- Свойства текстовых полей (длина, пустое ли, валидное ли, лимит символов);
- Состояние валидности полей ввода;
- Состояния полей («чистое», «грязное», тронутое, нетронутое, изменённое, отправленное);
- Количество полей (валидных, не валидных, заполненных);
- Состояния <select> (индекс, количество опций, количество выбранных опций, текущее значение);
- Цвет из <input type="color">;
- Состояния <audio> и <video> (прогресс, текущее время, длительность, пауза, громкость);
- Состояния <img> (физические размеры, загружено ли, ошибка загрузки);
- Цвета <img> (доминантный, акцентный, тёмный, светлый, средний, температура);
- Цвета <video> (доминантный, акцентный);
- Состояние урезанного текста (line-clamp).

Достаточно большой список. Плюс к этому есть JS API и система плагинов, поэтому библиотеку можно расширять. Некоторые свойства глобальные, как состояние сети, процессора или батареи. Такие свойства записываются в :root.

Другие свойства работают на уровне элементов. Чтобы библиотека отслеживала свойства, нужно указать атрибут data-props-for у элемента и перечислить через запятую названия отслеживаемых свойств. По умолчанию ничего не отслеживается.

<div
  class="box"
  data-props-for="size"
  style="resize: both"
>
</div>
<style>
  .box::after {
    counter-reset: w calc(var(--live-w)) h calc(var(--live-h));
    content: counter(w) ' × ' counter(h);
  }
</style>

В примере указано, что нужно отслеживать размеры (data-props-for="size"). В CSS будут доступны свойства --live-w и --live-h с актуальными значениями. Для примера они выводятся в элементе с помощью счётчиков.

В документации много примеров, где и как это можно применить. Особенно хорошо это работает в сочетании с Container Style Queries и функцией if(), позволяя делать динамическую стилизацию на основе значений свойств.

Счётчики и псевдо-элементы со свойством content можно использовать для вывода значений в интерфейсе. Также можно скрывать или показывать отдельные узлы по условию. В общем, фантазии хватает как это можно применить.

#css #js