Атрибут class тега <summary>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <summary>, который используется как заголовок для элемента <details>. Это стандартный способ группировки элементов с общими характеристиками.
<details>
<summary class="accordion-header">Показать дополнительные сведения</summary>
<p>Содержимое, которое будет показано при раскрытии.</p>
</details>
Синтаксис атрибута class:
| Формат | Пример | Описание |
|---|---|---|
| Один класс | class="accordion" |
Применение одного класса |
| Несколько классов | class="accordion primary" |
Применение нескольких классов (разделяются пробелом) |
Пример с CSS и интерактивностью:
<style>
.accordion-header {
background-color: #f8f9fa;
padding: 10px 15px;
cursor: pointer;
border: 1px solid #dee2e6;
border-radius: 4px;
}
.accordion-header:hover {
background-color: #e9ecef;
}
.primary {
color: #0d6efd;
font-weight: bold;
}
</style>
<details>
<summary class="accordion-header primary">Важная информация</summary>
<p>Детали скрытого содержимого...</p>
</details>
Рекомендации:
- Используйте семантические имена классов (например, "accordion-header")
- Придерживайтесь единого стиля именования (kebab-case рекомендуем)
- Разделяйте ответственность классов (один класс - одна задача)
- Избегайте избыточного количества классов (оптимально 1-3)
Особенности работы:
- Классы можно динамически изменять через JavaScript
- Поддерживается всеми современными браузерами
- Может использоваться для сложных аккордеонов
- Работает в сочетании с псевдоэлементом ::marker
Ограничения:
- Глобальная область видимости (возможны конфликты имен)
- Ограниченная стилизация стандартного маркера в некоторых браузерах
- Требуется полифил для полной поддержки в IE
Пример с современными CSS-технологиями:
<style>
.accordion {
--header-bg: #f8f9fa;
--header-color: #212529;
--border-color: #dee2e6;
}
.accordion summary {
background: var(--header-bg);
color: var(--header-color);
border: 1px solid var(--border-color);
padding: 0.75rem 1rem;
cursor: pointer;
}
.accordion[open] summary {
border-bottom: none;
}
</style>
<details class="accordion">
<summary>Настраиваемый аккордеон</summary>
<div class="content">...</div>
</details>
Примечание: Для сложных интерактивных элементов используйте ARIA-атрибуты (aria-expanded, aria-controls) для улучшения доступности.