CSS-Toggles: состояния без JavaScript

Сегодня я хочу поделиться с вами революционной технологией CSS-Toggles, которая позволяет управлять состояниями элементов на странице без единой строчки JavaScript. Да, вы не ослышались, аккордеоны, чекбоксы, переключатели и даже сложные UI-компоненты теперь можно реализовать чисто на CSS. В этой статье я подробно расскажу, как это работает, приведу примеры кода, сравню с классическими подходами и дам практические рекомендации.

Что такое CSS-Toggles?

CSS-Toggles это новый стандарт, который вводит концепцию «переключателей» (toggles) прямо в CSS. Раньше для изменения состояний элементов (например, открытия аккордеона) нам требовался JavaScript: мы добавляли классы, меняли стили, следили за событиями. Теперь всё это можно делать через CSS, используя свойства toggle-root и toggle-trigger.

Основные преимущества:

• Упрощение кода: Не нужны скрипты для базовых взаимодействий.
• Производительность: Браузер оптимизирует CSS-переключатели лучше, чем JS.
• Доступность: Встроенная поддержка ARIA-ролей (если правильно настроить).
• Семантика: Чистый HTML без лишних div и span.

Но давайте перейдём к практике!

Управление чекбоксами через CSS-Toggles

Начнём с простого примера — кастомного чекбокса. Раньше для стилизации input[type="checkbox"] мы использовали обёртки и псевдоэлементы. С CSS-Toggles всё становится ещё проще.

HTML:

<toggle-root id="toggle" name="newsletter" value="on"></toggle-root>
<label for="toggle" toggle-trigger>Подписаться на рассылку</label>

CSS:

toggle-root {
  toggle-group: checkbox; /* Группа для управления состоянием */
}

label[toggle-trigger] {
  cursor: pointer;
  padding-left: 30px;
  position: relative;
}

label[toggle-trigger]::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  position: absolute;
  left: 0;
  top: 0;
}

toggle-root:checked + label[toggle-trigger]::before {
  background: #4CAF50;
}

Что происходит:

• <toggle-root> заменяет input[type="checkbox"].
• Атрибут toggle-trigger связывает label с переключателем.
• Состояние :checked управляется через CSS.

Сравнение с классическим подходом:

Аккордеоны на CSS-Toggles

Аккордеоны частый элемент интерфейса. Реализуем их без JS.

HTML:

<toggle-root id="accordion1" toggle-group="accordion"></toggle-root>
<label for="accordion1" toggle-trigger>Раздел 1</label>
<div toggle-content>
  Содержимое аккордеона...
</div>

<toggle-root id="accordion2" toggle-group="accordion"></toggle-root>
<label for="accordion2" toggle-trigger>Раздел 2</label>
<div toggle-content>
  Ещё один блок контента...
</div>

CSS:

[toggle-content] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

toggle-root:checked ~ [toggle-content] {
  max-height: 500px; /* Или auto (но анимация не сработает) */
}

label[toggle-trigger] {
  display: block;
  padding: 10px;
  background: #f0f0f0;
  cursor: pointer;
}

toggle-root:checked + label[toggle-trigger] {
  background: #ddd;
}

Как это работает:

• toggle-group="accordion" гарантирует, что только один раздел открыт одновременно.
• toggle-content скрывает/показывает контент при переключении.

Сравнение CSS-Toggles и JavaScript

Рекомендации

1. Фоллбеки для старых браузеров:
   Используйте @supports для проверки поддержки:
   css

   @supports (toggle-root: checked) {
     /* Стили для CSS-Toggles */
   }

2. Доступность:
   Добавьте ARIA-роли вручную:
   html

   <toggle-root role="checkbox" aria-checked="false"></toggle-root>

3. Оптимизация анимаций:
   Избегайте max-height: auto — используйте фиксированные значения:
   css

   [toggle-content] {
     transition: max-height 0.3s;
     max-height: 0;
   }
   toggle-root:checked ~ [toggle-content] {
     max-height: 200px; /* Подберите под ваш контент */
   }

4. Группы переключателей:
   Для радио-кнопок или эксклюзивных аккордеонов задайте toggle-group:
   html

   <toggle-root toggle-group="features"></toggle-root>

CSS-Toggles это мощный инструмент, который избавляет нас от лишнего JavaScript для базовых взаимодействий. Конечно, технология ещё молодая, и поддержка браузеров ограничена, но уже сейчас её можно использовать в экспериментальных проектах. Попробуйте, и вы удивитесь, насколько чище станет ваш код!

Уверен, теперь вы готовы внедрять CSS-Toggles в свои проекты. Если остались вопросы, пишите в комментарии!