<display-box>

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

contents

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

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

none

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

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

• More accessible markup with display: contents | Hidde de Vries
• Display: Contents Is Not a CSS Reset | Adrian Roselli

<display-box> = 
  contents  |
  none      

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

HTML

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

CSS

p.secret {
  display: none;
}

Результат

В этом примере внешний <div> имеет 2-пиксельную красную границу и ширину 300px. Однако он также имеет значение 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 Is Not a CSS Reset | Adrian Roselli

• Более доступный разметка с display: contents Хидде де Вриес (2018)