#codepen дня

Знакомая и популярная гифка, не правда ли?

Пришло время развеять миф! Мне кажется, вы достаточно готовы к двум практически одинаковым примерам на разных техниках.

Раз, на свежих Container Queries, если ваш браузер их поддерживает: https://codepen.io/jh3y/pen/LYxKjKX

Вот только есть нюанс! Как только их завезли в Chrome Canary, появился и полифилл. Именно этот полифилл и используется в примере, так что работает практически везде.

Два, на CSS Custom Properties: https://codepen.io/jh3y/pen/KKajeyy

В общем, на современном CSS сложнее неправильно сложить жалюзи, чем правильно. С чем я всех нас и поздравляю.

👉 @htmlshit
#css #containerqueries #customproperties #polyfill

#статья дня

Помните мы обсуждали свежие контейнерные запросы и полифилл для них?

Вот Ахмад Шадид решил подойти к задаче немного с другой стороны, а именно со стороны дизайнера: https://ishadeed.com/article/container-queries-for-designers/

Какие возможности открывают контейнерные запросы, когда уместно использовать их, а когда — запросы медиа? Эта фраза на русском языке звучит странно в любом виде, простите.

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

#css #containerqueries

#библиотека дня

Помните полифилл на контейнерные запросы? Назывался cqfill. Ну если не помните, вот ссылка на пост: https://t.me/htmlshit/601

Так вот, этот полифилл заставлял много шевелить руками, добавлять кастомные свойства и вообще был так себе.

На днях вот вышел ещё один, от ребят из Google Chrome Labs, container-query-polyfill: https://github.com/GoogleChromeLabs/container-query-polyfill

Работает на Mutation- и ResizeObserver, не требует дополнительных телодвижений в виде пользовательских свойств и вообще чуть быстрее.

Пробуем :)

https://codepen.io/bramus/pen/LYxNpeE

#css #containerqueries #polyfill

#статья дня

Кто из вас, котаны, использует контейнерные запросы в реальных проектах?

Лес рук...

А ведь всего несколько лет назад запрос на изменение разметки в зависимости от ширины родителя, а не окна (viewport-а), стоял очень остро. Вот мы их получили и... молчание.

Этим же вопросом не так давно задался Крис Койер, создатель CodePen: https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/

Ну и что же, ответ не заставил себя ждать!

Филип Валтон из команды Google Chrome выпустил статью на тему: https://web.dev/blog/how-to-use-container-queries-now

TL;DR
В статье описывается максимально прагматичный подход, в котором пользователи старых браузеров получат мобильную разметку, а современных — все плюшки контейнерных запросов.

Идея, кстати, не нова. Когда вышли финальные версии Flexbox и Grid-ов, многие разработчики и деврелы буквально советовали верстать мобильную разметку, а потом сверху накладывать грид. В итогу худшее, что происходило с пользователями IE 9-11 — они видели мобильную разметку. Ничего страшного же.

Ну что, пользуемся?

#css #cqw #containerqueries