Поддержка двух ключевых слов в display
В посте про релиз Firefox 70 был интересный пункт про то, что в display
появилась поддержка значений, состоящих из двух ключевых слов. Рейчел Эндрю на Mozilla Hacks написала статью про это нововведение — "The two-value syntax of the CSS Display property".
Правила, которые определяют распределение элементов на странице, задаются с помощью контекста форматирования (Formatting Context), которое, в свою очередь, можно установить с помощью свойства display
. Например, Flex Formatting Context устанавливается с помощью декларации display: flex
. Но это ещё не всё. Спецификация CSS определяет поведение самого блока и его потомков. В примере выше <div>
, у которого будет выставлен display: flex
, будет иметь блочный тип относительно своих соседей в нормальном потоке документа, но у потомков будет задан Flex Formatting Context. То есть у блока существует внешний (для нормального потока документа) и внутренний (для потомков) типы отображения. Обновлённая спецификация для display
теперь явно описывает эту особенность. Например, display: flex
эквивалентно display: block flex
, а display: inline-flex
— display: inline flex
.
На данный момент поддержка комбинированных значений есть только в Firefox 70. В любом случае, рекомендую почитать статью или хотя бы посмотреть на таблицу соответствий новых и старых значений display
.
https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/