Источник: WebForMyself.com
После многих лет поисков и обсуждений мы, наконец, получаем контейнерные запросы и они изменят дизайн пользовательского интерфейса, как это сделали медиа-запросы.
Наконец-то это случилось: контейнерные запросы действительно в деле! После того, как нам годами говорили, что это невозможно, в прошлом году произошло наконец движение в нужном направлении. В этом году легенда CSS Miriam Suzanne (и другие) усердно работала над тем, чтобы все двигалось в правильном направлении, и мы, наконец, можем увидеть контейнерные запросы в браузере.
Примите к сведению
Сейчас контейнерные запросы находятся на стадии прототипа и доступны только в Chrome Canary. Чтобы включить контейнерные запросы, перейдите в Chrome по адресу chrome://flags и включите там контейнерные запросы.
Прогрессивный подход
Конечно, первое, на чем я сосредотачиваюсь: как мы можем использовать контейнерные запросы прямо сейчас ? Если браузер не понимает какой-то CSS, он проигнорирует его и продолжит синтаксический анализ остального, поэтому мы можем эффективно использовать контейнерные запросы уже сегодня. Вот как бы я реализовал это:
Это классический пример с проблемой дизайна: как вы справляетесь с неизменным состоянием, когда контейнер card не находится внутри меньшего родительского элемента или небольшого окна просмотра? Конечно, мы можем использовать медиа-запросы, но они не очень полезны, если card окажется в нескольких контекстах — скажем, в дизайн-системе.
Одно быстрое и простое решение, которое мы можем реализовать, — это добавить max-width, поэтому, если контейнер card окажется в большом контексте, он, по крайней мере, не будет выглядеть ужасно.
Все-таки это не идеально, но вполне приемлемо. Это минимальное жизнеспособное решение, которое будет работать абсолютно нормально.
Давайте будем постепенно использовать контейнерный запрос. Во-первых, давайте сделаем элемент <main> нашим контейнером.
Мы будем использовать существующее свойство contain которое поможет браузеру эффективно работать с контейнерными запросами. Теперь, когда все разобрано, наш card можно дополнить важнейшим блоком @container.
То, что мы делаем здесь, очень похоже на медиа-запрос. Когда контейнер имеет ширину, равную или большую чем 40em, мы можем изменить макет card, чтобы он лучше соответствовал дополнительному пространству. Мы даже стараемся сделать изображение лучше с помощью aspect-ratio.
Это удобно в нынешнем виде, но контекст, в котором мне больше всего нужны контейнерные запросы, — это возможность применять изменения пользовательского интерфейса, и они должны работать независимо от того, что мы в них вставляем.
Возьмем приведенный выше пример. Это гибкий макет, который позволяет дочерним элементам расти, заполняя пространство. C контейнерными запросами нет никаких проблем, потому что мы устанавливаем изменяемые элементы как контейнер, а правила, которые мы устанавливаем для контейнера card, делают все остальное. Удобно!
Наконец, мы можем набирать текст в контексте
Что наиболее важно при работе с контейнерными запросами, это то, что мы можем установить типографику контекстно! Для меня это самая необходимая функция в реализациях дизайн-систем, и именно поэтому я хочу, чтобы у нас были запросы к контейнерам. Мы можем отвечать медиа-запросами и таким образом устанавливать размеры шрифтов и т. д., но когда мы не знаем, где окажется элемент, это не идеальный подход. Теперь у нас есть контейнерные запросы, и есть возможность корректировки типов, которые намного упрощают разработку.
Есть еще кое-что, что нужно сделать с типом, который нужно изменять. Многие методы изменяемого типа — вроде того, о котором я писал — полагаются на параметры области просмотра, такие как vw масштабирование. Но мы можем заставить изменяемый тип работать не в области просмотра, а в контексте контейнера:
Подведение итогов
Вот все вышеперечисленное в одной удобной демонстрации. Поэкспериментируйте с ним и посмотрите, что у вас получится.
Пока еще не так много вещей, которые можно было бы охватить контейнерными запросами, потому что их реализация в Chrome Canary фактически является прототипом. Приятно наконец увидеть контейнерные запросы на практике и использовать их в браузере. Я буду много рассказывать о них на этом сайте по мере их развития, потому что я совершенно убежден, что контейнерные запросы откроют новую фазу веб-дизайна, столь же важную, как и адаптивный веб-дизайн.
Также обратите внимание, что когда вы смотрели демонстрации в браузере, который не поддерживает функцию контейнерных запросов, они выглядели нормально! Это прогрессивное улучшение в действии, дающее каждому хороший опыт, а при наличии поддержки — оптимальный результат.
Наконец, вот пример демонстрации, которую я сделал, когда впервые познакомился с контейнерными запросами.
Источник: piccalil.li