UXPUB

UXPUB - спільнота з 4,109 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Будущее CSS: переключатели CSS (Toggles)
Саша Федорова
Саша Федорова

Опубліковано • Оновлено

Будущее 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:

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

Обговорення (4)

Згорнути/розгорнути
varhal profile image
Varhal

Пишите, очень интересно! Я за фичи, которые уже работают и их можно использовать в проектах, а не прототипы)

Згорнути/розгорнути
dexa profile image
Саша Федорова Автор

Тоже подумала об этом)

Згорнути/розгорнути
eugen_vogel profile image
Евгений Фогель

Интересно! Очень хорошая подача контента!

Згорнути/розгорнути
dexa profile image
Саша Федорова Автор

Спасибо)