Будущее CSS: переключатели CSS (Toggles)

Привет. В конце прошлой недели я была очень рада увидеть, что Chromium начнет прототипирование CSS переключателей, фича, которая в настоящее время доступна только в виде неофициального проекта, авторами которого являются Таб Аткинс и Мириам Сюзанна.

CSS-переключатели - это механизм, который позволяет связать переключение с элементом DOM. Это состояние может быть определено и связано с активациями через свойства CSS, а также может быть запрошено в селекторах CSS. Это обеспечивает декларативный механизм для определения состояния, которое описывает поведение, подобное существующему в HTML поведению флажков или радиокнопок.

Цель этой фазы прототипа - поэкспериментировать с идеей, проверить, будет ли все работать или нет, отшлифовать синтаксис и т.д. - так что да, все это все еще концептуально, очень экспериментально и может быть изменено на момент написания статьи. Несмотря на то, что это еще очень ранний WIP, мне уже нравится, к чему все идет.

Основным вариантом использования будет что-то похожее на выключатель света, который может меняться от 0 (неактивный) до 1 (активный).

html {
  toggle-root: lightswitch; /* Создайте переключатель с именем lightswitch. Он будет переключаться между 0 (неактивно, по умолчанию) и 1 (активно) */
}

button {
  toggle-trigger: lightswitch; /* При нажатии на кнопку срабатывает переключатель */
}

html:toggle(lightswitch) {
  /* Стили, применяемые при активном переключателе */
}

Вот демонстрация этого поведения, в котором используется JS-polyfill:

Хочу рассказывать о самых новых технологиях фронтенда в виде небольших заметок и хотела узнать будет ли это вам интересно? 🧑‍💻👩‍💻