<summary> Элемент сводки раскрывающегося блока HTML

Элемент <summary> HTML задаёт сводку, подпись или легенду для блока раскрытия элемента <details>. Щелчок по элементу <summary> переключает состояние родительского элемента <details> между открытым и закрытым.

Попробуйте

<details>
  <summary>
    I have keys but no doors. I have space but no room. You can enter but can't
    leave. What am I?
  </summary>
  A keyboard.
</details>

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

Содержимым элемента <summary> может быть любой контент заголовка, обычный текст или HTML, который можно использовать внутри абзаца.

Элемент <summary> можно использовать только как первый дочерний элемент элемента <details>. Когда пользователь щёлкает по сводке, родительский элемент <details> открывается или закрывается, а затем элементу <details> отправляется событие toggle, которое позволяет узнать о смене состояния.

Содержимое элемента <details> задаёт доступное описание для элемента <summary>.

Текст метки по умолчанию

Если первым дочерним элементом <details> не является элемент <summary>, пользовательский агент user agent использует строку по умолчанию (обычно «Details») в качестве метки блока раскрытия.

Стиль по умолчанию

Согласно спецификации HTML, стиль по умолчанию для элементов <summary> включает display: list-item. Это позволяет изменить или удалить значок, отображаемый рядом с меткой в качестве виджета раскрытия; по умолчанию это обычно треугольник.

Также можно задать стиль display: block, чтобы убрать треугольник раскрытия.

Подробности см. в разделе Совместимость с браузерами, поскольку пока не все браузеры поддерживают полную функциональность этого элемента.

В браузерах на основе WebKit, например Safari, отображением значка можно управлять с помощью нестандартного псевдоэлемента CSS ::-webkit-details-marker. Чтобы убрать треугольник раскрытия, используйте summary::-webkit-details-marker { display: none }.

Примеры

Ниже приведены примеры использования <summary>. Другие примеры см. в документации элемента <details>.

Базовый пример

Базовый пример использования <summary> в элементе <details>:

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Результат

Сводки в качестве заголовков

В <summary> можно использовать элементы заголовков, например:

<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Результат

Сейчас у этого примера есть некоторые проблемы с отступами, которые можно исправить с помощью CSS.

HTML в сводках

В этом примере элементу <summary> добавлена семантика, указывающая на важность метки:

<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

Результат

Изменение значка сводки

Маркер элемента <summary> — треугольник раскрытия — можно настроить с помощью CSS. На маркер можно воздействовать через псевдоэлемент ::marker, который принимает сокращённое свойство list-style и его отдельные свойства, например list-style-type. Это позволяет заменить треугольник изображением (обычно с помощью list-style-image) или строкой (в том числе эмодзи). В этом примере мы заменяем содержимое одного виджета раскрытия и удаляем значок у другого, задавая list-style: none, а затем добавляем собственный значок раскрытия с помощью генерируемого содержимого.

CSS

Для первого виджета раскрытия мы задаём стиль ::marker и изменяем content в зависимости от атрибута [open] элемента <details>. Для второго виджета мы удаляем маркер с помощью свойств list-style, а затем добавляем стилизованное генерируемое содержимое с помощью псевдоэлемента ::after. Мы также добавляем стили для ::-webkit-details-marker, чтобы учитывать Safari. Селектор специфичного для браузера псевдоэлемента помещён в псевдокласс :is(), чтобы он не делал список селекторов недействительным.

details {
  font-size: 1rem;
  font-family: "Open Sans", "Calibri", sans-serif;
  border: solid;
  padding: 2px 6px;
  margin-bottom: 1em;
}

details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

details[open]:first-of-type summary::marker {
  content: "− ";
}

details:last-of-type summary {
  list-style: none;
  &::after {
    content: "+";
    color: white;
    background-color: darkgreen;
    border-radius: 1em;
    font-weight: bold;
    padding: 0 5px;
    margin-inline-start: 5px;
  }
  [open] &::after {
    content: "−";
  }
}
details:last-of-type summary::-webkit-details-marker {
  display: none;
}

В CSS используется селектор атрибута [open] селектор атрибута, который выбирает элемент только при наличии атрибута open (когда <details> открыты). Псевдоклассы :first-of-type и :last-of-type выбирают первый и последний однотипные элементы-соседи. Мы поместили префиксный псевдоэлемент -webkit- в псевдокласс :is(), поскольку он принимает список селекторов с обработкой ошибок. Поэтому, если префиксный псевдоэлемент недопустим в браузере, весь блок селекторов не станет недопустимым. Также мы использовали вложенность CSS. См. модуль Селекторы CSS.

HTML

<h1>Quotes from Helen Keller</h1>

<details>
  <summary>On women's rights</summary>
  <p>
    <q>We have prayed, we have coaxed, we have begged, for the vote, with the
      hope that men, out of chivalry, would bestow equal rights upon women and
      take them into partnership in the affairs of the state. We hoped that
      their common sense would triumph over prejudices and stupidity. We thought
      their boasted sense of justice would overcome the errors that so often
      fetter the human spirit; but we have always gone away empty-handed. We
      shall beg no more.</q>
  </p>
</details>

<details>
  <summary>On optimism</summary>
  <p>
    <q>Optimism is the faith that leads to achievement; nothing can be done
      without hope.</q>
  </p>
</details>

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• <details>