02.08.2021
687f290f9266897cfe73e94c4181b4d7

Контейнерные запросы CSS для дизайнеров

Контейнерные запросы CSS для дизайнеров

От создателя: работа над веб-дизайном включает в себя разработку дизайна для экранов различных размеров. На основе этих дизайнов разработчик будет использовать медиа-запросы CSS для определения ширины либо высоты области просмотра, а затем изменять дизайн на базе этого. Именно так мы разрабатывали веб-макеты последние 10 лет, и скоро этот процесс станет еще лучше. У меня для Вас отличные новости.

Контейнерные запросы CSS, издавна запрашиваемая веб-разработчиками функция, скоро появится в CSS и сейчас доступна в качестве экспериментальной функции в Chrome Canary. В этой статье я расскажу, что это такое, как это изменит ваш рабочий процесс как дизайнера и почти все другое. Не важно, являетесь ли вы дизайнером, который кодирует либо нет, поскольку основная цель этой статьи — представить концепцию, чтоб вы могли быть готовы к изменениям. Если вы заметите какие-либо CSS, которые не стопроцентно понимаете, вы можете игнорировать их и двигаться далее.

Довольно слов, давайте разбираться!

Текущее состояние адаптивного дизайна

В текущее время все еще можно работать с несколькими версиями 1-го и того же веб-макета, чтобы показать, как внутренние составляющие будут меняться в зависимости от ширины области просмотра. Мы разрабатываем различные размеры, такие как мобильные, планшетные и настольные.

Контейнерные запросы CSS для дизайнеров

На рисунке выше дизайнер сделал три варианта одного и того же дизайна, чтоб разработчик мог получить представление о том, как все будет работать. До сих пор все отлично.

Теперь я покажу вам более подробный взор на дизайн и его варианты, чтоб пролить свет на проблему, которую контейнерные запросы CSS исправят для нас.

Контейнерные запросы CSS для дизайнеров

Обратите внимание, что это один и тот же компонент, и у него есть три варианта: по умолчанию, карточный и рекомендуемый. Как дизайнер вы использовали несколько версий макета, чтоб продемонстрировать это. Это все равно что сказать: «Вот так компонент статьи будет смотреться на мобильных устройствах, и так он будет смотреться на планшетах».

В CSS разработчику нужно создать три варианта этого компонента, и каждый из их уникален. Рассмотрим следующие основные стили:

CSS

Приведенные выше варианты зависят от медиа-запросов либо ширины области просмотра. Это означает, что мы не можем управлять ими на базе их родительской ширины. Теперь вы сможете спросить, в чем проблема? Что ж, это неплохой вопрос.

Проблема в том, что разработчик связан с внедрением варианта компонента только тогда, когда ширина области просмотра больше определенного значения. К примеру, если я хочу использовать «рекомендованный» вариант размера планшета, это не сработает, почему? Поэтому что медиа-запрос для него срабатывает при ширине области просмотра 1300px либо больше.

Контейнерные запросы CSS для дизайнеров

Не только это, но мы также можем столкнуться с неувязкой, когда контент меньше ожидаемого. Иногда создатель контента добавляет только одну статью, в дизайн которой было включено три из их. В таком случае либо у нас будет пустое место, или статья расширится, чтобы заполнить доступное место. Рассмотрим следующий рисунок:

Контейнерные запросы CSS для дизайнеров

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

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

Контейнерные запросы CSS для дизайнеров

Что, если мы заместо этого переключим наше мышление на родительский компонент компонента? Другими словами, что, если мы запросим родительский элемент и решим, как компонент должен смотреться на основе его родительской ширины либо высоты? Давайте узнаем о концепции контейнерных запросов.

Что такое контейнерные запросы?

Во-1-х, позвольте мне определить, что такое контейнер. Это элемент, который содержит другой элемент(ы) и время от времени называется оболочкой. Прототип контейнерных запросов сейчас доступен в Chrome Canary. Благодаря усилиям многих людей, таких как Мириам Сюзанна и других.

Когда компонент помещается в элемент, он содержится в этом элементе. Это значит, что мы можем запросить ширину его родительского элемента и поменять его на основе этой ширины. Разглядим следующий рисунок:

Контейнерные запросы CSS для дизайнеров

Обратите внимание, что любая карточка имеет желтый контур, который представляет родительский элемент для каждого компонента. С помощью контейнерных запросов CSS мы можем изменять компонент в зависимости от его родительской ширины. Чтоб было понятнее, вот HTML-разметка для вышеизложенного:

Компонент — это элемент с классом .c-media, а его родительский элемент — это элемент .o-grid__item. В CSS мы можем cделать последующее:

CSS

Поначалу мы сказали браузеру, что каждый элемент с классом .o-grid__item является контейнером. Потом мы сказали браузеру, что если ширина родительского элемента равна либо больше 320 пикселей, он должен смотреться по-другому. То же самое и для запроса 450 пикселей. Вот как работают запросы контейнера CSS.

Не считая того, мы можем определять их где угодно, а это означает, что мы можем делать запросы в контейнере верхнего уровня, если это нужно. Теперь, когда вы понимаете основную идею запросов контейнера CSS, я желаю показать вам следующий рисунок.

Контейнерные запросы CSS для дизайнеров

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

Проектирование с учетом контейнерных запросов

Как дизайнеру, вам нужно адаптироваться к этой революционной функции CSS, так как она улучшит наши разработки и написание CSS. Мы не только проектируем размеры экрана, но и учитываем, как составляющие должны адаптироваться при изменении ширины их контейнера.

На данный момент все более популярными становятся дизайн-системы. Команда дизайнеров создаст набор правил и компонент, чтобы другие участники могли создавать странички на их основе. С появлением контейнерных запросов CSS мы также спроектируем, как компонент должен приспособиться в зависимости от его родительской ширины.

Разглядим следующий дизайн:

Контейнерные запросы CSS для дизайнеров

Обратите внимание, что у нас есть заголовок, раздел статей, цитата и информационный бюллетень. Каждый из их должен адаптироваться либо к ширине области просмотра, или к ширине родительского элемента. Я представляю для себя разделение компонентов на следующие:

Область просмотра (медиа-запросы)

Родительский (контейнерные запросы)

Составляющие, на которые не влияют, такие как кнопки, теги, абзацы.

Для примера пользовательского интерфейса вот как мы можем поделить компоненты.

Контейнерные запросы CSS для дизайнеров

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

На последующем рисунке обратите внимание на то, как любая вариация компонентов приложения имеет определенную ширину.

Контейнерные запросы CSS для дизайнеров

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

Более того, у нас может быть вариант компонента, который должен отображаться только в определенном контексте. К примеру, страница со списком событий. В таком случае принципиально четко понимать, где использовать этот вариант. Вопрос в том, как сказать дизайнерам, где им следует использовать эти составляющие?

Общение с разработчиками

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

Давайте применим это к компоненту статьи, который мы обсуждали ранее.

Контейнерные запросы CSS для дизайнеров

Обратите внимание, как я соотнес каждый вариант с определенным контекстом, а не с окном просмотра. Чтоб доказать это еще больше, я желаю показать вам, как компонент будет действовать по-другому при использовании с сетью CSS.

В сетке CSS мы можем указать браузеру, что мы желаем, чтобы столбцы расширялись, если их количество меньше ожидаемого, с помощью главного слова auto-fit. Это мощная функция, так как она может помочь нам показать различные варианты в одном и том же контексте. Разглядим следующий рисунок:

Контейнерные запросы CSS для дизайнеров

Очень полезно иметь компонент, который реагирует на ширину собственного родительского элемента. Как вы только что лицезрели, мы просматриваем страницу размером с рабочий стол и имеем различные разделы с разным количеством столбцов в каждом из их.

Избегайте сложностей при разработке адаптивных компонент

Важно помнить, что внутренние части компонента похожи на игру лего. Вы сможете упорядочить их в зависимости от текущего варианта, но всему есть предел. Время от времени для интерфейсного разработчика было бы лучше работать над совсем новым компонентом, чем создавать вариацию с помощью контейнерных запросов. Обратите внимание на последующее.

Контейнерные запросы CSS для дизайнеров

В нем есть последующее:

Аватар

Имя

Кнопка

Пара ключ / значение

Если внутренние части останутся прежними либо, по крайней мере, не будут включать новые, мы можем поменять компонент и иметь несколько вариантов, как показано ниже.

Контейнерные запросы CSS для дизайнеров

Примеры использования контейнерных запросов CSS

Давайте разглядим некоторые варианты использования, которые можно воплотить с помощью контейнерных запросов CSS.

Перечень чата

Я видел эту закономерность в мессенджере Facebook. Перечень чата меняется в зависимости от ширины области просмотра. Мы можем воплотить это с помощью контейнерных запросов CSS.

Контейнерные запросы CSS для дизайнеров

Когда будет довольно места, список расширится и отобразит имя каждого юзера. Родительский элемент списка чата может быть элементом, размер которого меняется динамически (например, с помощью модулей просмотра CSS либо функций сравнения CSS).

Вот как мы можем воплотить это в CSS.

CSS

Обратите внимание, что ширина стороны равна 0.4f, потому это динамическая ширина. С другой стороны, я добавил свойство contain. Потом, если ширина контейнера больше 180px, будет отображаться имя юзера.

Другой аналогичный вариант использования — это боковая навигация. Мы можем переключить положение метки элемента навигации с новейшей строки или рядом со значком.

Контейнерные запросы CSS для дизайнеров

Обратите внимание, как метка элемента навигации перемещается на новую строку, когда контейнер (с боковой стороны) маленький, и рядом со значком навигации, когда довольно места.

Демо

Аккордеон

Шаблон аккордеона можно использовать для таких вещей, как FAQ. В неких случаях нам может потребоваться добавить перечень FQA на боковой панели или в незначительный области пользовательского интерфейса. Могут помочь контейнерные запросы!

Контейнерные запросы CSS для дизайнеров

Вот как мы можем воплотить описанное выше с помощью контейнерных запросов CSS.

CSS

Демо

Поле поиска

Контейнерные запросы CSS для дизайнеров

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

Перечень событий

Контейнерные запросы CSS для дизайнеров

Мне лично нравится этот вариант использования контейнерных запросов. У нас может быть один и тот же компонент в нескольких контекстах. На рисунке выше у нас есть обыкновенные, средние и большие. Вот пример того, как их можно использовать.

Контейнерные запросы CSS для дизайнеров

Снова же, это тот же компонент, который приспосабливается к своей родительской ширине. Разве это не круто? Для меня — да.

Биография создателя

Контейнерные запросы CSS для дизайнеров

Биография создателя — распространенный компонент в блогах. Его можно использовать в разных контекстах, поэтому его следует адаптировать. Набросок выше показывает это.

Кнопки обмена для соц сетях

Контейнерные запросы CSS для дизайнеров

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

Когда компонент употребляется на боковой панели (слева), будет употребляться уменьшенная версия. Когда родительский элемент больше (к примеру, основной раздел), будет использоваться полная версия. Спасибо за чтение

Контейнерные запросы CSS для дизайнеров

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *