display
Властивість CSS display
(зображувати) задає те, як обробляється елемент: як блокова чи рядкова рамка, і яке компонування буде застосовано до його нащадків: потокове, сіткове чи гнучке.
Формально кажучи, властивість display
встановлює для елемента внутрішній та зовнішній типи відображення. Зовнішній тип визначає участь елемента у потоковому компонуванні; внутрішній тип визначає компонування нащадків. Деякі значення display
повністю описані у власних специфікаціях; до прикладу, деталі того, що відбувається при встановленні display: flex
визначено у специфікації Гнучкої блокової моделі CSS.
Спробуйте його в дії
Синтаксис
/* складені значення */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* створення блока */
display: none;
display: contents;
/* синтаксис із багатьма значеннями – ключовими словами */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
/* інші значення */
display: table;
display: table-row; /* усі табличні елементи мають еквівалентне значення CSS-властивості display */
display: list-item;
/* Глобальні значення */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
Властивість CSS display
задається за допомогою ключових слів.
Згруповані значення
Ключові значення можуть бути згруповані у шість категорій значень.
Спрямовані назовні
<display-outside>
Ці ключові слова вказують зовнішній тип представлення елемента, що по суті є його роллю у потоковому компонуванні:
block
Елемент утворює блокову рамку, у звичайному потоці додаючи розрив рядка до та після елемента.
inline
Елемент утворює одну або більше рядкових рамок, що не утворюють розривів рядка до або після них. У нормальному потоці наступний елемент буде розташований на тому ж самому рядку, що й попередній, якщо в рядку достатньо місця для нього.
[!NOTE] Коли браузери, що підтримують синтаксис із кількома значеннями, зустрічають властивість display, що містить лише зовнішнє значення (наприклад,
display: block
чиdisplay: inline
), то внутрішнє значення встановлюється вflow
(наприклад,display: block flow
чиdisplay: inline flow
).
[!NOTE] Щоб мати впевненість, що компонування працює в старіших браузерах, можна скористатися синтаксисом з одним значенням, наприклад,
display: inline flex
може мати наступний запасний варіант.container { display: inline-flex; display: inline flex; }
Дивіться більше інформації у статті Використання синтаксису із кількома значеннями у Відображенні CSS.
Спрямовані всередину
<display-inside>
Ці ключові слова вказують внутрішній тип представлення елемента, що визначає тип форматування контексту, в якому його вміст розташовано (припускаючи, що елемент не заміщується):
flow
Елемент розміщує свій вміст за допомогою потокової розкладки (комбінації блокової та рядкової). Якщо його зовнішній тип представлення –
inline
, і він бере участь у блоковому чи рядковому контексті форматування, то генерує рядкові рамки. Інакше – утворює рамки блокового контейнера. Залежно від значень інших властивостей (наприклад,position
,float
чиoverflow
) та від того, чи він бере участь у блоковому, чи рядковому контексті форматування, він або створює новий контекст блокового форматування (КБФ) для свого вмісту, або інтегрує свій вміст у батьківський контекст форматування.flow-root
Елемент породжує блокову рамку, що утворює новий контекст блокового форматування, визначаючи розташування кореня форматування.
table
Такі елементи поводяться неначе HTML-елементи
<table>
. Вони визначають рамки блокового рівня.flex
Елемент поводиться як елемент блокового рівня, і розкладає свій вміст згідно з моделлю flexbox.
grid
Елемент поводиться як елемент блокового рівня, і розглядає свій вміст згідно з сітковою моделлю
ruby
Елемент поводиться як елемент рядкового рівня, і розкладає свій вміст згідно з моделлю форматування рубі. Він поводиться як відповідний елемент HTML
<ruby>
.
[!NOTE] Коли браузери, що підтримують синтаксис із кількома значеннями – ключовими словами, зустрічають властивість display, що містить лише внутрішнє значення (наприклад,
display: flex
чиdisplay: grid
), то зовнішнє значення встановлюється вblock
(наприклад,display: block flex
чиdisplay: block grid
).
Пункт списку
<display-listitem>
Елемент генерує блок для вмісту та окремий рядковий блок для пункту списку.
Окреме значення list-item
змусить елемент поводити себе як елемент списку.
Це можна використовувати разом з властивостями list-style-type
і list-style-position
.
list-item
також може бути скомбінований з будь-яким ключовим значенням <display-outside>
, а також із ключовими словами <display-inside>
flow
чи flow-root
.
[!NOTE] У браузерах, що підтримують синтаксис із кількома значеннями – ключовими словами, якщо внутрішнє значення не вказане, то воно вважається рівним
flow
. Якщо не вказане зовнішнє значення, головні рамки елемента матимуть тип зовнішнього представленняblock
.
Внутрішні
<display-internal>
Деякі моделі компонування, наприклад,
table
таruby
, мають складну внутрішню структуру, з багатьма різними ролями, що можуть бути заповнені їх нащадками.Ця секція визначає ці "внутрішні" значення display, котрі мають зміст лише всередині такого особливого режиму компонування.
table-row-group
Такі елементи поводяться неначе елементи HTML
<tbody>
.table-header-group
Такі елементи поводяться неначе елементи HTML
<thead>
.Такі елементи поводяться неначе елементи HTML
<tfoot>
.table-row
Такі елементи поводяться неначе елементи HTML
<tr>
.table-cell
Такі елементи поводяться неначе елементи HTML
<td>
.table-column-group
Такі елементи поводяться неначе елементи HTML
<colgroup>
.table-column
Такі елементи поводяться неначе елементи HTML
<col>
.Такі елементи поводяться неначе елементи HTML
<caption>
.ruby-base
Такі елементи поводяться неначе елементи HTML
<rb>
.ruby-text
Такі елементи поводяться неначе елементи HTML
<rt>
.ruby-base-container
Такі елементи утворюються як анонімні рамки.
ruby-text-container
Такі елементи поводяться неначе елементи HTML
<rtc>
.
Блокові
<display-box>
Ці значення визначають, чи задає елемент візуальні рамки взагалі.
contents
Такі елементи самі по собі не породжують якихось певних рамок. Вони замінюються власними псевдорамками та рамками своїх нащадків. Будь ласка, зверніть увагу, що специфікація "Представлення CSS, рівень 3" визначає, як значення
contents
мусить впливати на "незвичні елементи" – елементи, що не відображаються суто згідно з концепціями коробки CSS, наприклад, заміщені елементи. Більше деталей – у Додатку B: Діяdisplay: contents
на незвичні елементиnone
Вимикає відображення елемента так, що він не впливає на розкладку (документ візуалізується так, ніби елемент не існує). Усі дочірні елементи також не відображаються. Аби змусити елемент зайняти простір, котрий він би усталено зайняв, але не показувати нічого на його місці, використовуйте натомість властивість
visibility
.
Складені
<display-legacy>
CSS 2 використовував однослівний, складений синтаксис властивості
display
, вимагаючи окремих ключових слів для варіантів одного й того ж режиму компонування на рівні блока та рівні вбудування.inline-block
Елемент утворює блокову рамку, що буде розташована в єдиному потоці з навколишнім вмістом так, ніби це єдиний рядковий елемент (поводячись так, як поводився б заміщений елемент).
Це еквівалентно до
inline flow-root
.inline-table
Значення
inline-table
не має прямого відповідника у HTML. Такий елемент поводиться неначе HTML-елемент<table>
, але не як рамки блокового рівня, а як рядковий елемент. Всередині табличних рамок діє контекст блокового рівня. Це еквівалентно доinline table
.inline-flex
Елемент поводиться як елемент рядкового рівня та розкладає власний вміст згідно з моделлю flexbox. Це еквівалентно до
inline flex
.inline-grid
Елемент поводиться як елемент рядкового рівня і розкладає власний вміст згідно з сітковою моделлю. Це еквівалентно до
inline grid
.
Який синтаксис слід використовувати?
Модуль Відображення CSS описує синтаксис із кількома ключовими словами для значень, котрі можна використовувати з властивістю display
для явного визначення зовнішнього та внутрішнього відображення.
Одинарні значення – ключові слова (складені значення <display-legacy>
) підтримуються для забезпечення зворотної сумісності.
Наприклад, використовуючи два значення, можна задати рядковий гнучкий контейнер наступним чином:
.container {
display: inline flex;
}
Те саме також може бути описано з використанням історичного єдиного значення.
.container {
display: inline-flex;
}
Більше інформації про ці зміни – в посібнику Використання синтаксису із кількома значеннями у Відображенні CSS.
Глобальні
/* Глобальні значення */
display: inherit;
display: initial;
display: unset;
Опис
Окремі сторінки для різних типів значень, котрі може прийняти властивість display
, містять численні приклади цих значень в дії — дивіться розділ Синтаксис. На додачу — перегляньте наступний матеріал, що поглиблено описує різні значення display.
Значення з кількома ключовими словами
Потокове компонування CSS (display: block, display: inline)
- Блокове та рядкове компонування у звичайному потоці
- Потокове компонування та переповнення
- Потокове компонування та режими письма
- Контексти форматування: пояснення
- В потоці та поза потоком
display: flex
- Засади Flexbox
- Шикування елементів у гнучкому контейнері
- Контроль за пропорціями гнучких елементів за основною віссю
- Опанування перенесення гнучких елементів
- Порядок гнучких елементів
- Взаємини Flexbox та інших способів компонування
- Типові випадки використання Flexbox
display: grid
- Засади сіткового компонування
- Взаємини з іншими способами компонування
- Розташування за grid-лініями
- Шаблонні зони в сітках
- Компонування з використанням іменованих grid-ліній
- Автоматичне розташування у сітковому компонуванні
- Шикування блоків у сітковому компонуванні
- Сітки, логічні значення та режими письма
- Сіткове компонування CSS та доступність
- Сіткове компонування CSS та поступове поліпшення підтримки
- Втілення звичних макетів за допомогою сіток
Анімування display
Браузери, що це підтримують, анімують display
із дискретним типом анімації. Загалом це означає, що властивість буде змінюється між двома значеннями на 50% анімації між ними.
Є виняток, а саме – при анімації до чи від display: none
. У цьому випадку браузер перемикається між двома значеннями так, щоб анімований вміст був видимим протягом усієї тривалості анімації. Отже, наприклад:
- Коли
display
анімується відnone
доblock
(чи іншого видимого значенняdisplay
), значення перемикається наblock
на0%
тривалості анімації, щоб воно було видимим протягом усієї анімації. - Коли
display
анімується відblock
(чи іншого видимого значенняdisplay
) доnone
, значення перемикається наnone
на100%
тривалості анімації, щоб воно було видимим протягом усієї анімації.
Така поведінка корисна для створення анімацій входу-виходу, коли хочеться, наприклад, вилучити контейнер із DOM із display: none
, але зробити його зникнення плавним за допомогою opacity
, а не миттєвим.
Коли display
анімується за допомогою Анімацій CSS, потрібно вказати початкове значення display
у явному ключовому кадрі (наприклад, використовуючи 0%
чи from
). Дивіться приклад у Застосуванні Анімацій CSS.
Коли display
анімується за допомогою Переходів CSS, необхідні дві додаткові речі:
- Директива
@starting-style
задає стартові значення для властивостей, від яких повинен відбуватися перехід, коли анімований елемент уперше показується. Це необхідно для уникнення неочікуваної поведінки. Усталено Переходи CSS не запускаються при першому оновленні стилю елемента чи тоді, коли типdisplay
змінюється зnone
на інший. - На оголошенні
transition-property
(або скороченніtransition
) повинен бути заданий стильtransition-behavior: allow-discrete
, щоб увімкнути переходиdisplay
.
Приклади переходів за властивістю display
дивіться на сторінках @starting-style
і transition-behavior
.
Доступність
display: none
Використання display
значення none
на елементі прибере його із дерева доступності. Це призведе до того, що елемент та його нащадки більше не будуть оголошені технологією зчитування з екрана.
Якщо потрібно візуально приховати елемент, більш доступною альтернативою є використання комбінації властивостей для видимого усунення з екрана, але збереження доступності для допоміжних технологій, наприклад, читачів з екрана.
Хоч display: none
приховує вміст із дерева доступності, але приховані елементи, на які є посилання з боку видимих елементів через атрибути aria-describedby
чи aria-labelledby
, доступні для допоміжних технологій.
display: contents
Поточні реалізації у частині браузерів приберуть із дерева доступності будь-який елемент зі значенням contents
властивості display
(залишивши у дереві його нащадків). Це призведе до того, що сам елемент більше не буде оголошений технологією читання екрана. Це некоректна поведінка згідно зі специфікацією CSS.
- Більш доступна розмітка із display: contents | Гідде де Вріс
- Display: Contents не є скиданням CSS | Адріан Розеллі
Таблиці
У частині браузерів зміна значення display
для елемента <table>
на block
, grid
чи flex
змінить його представлення у дереві доступності. Це спричинить до того, що така таблиця не буде коректно оголошена технологією читання з екрана.
- Коротка нотатка про те, що властивість CSS display робить із семантикою таблиці — The Paciello Group
- Прихований вміст для кращої доступності | Go Make Things
- MDN: Розуміння Вказівок з доступності вебконтенту, пояснення Вказівки 1.3
- Розуміння критерію успіху 1.3.1 | W3C Розуміння Вказівок з доступності вебконтенту 2.0
Формальне визначення
Початкове значення | inline |
---|---|
Успадковується | ні |
Обчислене значення | as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified. |
Формальний синтаксис
[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>де
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid
Приклади
Порівняння значень display
У цьому прикладі — два контейнерні елементи блокового рівня, кожен із трьома рядковими дочірніми елементами. Нижче — меню вибору, що дає змогу застосувати різні значення display
до контейнерів, аби порівняти та протиставити те, як різні значення впливають на компонування елемента і його нащадків.
Ми включили padding
та background-color
на контейнерах та їх нащадках, щоб було легше бачити ефект значень display
.
HTML
<article class="container">
<span>Перший</span>
<span>Другий</span>
<span>Третій</span>
</article>
<article class="container">
<span>Перший</span>
<span>Другий</span>
<span>Третій</span>
</article>
<div>
<label for="display">Оберіть значення display:</label>
<select id="display">
<option selected>block</option>
<option>inline</option>
<option>inline-block</option>
<option>inline flow-root</option>
<option>none</option>
<option>flex</option>
<option>inline-flex</option>
<option>inline flex</option>
<option>grid</option>
<option>inline-grid</option>
<option>inline grid</option>
<option>table</option>
<option>block table</option>
<option>list-item</option>
</select>
</div>
CSS
html {
font-family: helvetica, arial, sans-serif;
letter-spacing: 1px;
padding-top: 10px;
}
article {
background-color: red;
}
article span {
background-color: black;
color: white;
margin: 1px;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
article,
div {
margin: 20px;
}
JavaScript
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");
function updateDisplay() {
articles.forEach((article) => {
article.style.display = select.value;
});
}
select.addEventListener("change", updateDisplay);
updateDisplay();
Результат
Зверніть увагу на те, що частина значень із кількома ключовими словами додана для ілюстрації, і вони мають наступні еквіваленти:
inline-block
=inline flow-root
inline-flex
=inline flex
inline-grid
=inline grid
table
=block table
Більше прикладів можна знайти на сторінках для кожного окремого типу даних display у розділі Згрупованих значень.
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
display
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 4 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
contents
|
Chrome Full support 65 | Edge Full support 79 | Firefox Full support 37 | Internet Explorer No support Ні | Opera Full support 52 | Safari Full support 11.1 | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox for Android Full support 37 | Opera Android Full support 47 | Safari on iOS Full support 11.3 | Samsung Internet Full support 9.0 |
Specific behavior of unusual elements when display: contents is applied to them
|
Chrome Full support 65 | Edge Full support 79 | Firefox Full support 59 | Internet Explorer No support Ні | Opera Full support 52 | Safari No support Ні | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox for Android Full support 59 | Opera Android Full support 47 | Safari on iOS No support Ні | Samsung Internet Full support 9.0 |
<display-outside>
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 4 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
flex
|
Chrome Full support 29 | Edge Full support 12 | Firefox Full support 20 | Internet Explorer Partial support 11 | Opera Full support 16 | Safari Full support 9 | WebView Android Full support 4.4 | Chrome Android Full support 29 | Firefox for Android Full support 20 | Opera Android Full support 16 | Safari on iOS Full support 9 | Samsung Internet Full support 2.0 |
flow-root
|
Chrome Full support 58 | Edge Full support 79 | Firefox Full support 53 | Internet Explorer No support Ні | Opera Full support 45 | Safari Full support 13 | WebView Android Full support 58 | Chrome Android Full support 58 | Firefox for Android Full support 53 | Opera Android Full support 43 | Safari on iOS Full support 13 | Samsung Internet Full support 7.0 |
grid
|
Chrome Full support 57 | Edge Full support 16 | Firefox Full support 52 | Internet Explorer Partial support 10 | Opera Full support 44 | Safari Full support 10.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox for Android Full support 52 | Opera Android Full support 43 | Safari on iOS Full support 10.3 | Samsung Internet Full support 6.0 |
inline-block
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 8 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
inline-flex
|
Chrome Full support 29 | Edge Full support 12 | Firefox Full support 20 | Internet Explorer Full support 11 | Opera Full support 16 | Safari Full support 9 | WebView Android Full support 4.4 | Chrome Android Full support 29 | Firefox for Android Full support 20 | Opera Android Full support 16 | Safari on iOS Full support 9 | Samsung Internet Full support 2.0 |
inline-grid
|
Chrome Full support 57 | Edge Full support 16 | Firefox Full support 52 | Internet Explorer Partial support 10 | Opera Full support 44 | Safari Full support 10.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox for Android Full support 52 | Opera Android Full support 43 | Safari on iOS Full support 10.3 | Samsung Internet Full support 6.0 |
inline-table
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3 | Internet Explorer Full support 8 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
list-item
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
Supported on <legend>
|
Chrome Full support 71 | Edge Full support 79 | Firefox Full support 64 | Internet Explorer No support Ні | Opera Full support 58 | Safari No support Ні | WebView Android Full support 71 | Chrome Android Full support 71 | Firefox for Android Full support 64 | Opera Android Full support 50 | Safari on iOS No support Ні | Samsung Internet Full support 10.0 |
Multi-keyword values
|
Chrome No support Ні | Edge No support Ні | Firefox Full support 70 | Internet Explorer No support Ні | Opera No support Ні | Safari Full support 15 | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android No support Ні | Opera Android No support Ні | Safari on iOS Full support 15 | Samsung Internet No support Ні |
none
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 4 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
ruby , ruby-base , ruby-base-container , ruby-text , and ruby-text-container
|
Chrome No support Ні | Edge No support 12 – 79 | Firefox Full support 38 | Internet Explorer Full support 7 | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android Full support 38 | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
table , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row , and table-row-group
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 8 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |