TGViewer
Defront — про фронтенд-разработку и не только Defront — про фронтенд-разработку и не только @defront · 5.04K subscribers
Post #295 2K
В посте про релиз 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.

#css #specification

https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/
Mozilla Hacks – the Web developer blog The two-value syntax of the CSS Display property The display CSS property is how we change the formatting context of an element and its children. One of the first things you will learn about CSS is that some ...
More from @defront
  1. Jan 7, 2024Channel name was changed to «Defront — про фронтенд-разработку и не только»
  2. Feb 24, 2022Про войну в Украине Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет н…
  3. Feb 23, 2022Qwik — возобновляемый JavaScript-фреймворк Райан Карниато поделился своими мыслями после р…
  4. Feb 22, 2022Обработка ошибок с помощью reportError Стэфан Джудис рассказал про малоизвестный метод для…
  5. Feb 21, 2022Выбор библиотеки по её размеру Владимир Клепов рассказал про подводные камни выбора библио…
  6. Feb 10, 2022Time-travel debugging в Svelte Сэм Ван Тассел рассказал про DeLorian — новый инструмент дл…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →