Розбираємо властивість display в CSS

Властивість display є однією з найбільш важливих властивостей CSS, які використовуються верстальниками для побудови макету. Найпопулярнішими значеннями цієї властивості є block, inline та none. Значення table та inline-block також досить поширені. Але крім цих значень є ще маса інших, які можна і потрібно використовувати, і про які ви, можливо, не знали. Тому, цей пост присвячений розгляду різних значень властивості display в CSS-стилях.

 

Перш ніж ми поговоримо про властивість display, ми повинні згадати «дерево блоків» (box tree).

CSS бере вихідний документ, організований як дерево елементів та текстових вузлів, і відображає його на полотно (наприклад, екран монітора). Для цього він створює проміжну структуру, дерево блоків, яка представляє собою структуру форматування для готового (візуалізованого) документу. Кожен блок в дереві блоків відповідає відповідному елементу в просторі і/або часі на полотні.

Щоб створити дерево блоків, CSS спочатку використовує каскадування і успадкування, щоб призначити обчислене значення для кожної властивості CSS кожному елементу у вихідному дереві. Потім для кожного елемента CSS генерує нуль або більше блоків, як зазначено у властивості display цього елемента. Іншими словами, властивість display визначає тип відображення кожного блоку в дереві блоків.

Всі елементи мають значення display за замовчуванням, але його можна перевизначити, явно встановивши значення display на щось інше. Значення за замовчуванням в XML (а також для елементів SVG) є inline. А в HTML значення властивостей display за замовчуванням беруться з поведінки, описаної в специфікаціях HTML, або з таблиці стилів за замовчуванням для браузера/користувача.

 

Основні значення властивості display в CSS

display: block;

Елемент генерує «коробку» блочного рівня. Всі елементи на цьому рівні починаються з нового рядка (вертикально) і, якщо не вказано інше, розтягуються до всієї ширини свого контейнера. Елементи прилягають впритул один до одного, якщо для них не задані відступи (margin).

 

display: none;

Видаляє елемент і його дочірні елементи зі звичайного потоку документа. Документ відображається так, як ніби цього елемента ніколи не було, а займане ним місце не резервується. Зчитувачі екрану також ігнорують вміст такого елемента.

 

display: inline;

Елемент генерує один або кілька вбудованих блоків (блоки в лінію, в ряд). Елементи інлайнового рівня займають стільки місця на лінії, скільки визначають їх теги. Значення можна вважати доповненням до елементів блочного рівня.

 

display: list-item;

Елемент, що відображається як елемент списку, поводиться точно так само, як елемент блочного рівня, але додатково створює поле для маркера. Тільки елементи <li> мають значення за замовчуванням для елемента списку (list-item). Значення зазвичай використовується для повернення елементів <li> до їх дефолтної поведінки.

 

display: inline-block;

Елемент генерує «коробку» блочного рівня, але весь блок веде себе як вбудований (інлайновий) елемент. Тобто, він «обтікається» іншими елементами веб-сторінки.

 

Табличний рівень

Існує багато значень display, які дозволяють елементам поводитися так само, як і HTML таблицям. У таблиці нижче представлені значення «табличного рівня» та їх короткий опис.

table	Співвідноситься з <table> HTML елементом. Визначає «коробку» блочного рівня.
table-header-group	Співвідноситься з <thead> HTML елементом.
table-row	Співвідноситься з <tr> HTML елементом.
table-cell	Співвідноситься з <td> HTML елементом.
table-row-group	Співвідноситься з <tbody> HTML елементом.
table-footer-group	Співвідноситься з <tfoot> HTML елементом.
table-column-group	Співвідноситься з <colgroup> HTML елементом.
table-column	Співвідноситься з <col> HTML елементом.
table-caption	Співвідноситься з <caption> HTML елементом.
inline-table	Це єдине значення, яке не має прямого зіставлення з HTML елементом. Елемент буде вести себе як елемент HTML таблиці, але як інлайновий блок, а не як елемент блочного рівня.

Хоча табличні макети використовуються рідко, вони бувають дуже корисними в деяких випадках. Наприклад, якщо ви хочете відображати таблицю лише на широких екранах, а для менших екранів тільки зберегти її підтримку. Цього можна досягти за допомогою поєднання медіа-запитів і властивості display.

 

Більш сучасні значення

Спосіб відображення контенту на веб-сторінці досить сильно змінився з моменту появи HTML. Коли веб-дизайнери хотіли створити якийсь креативний макет, першим використовуваним методом було вкладення HTML-таблиць (табличні макети).

А коли CSS ставав все більш популярним, верстальники перейшли до плаваючих макетів, розміщуючи контент в різних плаваючих div, щоб домогтися бажаного ефекту. Така техніка досі дуже поширена, але після появи flexbox (макета гнучкої «коробки» в CSS), ця ситуація буде тривати все менше. Коли макет гнучкої «коробки» буде повністю підтримуватися всіма браузерами, гнучкі макети стануть переважаючим методом верстки. Проте, не всі браузери підтримують специфікацію flexbox, і це сильно гальмує її розвиток.

Модель flexbox дуже ефективна, і оскільки вона може багато чого зробити, необхідні деякі зусилля, щоб повністю зрозуміти, як вона працює і як її використовувати. Для глибокого вивчення цієї моделі потрібні окремі великі статті, а сьогодні ми розглянемо лише ази. Рекомендуємо прочитати про Флексбокс в нашому огляді.

 

display: flex;

Оголошуючи display: flex; для елемента, він стає flex (гнучким) контейнером, а його дочірні елементи стають гнучкими елементами цього контейнера. Властивості flex не поширюються на онуків цього елемента. Як гнучкий контейнер, так і гнучкі елементи мають свої власні гнучкі властивості.

 

display: grid;

Елемент поводиться як блоковий і відображає вміст відповідно до моделі сітки. Модель сітки Grid Layout дає нам спосіб створення системи сіток і дозволяє контролювати позиціонування елементів сітки виключно за допомогою CSS, без залучення HTML. При використанні разом з медіа-запитами сітка CSS стає потужним інструментом, коли справа доходить до проектування і побудови гнучких макетів.

Зверніть увагу, що CSS-сітка офіційно не реалізована в жодному браузері. Щоб підтримувати її, браузерам потрібно вказувати префікси постачальників і встановлювати прапорці.

UPDATE: на сьогоднішній день дана модель має гарну специфікацію та велику підтримку сучасними браузерами.

 

Експериментальні значення (не повинні використовуватися в робочому коді)

display: run-in;

Теоретично, якщо ви встановлюєте властивість display елементу в run-in, він відображається як блок всередині іншого блоку. Варіант використання цієї властивості полягає в тому, щоб мати власний метод для створення заголовків, які візуально розташовуються в тому ж рядку, що і наступний контент.

Для цієї мети можна було б використовувати і float, але тут мається на увазі, що значення автоматично вписується в рядок і вирівнюється по базовій лінії.

Зверніть увагу, що це значення підтримується тільки в Internet Explorer 11 і Opera Mini.

 

display: ruby;

Елемент поводиться як інлайновий і видає свій вміст відповідно до моделі форматування елемента <ruby> HTML. Якщо коротко, то це дозволяє відображати анотації поруч з базовою лінією тексту (зазвичай для допомоги в вимові). Така техніка досить поширена в китайській і японській мовах.

 

display: contents;

Суть цього значення полягає в тому, що коли ви його використовуєте для елемента, він зникає з DOM, але всі його нащадки залишаються і займають своє місце. Ця специфікація на даний момент підтримується тільки в Firefox >59, Chrome >65, Safari 11.1.

 

Короткий підсумок

Розглянутий сьогодні список значень властивості display дійсно значний. Адже розвиток технологій зумовлює появу і нових методик, і нових підходів до вирішення різних завдань у веб-дизайні. Хоча, з іншого боку, багато методик стають морально застарілими і втрачають свою колишню славу. Сподіваємося, що дана стаття допоможе вам йти в ногу з часом і дозволить більш ефективно вирішувати завдання верстки.