Синтаксис свойства CSS Display с двумя значениями

От автора: если вам нравится читать примечания к релизам, то вы, возможно, заметили в примечаниях Firefox 70 строку, относящуюся к реализации синтаксиса с двумя значениями для свойства CSS display. Или, может быть, вы встретили упоминание о нем во вчерашнем обзоре Firefox 70. Сегодня я объясню, что это значит, и почему понимание этого синтаксиса важно, несмотря на то, что сейчас он реализован только в Firefox.

Свойство display

Свойство display изменяет контекст форматирования элемента и его потомков. В CSS некоторые элементы по умолчанию являются блочными, а другие встроенными. Это одна из первых вещей, которые вы узнаете о CSS.

Свойство display позволяет переключаться между этими состояниями. Например, это означает, что h1, который, обычно является блочным элементом, может отображаться, как встроенный. Или span, изначально встроенный, может отображаться как блочный.

Совсем недавно мы получили CSS Grid Layout и Flexbox. Для доступа к ним мы также используем значения свойства display — display: grid и display: flex. Только при изменении значения display дочерние элементы становятся элементами flex или grid и начинают реагировать на другие свойства из спецификациях grid или flexbox.

Два значения для display — span с display: flex

Однако grid и flexbox демонстрируют, что элемент имеет как внешний, так и внутренний тип отображения. Когда мы используем display: flex, мы создаем элемент уровня блока с дочерними flex-элементами. Потомки описываются как участвующие в контексте flex-форматирования. Вы можете увидеть это, если возьмете span и примените к нему display: flex — span теперь будет блочным элементом. Он ведет себя как элементы уровня блока по отношению к другим блокам в макете. Это, как если бы вы объявили для span display: block, однако мы также получаем измененное поведение потомков. В CodePen ниже вы можете видеть, что строка текста и em стали двумя flex-элементами.

Два значения для display — span с display: grid

Макет сетки ведет себя так же. Если мы используем display: grid, мы создаем элемент уровня блока и контекст форматирования сетки для дочерних элементов. У нас также есть методы для создания встроенного блока с flex или grid потомками с помощью display: inline-flex и display: inline-grid. В следующем примере показан div, обычно блочный элемент, действующий как встроенный элемент с дочерними grid-элементами.

Как встроенный элемент, блок не занимает все пространство строки, и рядом с ним отображается следующая строка текста. Однако потомки все равно являются элементами сетки.

Рефакторинг display

Как показывают вышеприведенные примеры, внешний тип display элемента всегда является block или inline и определяет поведение блока в обычном потоке документа. Внутренний тип display затем изменяет контекст форматирования дочерних элементов.

Чтобы лучше описать это поведение, спецификация CSS Display была реорганизована, чтобы display могло принимать два значения. Первое описывает, является ли внешний тип display block или inline, тогда как второе значение описывает форматирование дочерних элементов. В списке ниже показано, как некоторые из этих новых значений соответствуют единичным значениям, которые теперь называются в спецификации устаревшими значениями (слева — единичное значение, справа — новое значение).

Есть и другие значения display, включая lists и tables; чтобы увидеть полный набор значений, посетите CSS Display Specification.

Мы можем видеть, как это будет работать для Flexbox. Если я хочу получить блочный элемент с flex дочерними элементами, я использую display: block flex, и если мне нужен встроенный элемент с flex дочерними элементами, я использую display: inline flex. Приведенный ниже пример будет работать в Firefox 70.

Старые добрые display: block и display: inline также не остаются нетронутыми, display: block становится display: block flow — это блочный элемент с потомками расположенными в нормальном потоке. Элемент display: inline становится display: inline flow.

display: inline-block а также display: flow-root

Все это становится более интересным, если мы рассмотрим пару значений display — одно новое и одно, которое относится еще к CSS2. Встроенные блоки в CSS предназначены для размещения внутри строчного блока анонимного блока, который оборачивает каждую строку текста в предложении. Это означает, что они ведут себя определенным образом: если вы добавите отступы ко всем краям встроенного блока, как, например, в приведенном ниже примере, где я присвоила встроенному элементу цвет фона, эти отступы применяются. И, тем не менее, он не сдвигает линейные блоки. Кроме того, встроенные элементы не имеют ширины или высоты (или inline-size и block-size).

Использовав display: inline-block мы заставляет встроенный элемент содержать этот отступ и принимать свойства width и height. И тем не менее элемент остается встроенным; он продолжает размещаться в потоке текста.

В следующем CodePen у меня есть два элемента span, один обычный inline, а другой inline-block, так что вы можете увидеть разницу в компоновке, которую вызывает это значение.

Теперь мы можем рассмотреть новое значение display — flow-root. Если вы задаете для элемента display: flow-root, он становится новым контекстом форматирования блока, становясь корневым элементом для нового нормального потока. По сути, это приводит к созданию плавающих внутренних элементов. Кроме того, поля дочерних элементов остаются внутри контейнера, не сворачиваются с полем родительского элемента.

В следующем CodePen вы можете сравнить первый пример без, display: flow-root со вторым — с display: flow-root. Изображение в первом примере свисает снизу блока, так как оно было выведено из нормального потока. Плавающие элементы извлекаются из потока и сокращают линейные блоки содержимого, следующие за ними. Однако сам блок не содержит элемент, если только этот блок не создает новый контекст форматирования блока.

Во втором примере у нас есть flow-root, и вы можете видеть, что блок с серым фоном теперь содержит float, оставляя зазор под текстом. Если вы когда-либо работали плавающим содержимым, для которого было установлено значение свойства overflow — auto, то вы видите, что мы добились того же, поскольку значения overflow, отличные от visible по умолчанию, создают новый контекст форматирования блока. Однако могут быть некоторые дополнительные нежелательные эффекты, такие как обрезка теней или неожиданные полосы прокрутки. Использование Flow-root предоставляет возможность создать контекст форматирования блока (BFC) без побочных неожиданных эффектов.

Причина по которой я это акцентирую внимание на display: inline-block и display: flow-root заключается в том, что эти две вещи по сути одинаковы. Хорошо известное значение inline-block создает встроенный корневой поток, поэтому новая версия с двумя значениями display: inline-block — это display: inline flow-root. Оно выполняет ту же работу, что и свойство flow-root, которое с двумя значениями становится display: block flow-root.

Вы можете увидеть, как работают оба этих значения в последнем примере, используя Firefox 70.

Можем ли мы использовать эти два свойства значения?

С поддержкой, доступной в настоящее время только в Firefox 70, слишком рано начинать использовать эти свойства с двумя значениями в производстве. В настоящее время другие браузеры не будут их поддерживать. Запрос display: block flex будет считаться недействительным во всех браузерах, за исключением Firefox. Поскольку вы можете получить доступ ко всем функциям, используя синтаксис с одним значением, который останется псевдонимами нового синтаксиса, нет причин внезапно переходить на него.

Тем не менее, этот синтаксис важно знать с точки зрения того, что он значит для CSS. Эти значения правильно объясняют взаимодействие блоков с другими блоками с точки зрения того, являются ли они блочными или встроенными, а также с точки зрения поведения их потомков. Чтобы понять, что делает display, я думаю, они дают очень полезное пояснение. В результате я начала изучать этот синтаксис, использующий эти два значения, чтобы лучше понимать, что происходит, когда вы меняете контексты форматирования.

Всегда интересно видеть, как внедряются новые функции, и я надеюсь, что другие браузеры также вскоре реализуют версии с двумя значениями. И затем, в не столь отдаленном будущем, мы сможем писать CSS точно так же, как мы сейчас его объясняем, четко демонстрируя взаимосвязь между блоками и поведением их потомков.

Автор: Rachel Andrew

Источник: https://hacks.mozilla.org

Редакция: Команда webformyself.