Привет. В конце прошлой недели я была очень рада увидеть, что 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:
Хочу рассказывать о самых новых технологиях фронтенда в виде небольших заметок и хотела узнать будет ли это вам интересно? 🧑💻👩💻
Найстарші коментарі (4)
Пишите, очень интересно! Я за фичи, которые уже работают и их можно использовать в проектах, а не прототипы)
Тоже подумала об этом)
Интересно! Очень хорошая подача контента!
Спасибо)