Практика: оформление открытого состояния details
Раскрывающийся блок можно оформить так, чтобы открытое состояние было заметно без отдельного JavaScript. Атрибут open уже отражает состояние нативного элемента и доступен CSS-селекторам.
Назначение
Раскрывающийся блок можно оформить так, чтобы открытое состояние было заметно без отдельного JavaScript. Атрибут open уже отражает состояние нативного элемента и доступен CSS-селекторам.
Как это работает
Селектор details[open] меняет рамку и фон открытого блока, а summary сохраняет нативный маркер. Отступы задаются отдельно подписи и содержимому, чтобы раскрытие не превращалось в резкое наложение текста.
Пример
<style>.state-details{border:1px solid #9cb9a6;border-radius:.5rem}.state-details summary{padding:.8rem;cursor:pointer}.state-details p{padding:0 .8rem .8rem;margin:0}.state-details[open]{border-color:#226d47;background:#eef7f1}.state-details summary:focus-visible{outline:3px solid #174ea6;outline-offset:2px}</style>
<details class="state-details"><summary>Как проверить учебный пример?</summary><p>Сохраните файл, откройте его в браузере и сравните ожидаемый результат.</p></details>Что должно получиться
При раскрытии меняется оформление контейнера, а содержание становится видимым. Закрытие автоматически убирает соответствие селектору [open], не требуя ручной синхронизации класса.
Граница применения и частая ошибка
Не удаляйте маркер без равноценной понятной замены. Цвет не должен быть единственным признаком действия. Значение open="false" не закрывает блок: это логический атрибут, и для закрытия его нужно убрать.
Самостоятельная проверка
Откройте блок клавиатурой и посмотрите атрибут в инспекторе. Добавьте open в исходный HTML и проверьте начальное состояние. Затем убедитесь, что длинная подпись и увеличенный шрифт не обрезаются.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.