Реактивный CSS

Мы стоим на пороге революции в верстке, связанной с новым подходом — реактивным CSS. В нем привычная логика отображения «переезжает» из JavaScript в стили, и весь внешний вид компонента зависит от CSS-переменных состояния.

В докладе мы с помощью постепенно усложняющихся примеров разберем, как работает реактивный CSS.

Начнем с базовой задачи — перекрашивания прогрессбара в зависимости от прогресса. Затем посмотрим, как связывать CSS-логику с внешними параметрами, которыми удобно управлять с помощью JS. Потом посмотрим как CSS-логика сочетается с другими нативными возможностями CSS и позволяет создавать сложные эффекты, которые раньше были немыслимы без JS.

В кульминации доклада мы создадим и сравним две реализации типового слайдера, весь внешний вид которого завязан на состоянии одной CSS-переменной. Вы увидите как логика из JS перетекает в стили, сможете оценить объём и сложность кода на CSS.

В заключении обсудим вопросы браузерной поддержки, фолбеков, производительности и попробуем ответить на вопрос — а есть ли у подхода будущее?