Разбираем свойство 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;
Элемент ведет себя как блочный и отображает содержимое в соответствии с моделью сетки. Модель сетки дает нам способ создания системы сеток и позволяет контролировать позиционирование элементов сетки исключительно с помощью CSS, без привлечения HTML. При использовании вместе с медиа-запросами сетка CSS становится мощным инструментом, когда дело доходит до проектирования и построения гибких макетов.
Обратите внимание, что CSS-сетка официально не реализована ни в одном браузере. Чтобы поддерживать ее, браузерам нужно указывать префиксы поставщиков и устанавливать флаги.
Экспериментальные значения (не должны использоваться в рабочем коде)
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 действительно внушительный. Ведь развитие технологий обусловливает появление и новых методик, и новых подходов к решению различных задач в веб-дизайне. Хотя, с другой стороны, многие методики становятся морально устаревшими и теряют свою былую славу. Надеемся, что данная статья поможет вам идти в ногу со временем и позволит более эффективно решать задачи верстки.
Свойство display:
Здравствуйте всем.
Сегодня узнаем об очень интересном свойстве css display:.
Свойство display: отвечает в css за то, как будет показан элемент на странице.
То есть будет ли элемент показан как блочный и всегда расположится с новой строки, или встроенный и расположится непосредственно в ряд с другими элементами.
Что-же тут интересного? А то, что свойство display: задано по умолчанию всем элементам html, и если оно не указано в коде, то браузер отобразит элемент так, как это в нём заложено.
Именно благодаря этому все элементы html подразделяются на блочные, такие как <div>, <p>, <table> и встроенные, такие как <span>, <img>, <a> и т.д.
Внося это свойство в код, вы сможете самостоятельно решать, как будет отображён тот или иной элемент на экране монитора, то есть управлять элементами на своё усмотрение.
Свойство display: имеет множество значений, которые мы сейчас рассмотрим.
Наиболее популярные из них это block (блочный), inline (встроенный) и none (не отображается).
1. display: block;
Элемент отображается как блочный. Задано по умолчанию всем блочным элементам.
Если задать встроенному элементу, то он будет отображён как блочный, то есть с новой строки и займёт всё пространство по ширине родительского блока.
CSS
span{
display: block;
border: 1px solid #777;
}
HTML
<p>Бла-бла-бла <span>Текс-текст-текст</span>бла-бла-бла</p>
Бла-бла-бла Текс-текст-текстбла-бла-бла
2. display: inline;
Отображает элемент как встроенный. Задано по умолчанию всем встроенным элементам.
Если задать блочному элементу, то он отобразится как встроенный, в пределах содержания элемента.
CSS
.blok{
display: inline;
border: 1px solid #777;
}
HTML
<div>Бла-бла-бла
<div>Текст-текст-текст</div>
</div>
3. display: none;
Делает элемент невидимым. Место элемента освобождается и может быть занято другими элементами.
4. display: inline-block;
Элемент остаётся встроенным, то есть располагается в строку и занимает место по своим размерам, но в то-же время принимает свойства блочного элемента, например width (ширина) и height (высота), которые недоступны встроенным элементам, кроме тега <img> которому display: inline-block; задан по умолчанию.
Удобно применять когда несколько блоков нужно расположить в одной строке.
CSS
div{
display: inline-block;
}
.blok{
border: 1px solid #777;
width: 100px;
height: 100px;
}
HTML
<div>
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>
<div>Блок 4</div>
</div>
5. display: list-item;
Добавляет к элементу маркер списка. По умолчанию задан тегам списка, но может быть применён к любому элементу html.
Только при этом обязательно надо указать вид маркера.
CSS
div{
display: list-item;
list-style: inside circle;
}
HTML
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
Дальше пойдут так называемые табличные значения.
Что это значит?
Свойство display: задано всем табличным тегам по умолчанию, но можно написать таблицу и с другими элементами html.
Понадобится это может, по моему, только в одном случае:
Если у вас в файле стилей уже заданы все свойства для таблиц, со всеми отступами, рамками и цветами, то они распространяются на все таблицы сайта, а вам необходимо сделать таблицу с совершенно другим оформлением, вот тогда и пригодятся табличные значения свойства display:.
1. display: table;
Определяет элемент как таблицу. Отражается как блочный. (тег <table>)
К элементу начинают применяться свойства таблиц, рассчитывающие размер ячеек по наибольшей.
2. display: table-caption;
Определяет заголовок таблицы. (тег <caption>)
3. display: table-row;
Определяет элемент как строку таблицы. (тег <tr>)
4. display: table-cell;
Определяет элемент как ячейку таблицы. (теги <td> <th>)
5. display: table-column;
Определяет элемент как колонку таблицы. (тег <col>)
6. display: table-column-group;
Определяет элемент как группу колонок. (тег <colgroup>)
7. display: table-header-group;
Определяет элемент как контейнер для нескольких строк таблицы, расположенных в начале таблицы.
Применяется для задания группе строк однотипных свойств.
8. display: table-row-group;
Определяет элемент как контейнер для нескольких строк таблицы, расположенных в середине таблицы.
9. display: table-footer-group;
Определяет элемент как контейнер для нескольких строк таблицы, расположенных в конце таблицы.
Практическое применение значений group — табличная вёрстка сайта.
Напишем таблицу используя элемент <span>
CSS
.tab{
display: table;
border: 1px solid #888;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
border: 1px solid #888;
padding: 10px;
}
HTML
<span>
<span>
<span>Текст</span>
<span>Текст</span>
<span>Текст</span>
</span>
<span>
<span>Текст</span>
<span>Текст</span>
<span>Текст</span>
</span>
</span>
На этом всё о свойстве CSS display:
Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster
CSS свойство display
Определяет, как элемент должен быть показан в документе (тип его отображения)
CSS синтаксис
display: значение;
Возможные значения
| Значение | Описание |
|---|---|
| inline | Элемент отображается как встроенный (подобно <span>). |
| block | Элемент отображается как блоковый (подобно <div>). |
| flex | Элемент отображается как flex-контейнер блочного уровня (гибкий контейнер). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3. |
| inline-block | Генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. |
| inline-flex | Элемент отображается как flex-контейнер встроенного уровня (гибкий элемент). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3. |
| inline-table | Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и обтекается другими элементами. |
| list-item | Элемент ведет себя подобно элементу <li>. |
| run-in | Генерирует либо встроенный, либо блочный элемент в зависимости от контекста. |
| table | Элемент ведет себя подобно элементу <table>. |
| table-caption | Элемент ведет себя подобно элементу <caption>. |
| table-column-group | Элемент ведет себя подобно элементу <colgroup>. |
| table-header-group | Элемент ведет себя подобно элементу <thead>. |
| table-footer-group | Элемент ведет себя подобно элементу <tfooter>. |
| table-row-group | Элемент ведет себя подобно элементу <tbody>. |
| table-cell | Элемент ведет себя подобно элементу <td>. |
| table-column | Элемент ведет себя подобно элементу <col>. |
| table-row | Элемент ведет себя подобно элементу <tr>. |
| none | Элемент не отображается (и не имеет никакого воздействия на верстку страницы). |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Совместимость: Полностью поддерживаются всеми браузерами только значения block, inline, list-item и none. Значения inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row и table-row-group не поддерживаются IE7 и более ранними версиями. В IE8 требуется декларация !DOCTYPE. IE9 поддерживает все значения. В Safari для значений flex и inline-flex требуется указывать префикс, например, «display: -webkit-flex» и «display: -webkit-inline-flex;«.
Пример
Отображаем параграф, как встроенный элемент
p.inline {
display: inline;
}
CSS — встречайте «display» свойство
display является наиболее важным стилевым свойством в CSS для управления шаблоном. Каждый элемент имеет значение отображения по умолчанию в зависимости от того, к какому типу относится данный элемент. Для большинства элементов, значения отображения по умолчанию, как правило, будут block или inline. В оригинале, блочный элемент часто еще называют элементом блочного уровня(block-level element).У строчного же элемента нет альтернативного названия.
div является стандартным блочным элементом. Блочные элементы начинаются с новой строки и их содержимое растягивается влево и вправо настолько, насколько это возможо. Другие распространенные блочные элементы это p и form, а также новые блочные элементы из HTML5, такие как header, footer, section, и прочие.
inline
span это стандартный строчный элемент. Строчный элемент может обернуть текст внутри абзаца <span>
вот так
</span> не нарушая его структуры. Наиболее распространенный строчный элемент это a так как вы используете его для ссылок.
none
Еще одно распространенное значение для отображения это none. Некоторые специализированные элементы, такие как script используют это значение по умолчанию. Оно широко используется с JavaScript, чтобы скрывать и показывать элементы вместо того, чтобы удалять и воссоздавать их снова.
Оно отличается от visibility. При задании свойству display значения none страница будет отображаться словно элемент не существует. visibility: hidden; просто скроет элемент, но элемент по прежнему будет продолжать занимать место, как если бы он был полностью виден.
You found me!
другие display значения
Есть много более экзотичных стилевых значений для отображения, таких как list-item и table. Вот полный список. Позже мы обсудим inline-block и flex.
дополнение
Как я уже говорил, каждый элемент имеет тип отображения по умолчанию. Тем не менее, вы всегда можете переопределить это! Хотя это не имело бы смысла для того, чтобы сделать div строчным, вы можете использовать это, чтобы настроить отображение элементов с частной семантикой. Типичный пример – возможность выстраивания li элементов для горизонтального меню.
display в CSS | Учебные курсы
Мы уже видели, что есть в основном два типа элементов HTML: блочные и строчные элементы. Мы также упомянули несколько альтернативных, вроде list-item или table-cell.
Свойство display позволяет изменять тип элемента HTML. По умолчанию для абзаца <р> (блочный элемент) значение display будет block, но может отображаться как inline:
p { display: inline; }Почему бы не использовать строчные элементы, такие как <span>?
Потому что вы выбираете элемент HTML по его смыслу, а не отображению. Если мы решили, что абзац подходит нашему содержимому лучше всего, мы не должны менять тег ради стилизации. Это CSS заботится о стилизации.
Короче говоря, display позволяет сменить тип элемента без изменения его смысла.
Для каждого варианта display есть определённое поведение:
- block будет занимать всю доступную ширину;
- inline будет действовать как обычный текст;
- inline-block является, как предполагает его название, соединением блочного и строчного поведения, вариант «лучшее из обоих миров»;
- list-item похож на block, так как он занимает всю доступную ширину, но показывает дополнительный маркер пункта списка;
- у table, table-row и table-cell очень специфическое, хотя и неожиданное поведение, которое позволяет строить более интересные макеты.
display: block
Превратит любой элемент в блочный.
Этот метод часто используется для ссылок, чтобы увеличить зону их щелчка, которую можно легко оценить, задав цвет фона.
CSS
.menu a { background: red; color: white; }HTML
<ul>
<li>
<a>Главная</a>
</li>
<li>
<a>Возможности</a>
</li>
<li>
<a>Цены</a>
</li>
<li>
<a>О нас</a>
</li>
</ul>Если превратить эти ссылки в блочные, мы увеличим их область:
.menu a { background: red; color: white; display: block; }display: inline
Превращает любой элемент в строчный, как если бы он был только простым текстом.
Часто используется для создания горизонтальной навигации, где семантически, но не визуально полезны пункты списка.
CSS
.menu li { display: inline; }HTML
<ul>
<li>
<a>Главная</a>
</li>
<li>
<a>Возможности</a>
</li>
<li>
<a>Цены</a>
</li>
<li>
<a>О нас</a>
</li>
</ul>display: list-item
Элементы HTML, отображаемые как list-item, являются (неудивительно) пунктами списка <li>, но также описанием термина <dd>.
Пункт списка отображается с маркером (в неупорядоченном списке <ul>) или с порядковым номером (в упорядоченном списке <ol>).
Поскольку отображение этих маркеров и цифр меняется во всех браузерах, также трудно стилизовать их в CSS, правило display: list-item никогда не используется. На самом деле, часто <li> отображаются как display: block или display: inline, так как они более гибкие для стилизации.
display: none
Применение display: none к элементу HTML удаляет его из веб-страницы, как если бы он никогда не существовал в вашем коде.
CSS
.gone-baby-gone { display: none; }HTML
<p>Я слышал кто-то выступает?</p>
<p>Ха-ха-ха</p>
<p>Я, должно быть, сплю...</p>Здесь в коде три абзаца, но видны только два, как будто второго человека никогда не существовало.
Свойство visibility немного похоже на display. Применение visibility: hidden скрывает элемент со страницы, но только делает его невидимым: он по-прежнему занимает место, где только что был.
CSS
.hollow-man { visibility: hidden; }HTML
<p>So far away from me </p>
<p>So far i just can't see</p>
<p>So far away from me</p>
<p>You're so far away from me</p>
<p>You're so far away...</p>Здесь в коде пять абзацев, но появляются только два, при этом пространство, которое занимали скрытые абзацы, остаётся, но абзацы видеть вы не можете.
Перейти к заданиям
contents и его новые друзья спешат на помощь — CSS-LIVE
Будни фронтенд-разработки то и дело подбрасывают нам задачки с взаимоисключающими условиями, а ограничения HTML и CSS делают их решение и вовсе невозможным (впрочем, за радость от преодоления этой «невозможности» многие из нас и любят эту работу).
Годами для многих, казалось бы, элементарных задач приходилось выбирать решение по принципу меньшего из зол. Сейчас стало полегче благодаря флексбоксам, вот-вот станет еще легче благодаря гридам. Но все системы раскладки, даже самые передовые, упираются в фундаментальное ограничение: CSS привязывается к DOM-элементам. А значит, нельзя собрать вместе и красиво вывести в одном контейнере дочерние элементы разных DOM-предков — как бы удобно, красиво, логично и адаптивно это ни было.
Так вот: теперь можно освободить элементы из-под этого «DOMашнего ареста» и работать с элементами разных уровней вложенности как с непосредственными соседями. Правда, пока в Firefox (добавлено 25.05.2017: уже не только, в Chrome 58+ примеры тоже работают, но нужно включить флаг «Экспериментальные функции веб-платформы» в chrome://flags, добавлено 06.12.2017: а теперь еще и в Safari TP 45, добавлено 07.03.2018: и наконец в стабильном Chrome 65+ без флага!). Так что желательно открыть один из этих браузеров, чтобы увидеть примеры в действии.
Display:contents. Что это и откуда
Мы привыкли к простым значениям display: inline, block, inline-block. Теперь вот flex. Изредка еще table(-cell). Постоянные читатели нашего сайта вспомнят периодическую таблицу display, где их побольше — но даже там не было никакого contents. Откуда он вообще взялся?
Это значение описано в новой спецификации CSS Display module level 3. На момент выхода статьи по ссылке выше он был первым очень сырым черновиком, теперь же это солидная спецификация с минимумом красных пометок. Так что самое время взяться за нее — там вообще много нового и необычного. А про наше значение contents там сказано так:
Сам элемент не создает никаких боксов, но его потомки и псевдоэлементы создают боксы как обычно. В плане генерации боксов и раскладки элемент должен рассматриваться так, как будто в дереве документа его заменили его потомками и псевдоэлементами.
Иными словами, потомки элемента ведут себя как соседи его соседей, становясь с ними на один уровень, сам элемент перестает быть промежуточной оберткой для них. Для чего это нужно? Давайте посмотрим.
Display:contents. Примеры использования
Меню с логотипом в одном флекс-контейнере
Возможно, вы уже видели пример Джейка Арчибальда, в котором два потомка флекс-элемента благодаря display:contents для их родителя превращаются в самостоятельные флекс-элементы. Вот похожий пример, более приближенный к жизни:
See the Pen PZaxoK by Ilya Streltsyn (@SelenIT) on CodePen.
Здесь причуда дизайнера заставила нас вставить логотип между пунктами меню, и вся эта конструкция должна равномерно растягиваться с равными промежутками. Без display:contents нам пришлось бы либо запихивать логотип внутрь меню (прощай, семантика…), либо делить само меню на две части и «колдовать» с отступами. А с ним мы делаем пункты меню и логотип равноправными флекс-элементами, а дальше магия флексбоксов — включая изменение визуального порядка элементов — делает всё за нас сама!
Дерево-таблица
Часто бывает нужно представить в табличном виде иерархические данные, например, значения какого-то интегрального показателя и его разбивку по составляющим. Пример из нашей сферы — результаты разных браузеров в популярном тесте html5test.com: суммарные баллы по разделам спецификации и их «разбивка» по подразделам.
Данные явно табличные, но вот беда — табличная модель HTML практически полностью исключает иерархичность. Максимум, что мы можем — выделить главные разделы таблицы в отдельные tbody. Дальше дробить таблицу нельзя. Поэтому на странице самого теста пришлось плодить отдельные классы для строк таблицы каждого уровня вложенности, нетривиальную логику для их скрытия-раскрытия и т.п. Надо ли говорить, что без стилей и скриптов вся информация об иерархии теряется.
Иерархические структуры в HTML можно передавать с помощью вложенных списков. Что, если так и сделать, а табличное отображение придать с помощью CSS? Увы, табличная модель CSS унаследовала от HTML-таблиц не только структуру, но и ограничения: в боксе с display:table могут «жить» только table-*-group, а в тех — table-row. Было бы здорово, если бы table-row-group можно было вкладывать, но увы — алгоритм не разрешает. Вместо пропущенных элементов табличной иерархии достраиваются недостающие анонимные боксы, и получается обычная скучная вложенная таблица, лишенная главного табличного плюса — сквозной вертикальной связи по столбцам.
Но с display:contents эта задача решается в два счета (для примера приведено только начало таблицы):
See the Pen Demo of hierarchical data table using display:contents by Ilya Streltsyn (@SelenIT) on CodePen.
Мы просто сделали вид, что промежуточных уровней иерархии… нет вообще! И все строки таблицы (элементы p) подчинены главной таблице (обертке с class="table") напрямую. И все вертикальные связи сохранились!
Но вложенность никуда не исчезла — мы ведь не трогали DOM, мы лишь изменили display некоторых элементов. Поэтому мы по-прежнему можем, например, визуально разграничить элементы разных уровней отступами, основываясь на этой вложенности (в примере как раз это показано). Более того, теперь скрывать/раскрывать подуровни стало элементарно — как с обычным древовидным списком. Только обычно мы меняли display с none на block и обратно, а здесь — c none на contents и обратно. Не нужно больше циклами выискивать строки для скрытия по классам и т.п.! Удобно же, правда?
Решение проблемы подсеток в грид-раскладке
Отвязка визуальной структуры от DOM-структуры позволяет решить и ту проблему, на которую недавно сетовал Эрик Мейер в статье о грид-раскладке (мы как раз ее переводили): невозможность привязать элементы к гриду, создаваемому родителем их родителей. С display:contents это элементарно: как и в предыдущих примерах, с точки зрения визуальной структуры мы делаем так, что «дети» элемента не отображаются вообще, а его «внуки» отображаются так, как будто они «дети» — благодаря чему они автоматом подхватывают «магию» грид-раскладки, созданную внешним контейнером. В Firefox (либо Chrome c включенным флагом «Экспериментальные функции веб-платформы») можно увидеть это в действии.
Обратите внимание, что кода получается даже меньше, чем в решении Эрика с подсетками. Хак ли это? На мой взгляд — не больший, чем любая другая смена display на «неродное» значение. У многих задач бывает несколько правильных решений, и это — вполне стандартное применение стандартных средств языка. И уж точно не стоит откладывать выпуск практически готовой реализации грид-раскладки ради непременной реализации подсеток, когда есть такой изящный и наглядный обходной путь. В споре Эрика и Таба Аткинса лично я поддерживаю Таба. А вы что думаете?
Поддержка (и можно ли ее улучшить)
Надеюсь, сомнений в полезности новинки у вас не осталось, но поддержка браузерами пока всё портит. Единственное место, где для display:contents просматривается какая-никакая замена — это инлайновый контекст форматирования, в котором контейнеру можно поставить display:inline, что поместит его содержимое (напр. инлайн-блоки) в одну строку с содержимым его родителя. Это может подойти для редких и простых частных случаев вроде такого, но для самых «вкусных» применений — вроде примеров из статьи — к сожалению, такой замены не видно.
Остается лишь «теребить» разработчиков браузеров, чтобы они поскорее внедрили поддержку такого полезного значения (к тому же вряд ли сверхсложного в реализации). Проще всего, наверное, будет добиться этого от MS Edge. Пожалуйста, проголосуйте за поддержку этого свойства там!
Бонус: другие полезные новинки CSS Display level 3
Нужно сразу оговориться, что полезны они лишь в теории: в отличие от display:contents, они пока не поддерживаются нигде. Но такие многообещающие!
Первым я бы упомянул свойство box-supress. Помните, сколько мучений доставляла нам отмена display:none, особенно на этапе ученичества? Стоило лишь впопыхах поставить вместо него display:block строке таблицы или текстовому элементу, как вся верстка сыпалась как карточный домик. Это новое свойство обещает избавить от этих мучений навсегда. Оно позволит убирать элемент из верстки и возвращать обратно, не «забывая» о том, как он отображался прежде. На данный момент спецификация предлагает для него 3 значения: show — отображать как обычно, discard — скрыть напрочь (как при display:none), и hide — нечто совсем интересное: «отобразить, но не показывать» (построить визуальную структуру как обычно, со всеми размерами и т.п. — но не выводить ее на экран!). Наверное, это последнее значение пригодится для динамического скрытия/показа элемента с анимацией.
Добавлено 22.02.2017. Cвойство box-supress решили отложить на следующий этап, на CSS Display Level 4. В нынешней спецификации его больше нет.
Не менее «революционное» изменение затронет и обычные значения свойства display, особенно те, которые сами «живут» в одном контексте форматирования, а внутри себя создают другой. Теперь и то и другое можно будет указывать явно и по отдельности — значение display:none разобьют на 2 отдельных ключевых слова, каждое из которых отвечает за «внешнюю» и «внутреннюю» стороны отображения элемента соответственно. А наши старые привычные «значения с дефисами» станут лишь псевдонимами для некоторых таких комбинаций. И появится еще одно полезное значение display:block flow-root: оно наконец позволит решить проблему замены «clearfix-у» полностью, без издержек любого из существующих решений (добавлено 9.05.2017: уже появилось!). Другой вопрос — будет ли это по-прежнему актуально, в эпоху повсеместной грид-раскладки:)
Так что закончим статью стандартным уже призывом читать спецификации:) И, конечно, делиться своими соображениями и находками в комментариях!
P.S. Это тоже может быть интересно: