#frontend #css #css3 #grid #flexbox #flex

👩‍💻"Умные" макеты с контейнерными запросами

Контейнерные запросы — одна из тех вещей, которые открывают новые возможности, но поскольку они очень похожи на старый способ работы с медиа-запросами, наш первый инстинкт — использовать их так же, или, по крайней мере, очень похоже.

Но при этом мы не используем преимущества того, насколько умными являются контейнерные запросы по сравнению с медиа-запросами!

Поскольку медиа запросы сыграли важную роль в наступлении эры отзывчивого веб-дизайна, не хочется говорить о них ничего плохого… но медиа-запросы — это тупость. Не тупые с точки зрения концепции, а тупые в том смысле, что они не знают очень многого. На самом деле, большинство людей полагают, что они знают больше, чем есть на самом деле.

🖥 Читать статью

📱 @dev_notes_ru

💡 Совет по CSS

Заметил, что многие разработчики используют margin для добавления промежутков между элементами flexbox, особенно в меню.

Вместо margin во Flexbox можно использовать свойство gap и избежать неудобных :not(:last-child) или сброса margin на первом/последнем элементе. 😉

gap в baseeline с апреля 2021 года. ✅

📱 @dev_notes_ru

#CSS #flexbox #tips