display

Свойство display задаётся с помощью ключевых слов. Ключевые слова группируются по шести категориям:

<display-outside>

Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.

<display-inside> (en-US)

Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).

<display-listitem>

Создаёт блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.

<display-internal> (en-US)

Некоторые модели разметки, такие как table и ruby, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.

<display-box> (en-US)

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

<display-legacy> (en-US)

В CSS 2 используется синтаксис с одним ключевым словом для свойства display, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.

<display-xul> Non-standard Устарело

Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.

Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.

Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

.container {
    display: inline flex;
}

В настоящее время это можно задать с помощью одного значения.

.container {
    display: inline-flex;
}

display = 
  [ (en-US) <display-outside> || (en-US) <display-inside> ] (en-US)         | (en-US)
  <display-listitem>                                | (en-US)
  <display-internal>                                | (en-US)
  <display-box>                                     | (en-US)
  <display-legacy>                                  | (en-US)
  <display-outside> || (en-US) [ (en-US) <display-inside> | (en-US) math ] (en-US)  

<display-outside> = 
  block   | (en-US)
  inline  | (en-US)
  run-in  

<display-inside> = 
  flow       | (en-US)
  flow-root  | (en-US)
  table      | (en-US)
  flex       | (en-US)
  grid       | (en-US)
  ruby       

<display-listitem> = 
  <display-outside>? (en-US)     && (en-US)
  [ (en-US) flow | (en-US) flow-root ] (en-US)? (en-US)  && (en-US)
  list-item              

<display-internal> = 
  table-row-group      | (en-US)
  table-header-group   | (en-US)
  table-footer-group   | (en-US)
  table-row            | (en-US)
  table-cell           | (en-US)
  table-column-group   | (en-US)
  table-column         | (en-US)
  table-caption        | (en-US)
  ruby-base            | (en-US)
  ruby-text            | (en-US)
  ruby-base-container  | (en-US)
  ruby-text-container  

<display-box> = 
  contents  | (en-US)
  none      

<display-legacy> = 
  inline-block  | (en-US)
  inline-table  | (en-US)
  inline-flex   | (en-US)
  inline-grid   

В разделе Syntax содержатся несколько примеров для разных типов значений display, которые это свойство может принимать.

Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений display в других статьях на MDN:

• Разметка CSS Grid
• Разметка CSS Flexible box
• Разметка CSS (Модуль обучения для начинающих)

Если свойство display принимает значение none на элементе, то элемент удаляется из дерева доступности. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.

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

Браузеры удаляют любой элемент со свойством display, имеющим значение contents из дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

• Display: Contents Is Not a CSS Reset | Adrian Roselli
• More accessible markup with display: contents — hiddedevries.nl

Если у элемента <table> (en-US) изменить значение свойства display на block, grid или flex, это изменит его представление в дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.

• Short note on what CSS display properties do to table semantics — The Paciello Group
• Hidden content for better a11y | Go Make Things
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0

• Блоковая и Inline разметка нормальном потоке (en-US)
• Formatting contexts explained (en-US)
• visibility, float, position
• grid, flex