diff options
Diffstat (limited to 'files/ru/web/css/display/index.html')
| -rw-r--r-- | files/ru/web/css/display/index.html | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/files/ru/web/css/display/index.html b/files/ru/web/css/display/index.html new file mode 100644 index 0000000000..3c40e975d0 --- /dev/null +++ b/files/ru/web/css/display/index.html @@ -0,0 +1,218 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - CSS Property + - Reference + - display + - Справка +translation_of: Web/CSS/display +--- +<div>{{CSSRef}}</div> + +<p class="summary">Свойство <strong><code>display</code></strong> (<a href="/ru/docs/Web/CSS">CSS</a>) определяет <dfn><em>тип отображения (display type)</em> элемента</dfn>, имеющий два основных свойства, определяющих генерацию боксов — <strong>внешний тип отображения</strong> определяет расположение бокса в <a href="/ru/docs/Web/CSS/CSS_Flow_Layout">схеме потока (flow layout)</a> и <strong>внутренний тип отображения</strong> определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).</p> + +<p>Некоторые значения свойства <code>display</code> полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведен ниже.</p> + +<pre class="brush:css no-line-numbers">/* <display-outside> values */ +display: block; +display: inline; +display: run-in; + +/* <display-inside> values */ +display: flow; +display: flow-root; +display: table; +display: flex; +display: grid; +display: ruby; + +/* <display-outside> plus <display-inside> values */ +display: block flow; +display: inline table; +display: flex run-in; + +/* <display-listitem> values */ +display: list-item; +display: list-item block; +display: list-item inline; +display: list-item flow; +display: list-item flow-root; +display: list-item block flow; +display: list-item block flow-root; +display: flow list-item block; + +/* <display-internal> values */ +display: table-row-group; +display: table-header-group; +display: table-footer-group; +display: table-row; +display: table-cell; +display: table-column-group; +display: table-column; +display: table-caption; +display: ruby-base; +display: ruby-text; +display: ruby-base-container; +display: ruby-text-container; + +/* <display-box> values */ +display: contents; +display: none; + +/* <display-legacy> values */ +display: inline-block; +display: inline-table; +display: inline-flex; +display: inline-grid; + +/* Global values */ +display: inherit; +display: initial; +display: unset; +</pre> + +<p>{{CSSInfo}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Свойство <code>display</code> задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:</p> + +<dl> + <dt>{{CSSxRef("<display-outside>")}}</dt> + <dd>Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.</dd> + <dt>{{CSSxRef("<display-inside>")}}</dt> + <dd>Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).</dd> + <dt>{{CSSxRef("<display-listitem>")}}</dt> + <dd>Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.</dd> + <dt>{{CSSxRef("<display-internal>")}}</dt> + <dd>Некоторые модели разметки, такие как <code><span class="css">table</span></code> и <code>ruby,</code> имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.</dd> + <dt>{{CSSxRef("<display-box>")}}</dt> + <dd>Эти значения определяют, генерирует ли элемент отображение боксов вообще.</dd> + <dt>{{CSSxRef("<display-legacy>")}}</dt> + <dd>В CSS 2 используется синтаксис с одним ключевым словом для свойства <code>display</code>, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.</dd> + <dt><code><a href="/ru/docs/Mozilla/Gecko/Chrome/CSS/display-xul"><display-xul></a></code> {{Non-standard_Inline}}{{Deprecated_Inline(62)}}</dt> + <dd>Значения, используемые только в Firefox, в основном, для стилизации. <a href="/ru/docs/Mozilla/Tech/XUL">XUL documents</a>.</dd> +</dl> + +<h3 id="Наследственные_значения_отображения">"Наследственные" значения отображения</h3> + +<p>Спецификация уровня 3 подразумевает два значения для свойства <code>display</code> — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.</p> + +<p>Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:</p> + +<pre class="brush: css">.container { + display: inline flex; +}</pre> + +<p><span id="result_box" lang="ru"><span>В настоящее время это можно задать с помощью одного значения</span></span>.</p> + +<pre class="brush: css">.container { + display: inline-flex; +} +</pre> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Примеры">Примеры</h2> + +<p>В разделе {{anch("Syntax")}} содержатся несколько примеров для разных типов значений <code>display</code>, которые это свойство может принимать.</p> + +<p>Кроме того, вы можете найти подробные объяснения способов разметки для определенных значений <code>display</code> в других статьях на MDN:</p> + +<ul> + <li><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">Разметка CSS Grid </a></li> + <li><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Разметка CSS Flexible box</a></li> + <li><a href="/ru/docs/Learn/CSS/CSS_layout">Разметка CSS</a> (Модуль обучения для начинающих)</li> +</ul> + +<h2 id="Доступность">Доступность</h2> + +<h3 id="display_none"><code>display: none;</code></h3> + +<p>Если свойство <code>display</code> принимает значение <code>none</code> на элементе, то элемент удаляется из <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дерева доступности</a>. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.</p> + +<p>Если вы хотите визуально скрыть элемент, более доступной альтернативой является использование <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">комбинации свойств</a> для визуального удаления изображения с экрана, но это сохраняет его для синтаксического анализа с помощью вспомогательных технологий, таких как считыватели экрана.</p> + +<h3 id="display_contents"><code>display: contents;</code></h3> + +<p>Браузеры удаляют любой элемент со свойством <code>display,</code> имеющим значение <code>contents</code> из <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дерева доступности</a>. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. <span id="result_box" lang="ru"><span>Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM</span></span>.</p> + +<ul> + <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li> + <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li> +</ul> + +<h3 id="Таблицы">Таблицы</h3> + +<p>Если у элемента {{HTMLElement("table")}} изменить значение свойства <code>display на </code><code>block</code>, <code>grid</code> или <code>flex, это изменит</code> его представление в <a href="/ru/docs/Learn/Доступность/What_is_accessibility">дереве доступности</a>. Это приводит к тому, что таблица<span id="result_box" lang="ru"><span> не будет объявлена должным образом с помощью технологии чтения экрана.</span></span></p> + +<ul> + <li><a class="external" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li> + <li><a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Спецификации" name="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td> + <td>{{Spec2('CSS3 Display')}}</td> + <td>Добавлены <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code> и multi-keyword значения.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td>Добавлены <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> и <code>ruby-text-container</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Grid')}}</td> + <td>Добавлены значения модели grid бокс.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Добавлены значения модели flexible бокс.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Добавлены значения модели table и <code>inline-block<em>.</em></code></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#display', 'display')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Начальное определение. Базовые значения: <code>none</code>, <code>block</code>, <code>inline</code> и <code>list-item</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div> + +<p>{{Compat("css.properties.display", 10)}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Блоковая и Inline разметка нормальном потоке</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li> + <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li> + <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li> +</ul> |