Тип CSS `<display-box>`

Эти ключевые слова определяют, создаёт ли элемент блоки отображения.

Синтаксис

Допустимые значения <display-box>:

contents

Эти элементы сами по себе не создают определённый блок. Вместо этого создаются их псевдоблок и дочерние блоки. Обратите внимание: спецификация CSS Display Level 3 определяет, как значение contents должно влиять на «необычные элементы» — элементы, которые не отображаются исключительно с помощью концепций блоков CSS, например заменяемые элементы. Подробнее см. в Приложении B: влияние display: contents на необычные элементы.

Из-за ошибки в браузерах в настоящее время это удаляет элемент из дерева доступности — программы чтения с экрана не будут считывать его содержимое. Подробнее см. в разделе Доступность ниже.

none

Отключает отображение элемента, чтобы он не влиял на макет (документ отображается так, как если бы элемента не существовало). Отображение всех дочерних элементов также отключается. Чтобы элемент занимал обычное для него место, но при этом ничего не отображал, используйте свойство visibility.

Доступность

В текущих реализациях большинства браузеров любой элемент со значением contents свойства display удаляется из дерева доступности. В результате технологии чтения с экрана перестают объявлять этот элемент, а в некоторых версиях браузеров — и его дочерние элементы. Согласно спецификации CSSWG, такое поведение неверно.

• [Более доступная разметка с display: contents

  Hidde de Vries](https://hidde.blog/more-accessible-markup-with-display-contents/)

• [Display: Contents — это не сброс CSS

  Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)

Формальный синтаксис

<display-box> = 
  contents |
  none

Примеры

В этом первом примере абзацу с классом secret задано значение display: none; теперь блок и всё его содержимое не отображаются.

display: none

HTML

<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS

p.secret {
  display: none;
}

Результат

display: contents

В этом примере у внешнего элемента <div> красная рамка толщиной 2 пикселя и ширина 300 пикселей. Однако ему также задано значение display: contents, поэтому этот <div> не будет отображаться, рамка и ширина перестанут применяться, а дочерний элемент будет показан так, как если бы родительского элемента никогда не существовало.

HTML

<div class="outer">
  <div>Inner div.</div>
</div>

CSS

.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

Результат

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

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

См. также

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-legacy>

• [Display: Contents — это не сброс CSS

  Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)

• Более доступная разметка с display: contents — Hidde de Vries (2018)