CSS приклад: display

Таблиця сумісності браузерів для властивості display в CSS

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	2.0+	7.0+	1.0+	1.0+	2.1+	1.0+

Кратка інформація

Многоцільове властивість, яка визначає, як елемент повинен бути показаний в документі.

Синтаксис

Значення

Список можливих значень цієї властивості дуже короткий - block, inline, list-item та none. Усі інші допустимі значення підтримуються браузерами вибірково.

... (детальні значення видалені для кращої короткості)

Табл. 1. Підтримка значень display браузерами
Значення	Опис	IE6	IE7	IE8	Cr2	Cr8	Op9.2	Op10	Sa3.1	Sa5	Fx3	Fx4
block	Елемент відображається як блочний.

Об'єктна модель

[window.]document.getElementById("elementID").style.display

Браузери

Internet Explorer до версії 7 включно: підтримка значень table-footer-group та table-header-group происходит только для тегов thead та tfoot;

Opera 9.2, а також Firefox 2.0: підтримка table-column применяется только для тега col;

Chrome 2.0, а також Safari версії 3 і старше, iOS: значення run-in підтримують только для елементів, які розташовані перед вбудованими елементами або з властивістю display встановлено як inline.

Safari 3.1: значення table-cell не працює, якщо немає елементів зі значеннями властивості display: table та table-row.

Форматування

SEO текст: Ця стаття надає інформацію про сумісність браузерів з властивістю display в CSS. Дізнайтеся, які значення підтримують популярні браузери та як кожне значення впливає на відображення елементів на веб-сторінці.

Часті запитання

Q: Як використовувати display: flex в CSS?

A: Застосування display: flex до батьківського елемента робить його контейнером flex, що дозволяє впорядковувати дочірні елементи як рядок або колонку, змінювати їх розміри та вирівнювати.
Q: Для чого використовувати display: grid в CSS?

A: Застосування display: grid до елемента робить його контейнером grid, що дозволяє створювати складні макети з рядками та стовпцями, керувати розмірами та розміщенням дочірніх елементів.
Q: Яка різниця між display: block, display: inline та display: inline-block в CSS?

A: display: block робить елемент блочним, display: inline робить елемент стрічковим, а display: inline-block поєднує властивості блочного та стрічкового елементів, дозволяючи вирівнювати їх горизонтально та змінювати розміри.
Q: Як використовувати display: none в CSS?

A: Застосування display: none приховує елемент зі сторінки, роблячи його невидимим та не займаючим місця у макеті.
Q: Для чого використовувати display: inline-flex в CSS?

A: display: inline-flex поєднує властивості стрічкового та flex контейнера, дозволяючи вирівнювати та розміщувати дочірні елементи гнучко в стрічковому контексті.