Smashing Magazine опубликовал хорошую статью Павла Померанцева про управление z-index'ами "Managing Z-Index In A Component-Based Web Application".

Павел рассказывает, что такое контекст наложения (stacking context) и почему именно он является основной проблемой некорректного наложения элементов страницы друг на друга. Затем делится своей стратегией использования z-index, которая может помочь при управлении наложением в приложениях с большим количеством компонентов:
1. Все компоненты должны создавать свой собственный контекст наложения. Если внутри компонента нет элементов с z-index, то этот шаг необязателен.
2. Внутри CSS-файлов компонентов поддерживайте z-index'ы так как вам удобно. Предпочтительно использовать z-index только для тех элементов, которые не являются потомками других элементов.
3. Если возникает проблема с неправильным наложением, надо найти первый общий предок-компонент проблемных элементов и внутри этого компонента поменять z-index'ы корректным образом.

Автор также показывает пример, в котором этот подход может перестать работать. Но такие ситуации могут быть только в очень сложных приложениях, и в этом случае проблемный элемент можно выносить в конец body и ставить ему очень большой z-index (но надо учитывать, что это может быть не очень хорошее решение для скринридеров).

#css #layout

https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/

Прочитал статью Мишель Баркер про то, где лучше использовать grid, а где flexbox "To Grid or to Flex?"

Появление в CSS поддержки grid не означает, что flexbox устарел, наоборот, они дополняют друг друга. В общем случае, если вам необходимо сделать раскладку элементов в одном измерении, то лучше всего для этого подойдёт flexbox, для раскладки в двух измерениях — grid. Но здесь есть нюансы, например, в статье рассматривается случай двумерной раскладки, которую гораздо проще сделать с помощью flexbox и наоборот.

Статья хорошая советую почитать и посмотреть примеры. На хабре есть перевод.

P.S. Хочу немного дополнить статью. В ней говорится, что поддержки гридов в IE11 нет. Это не совсем верно. Если постараться, то можно реализовать раскладку на гридах в IE. Как это сделать, написано в серии статей Дэниала Тонона "CSS Grid in IE".

#css #layout

https://css-irl.info/to-grid-or-to-flex/

Крис Койер на CSS-Tricks написал небольшую статью про работу с псевдоэлементами — «A Little Reminder That Pseudo Elements are Children, Kinda».

Вот основная мысль статьи. Псевдоэлементы ведут себя в родительских элементах точно так же как и обычные потомки. Например, если сделать грид на контейнере с пседоэлементом, то псевдоэлемент станет ячейкой этого грида. Это же справедливо и для флекс-контейнеров — внутри них псевдоэлемент становится флекс-элементом.

Взял на заметку, как получить стили псевдоэлемента из JavaScript. Для этого нужно использовать getConputedStyle с двумя аргументами:

const styles = window.getComputedStyle(
document.querySelector('.container'),
'::before'
);


Статья хорошая. Рекомендую почитать, чтобы разобраться в нюансах работы с псевдоэлементами.

#css #layout

https://css-tricks.com/a-little-reminder-that-pseudo-elements-are-children-kinda/

Брайан Робинсон написал у себя в блоге статью про использование gap с flexbox'ами — "CSS Gap creates a bright future for margins in Flex as well as Grid".

Свойство gap в flexbox пришло из grid'ов. Раньше, для того чтобы сделать одинаковые расстояния между элементами, надо было указывать соответствующие расстояния с помощью margin. С приходом gap это стало немного проще:

.flex-container {
    display: flex;
    gap: 1rem;
}

Советую посмотреть в статье хороший пример flexbox-раскладки, использующей gap (на данный момент работает только в Firefox).

#layout #css

https://bryanlrobinson.com/blog/gap-provides-bright-future-for-margins-in-flex-as-well-as-grid/

На Mozilla Hacks пару дней назад появилась статья Рейчел Эндрю про column-span — "Multiple-column Layout and column-span in Firefox 71".

В многоколоночной разметке контент непрерывно "перетекает" из одной колонки в другую. Эта разметка очень популярна в газетах и журналах, так как улучшает читабельность текста. Спецификация Multiple-column Layout описывает необходимые свойства для создания такой разметки. В рамках этой спецификации описывается свойство column-span, с помощью которого можно стилизовать элементы так, чтобы они занимали несколько колонок сразу, например, как заголовок в газете. С релизом Firefox 71 column-span будет поддерживаться во всех современных браузерах.

В статье рассказывается о том, как работает это свойство и какие были проблемы при его добавлении в спецификацию.

#css #specification #layout

https://hacks.mozilla.org/2019/11/multiple-column-layout-and-column-span-in-firefox-71/

Ахмад Шадид написал статью про "Intrinsic Sizing In CSS".

Черновик стандарта "Intrinsic & Extrinsic Sizing" описывает поведение блоков при указании внешних размеров (extrinsic), и размеров, которые определяются содержимым элемента (intrinsic). То есть extrinsic sizing — это 10px, 20% и т.п. ( width: 100% ), а intrinsic — min-content, max-content и fit-content ( width: min-content ). Благодаря intrinsic-свойствам вёрстка макетов для динамического контента становится проще. При их использовании с гридами можно делать такие макеты, которые невозможно было сделать другими средствами CSS. Все основные свойства intrinsic sizing поддерживаются современными браузерами.

Никогда раньше не сталкивался с intrinsic sizing. "Can I Use" показывает, что эти свойства доступны с третьей версии Firefox и 22-ой версии Chrome. В общем, очень рекомендую посмотреть статью и потыкать примеры.

#css #layout

https://ishadeed.com/article/intrinsic-sizing-in-css/