display: contents
Очередной подробный гайд от Ахмада Шадида по тому, как пользоваться некоторыми особенностями CSS. На этот раз про свойство
Напомню,
Ахмад приводит много полезных примеров, когда избавляться от контейнеров полезно для более простой вёрстки. Интересно применение для адаптивности. Например, на десктопе у вас действительно есть контейнер со сложными отступами внутри, но на мобилке содержимое контейнера встраивается в список рядом. Или когда у вас нет доступа ко всей разметке страницы (привет, Wordpress), но каким-то образом в родителя встроиться нужно.
Важно,
https://ishadeed.com/article/display-contents/
Очередной подробный гайд от Ахмада Шадида по тому, как пользоваться некоторыми особенностями CSS. На этот раз про свойство
display: contents.Напомню,
display: contents — это указание браузеру вынести элемент выше по дереву для учёта в потоке. Самый частый пример, который приводят, это списки. Например, если нужно поднять элементы списка выше в дереве, чтобы они с другими элементами лежали в одном флекс-контейнере.Ахмад приводит много полезных примеров, когда избавляться от контейнеров полезно для более простой вёрстки. Интересно применение для адаптивности. Например, на десктопе у вас действительно есть контейнер со сложными отступами внутри, но на мобилке содержимое контейнера встраивается в список рядом. Или когда у вас нет доступа ко всей разметке страницы (привет, Wordpress), но каким-то образом в родителя встроиться нужно.
Важно,
display: contents может ломать доступность в списках, таблицах и прочих значимых для скринридеров элементах. Так что применяйте осторожно.https://ishadeed.com/article/display-contents/