Поддержка двух ключевых слов в 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-flexdisplay: inline flex.

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

https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/

← На главную