24.09.2021
d56cbcaeb446a12b04b236817c84e31e

Скажите привет контейнерным запросам CSS

Скажите привет контейнерным запросам CSS

От создателя: сегодня я более взволнован новейшей функциональностью CSS, чем когда либо за последние 6 лет, которые я провел в качестве фронтенд-разработчика. Макет контейнерных запросов теперь доступен в Chrome Canary.

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

Проблема с медиа-запросами CSS

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

Нередко отзывчивый веб-дизайн не зависит от области просмотра либо размера экрана. Дело в размере контейнера. Разглядим следующий пример:

Скажите привет контейнерным запросам CSS

У нас очень обычный макет. Имеется два варианта компонентов: вложенный и горизонтальный.

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

CSS

Обратите внимание, что мы сделали класс .c-article—horizontal для обработки горизонтальной версии компонента. Если ширина области просмотра больше 46 rem, компонент должен переключиться на горизонтальное отображение.

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

Учтите, что мы желаем использовать значение по умолчанию .c-card в основном разделе. Что случится? Что ж, компонент расширится до ширины свого родительского и, как следует, будет слишком большой. см. следующий набросок:

Скажите привет контейнерным запросам CSS

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

Скажите привет контейнерным запросам CSS

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

CSS

Как нам посодействуют контейнерные запросы CSS?

Предупреждение: контейнерные запросы CSS пока поддерживаются только в Chrome Canary.

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

Вот как я это для себя представляю.

Скажите привет контейнерным запросам CSS

Пурпуровый контур представляет ширину родительского элемента. Обратите внимание, как при увеличении его размера, компонент приспосабливается к этому. Разве это не круто? В этом сила контейнерных запросов CSS.

Как работают контейнерные запросы

Сейчас мы можем поэкспериментировать с контейнерными запросами Chrome Сanary. Чтоб включить возможность контейнерных запросов, введите в адресной строке chrome://flags и сделайте поиск по запросу «container queries», а потом включите их.

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

Значение inline-size значит реагирование только на изменение ширины родительского элемента. Я пробовал использовать block-size, но он все еще не работает. Пожалуйста, поправьте меня, если я ошибаюсь.

CSS

Это 1-ый шаг. Мы определили элемент .o-grid__item как родительский элемент для .c-article который снутри него. Следующим шагом является добавление стилей, которые мы желаем заставить работать с контейнерными запросами.

CSS

@container является элементом .o-grid__item, а его ширина min-width: 400px. Мы даже можем пойти далее и добавить больше стилей. У нас есть последующие стили:

По умолчанию.

Горизонтальная карточка с малеханькой миниатюрой.

Горизонтальная карточка с большой миниатюрой.

Если родительский объект очень велик, стиль будет указать нам, что это избранная статья.

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

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

Контейнерные запросы и CSS-сетка auto-fit

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

Скажите привет контейнерным запросам CSS

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

Сейчас вы можете спросить, какое отношение это имеет к контейнерным запросам CSS? Что ж, каждый элемент сетки — это контейнер, и когда он расширяется (мы также используем auto-fit), нам необходимо, чтобы компонент изменялся в зависимости от контейнера.

CSS

Когда у нас есть четыре элемента, итог должен выглядеть примерно так.

Скажите привет контейнерным запросам CSS

Ситуация поменяется, когда количество статей станет меньше, вот что произойдет. Чем меньше у нас предметов, тем они станут обширнее. Причина в том, что используется auto-fit. 1-ый выглядит хорошо, но два последних (по 2 в ряду, по 1 в ряду) смотрятся не очень хорошо, так как они очень широкие.

Скажите привет контейнерным запросам CSS

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

Если ширина элемента сетки больше 400 пикселей, статья должна переключиться на горизонтальный стиль. Вот как мы можем это сделать:

CSS

Не считая того, если статья является единственным элементом в сетке:

CSS

Скажите привет контейнерным запросам CSS

Вот и все. У нас есть компонент, который реагирует на ширину собственного родителя, и он может работать в любом контексте. Разве это не круто? Поглядите демонстрацию на CodePen.

Боковая и основная панели

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

Скажите привет контейнерным запросам CSS

Как вы видите на рисунке, у нас есть информационный бюллетень, который существует в 2-ух разных контекстах: боковой раздел и основной раздел.

Без контейнерных запросов это нереально, пока у нас не будет класса вариантов в CSS, например, .newsletter—stacked либо что-то в этом роде.

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

Скрыть определенные элементы.

Сделать кнопку полной ширины.

CSS

Поглядите демонстрацию на CodePen.

Пагинация

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

Скажите привет контейнерным запросам CSS

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

CSS

Поглядите демонстрацию на CodePen.

Карточка профиля

Скажите привет контейнерным запросам CSS

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

CSS

При этом мы можем узреть компоненты в разных контекстах без использования одного медиа-запроса.

Скажите привет контейнерным запросам CSS

Поглядите демонстрацию на CodePen.

Элементы формы

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

Скажите привет контейнерным запросам CSS

CSS

Попытайтесь сами в демонстрации ниже. Посмотрите демонстрацию на CodePen.

Составляющие тестирования

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

Скажите привет контейнерным запросам CSS

CSS

Отладка контейнерных запросов в DevTools

Пока что вы не сможете увидеть что-то вроде @container (min-width: value). Думаю, это вопрос времени, и это будет реализовано.

Заключение

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

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

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

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

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