20.06.2021

CSS следующего поколения: @container

CSS последующего поколения: @container

От создателя: Chrome экспериментирует со свойством @container в рамках спецификации уровня ограничения 3 рабочей группы CSS, над которой работают Мириам Сюзанн из Oddbird и группа инженеров по веб-платформе. @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера.

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

Вы сможете думать об @container как о медиа-запросе (@media), но заместо того, чтобы полагаться на область просмотра для опции стилей, родительский контейнер элемента, на который вы нацеливаетесь, может настраивать эти стили.

Запросы контейнеров станут самым огромным изменением в веб-стилях со времен CSS3, изменив наше представление о том, что значит «адаптивный дизайн».

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

@container в действии

В этом примере я использую две карточки в родительском элементе со последующей разметкой:

Потом я устанавливаю ограничение (свойство contain) для родительского элемента, для которого я буду запрашивать стили контейнера (.card-container). Я также устанавливаю относительный макет сетки для родительского элемента .card-container; и его inline-size будет изменяться в зависимости от этой сетки. Это то, что я запрашиваю через @container:

CSS

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

CSS

Контейнерные запросы + медиа-запросы

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

Вот еще один пример, демонстрирующий способности использования медиа-запросов для макета макроса (т. е. перехода календаря от однопанельного к многопанельному) и микромакета (т. е. макета / размера даты и смещения полей / размера событий) для сотворения совокупности запросов.

Контейнерные запросы + CSS-сетка

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

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

В таблице товаров макет создается с помощью grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));. Это делает макет, который сообщает карточкам, что они должны занимать доступное дробное место, пока они не достигнут своего размера 230px, а потом переходить к следующей строке.

Потом у нас есть контейнерный запрос, который стилизует карточки, чтоб они принимали вертикальный блочный макет, когда они меньше ширины 350px, и перебегает к горизонтальному встроенному макету путем внедрения display: flex.

CSS

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

Использование

Чтоб использовать @container, вам сначала нужно сделать родительский элемент, у которого есть ограничение . Для этого вам необходимо установить родительский contain: layout inline-size. Вы сможете использовать inline-size, поскольку в настоящее время мы можем использовать контейнерные запросы только к встроенной оси. Это предутверждает разрыв вашего макета в направлении блоков.

Настройка contain: layout inline-size делает новый ограничивающий блок и новый контекст форматирования блока, позволяя браузеру отделить его от остальной части макета. Сейчас мы можем перейти к запросам!

Ограничения

В текущее время нельзя использовать контейнерные запросы на базе высоты, используя только ось блока. Чтоб заставить сетку элементов наследников работать @container, вам необходимо добавить элемент оболочки. Основываясь на этом, добавление оболочки позволяет получить желаемые эффекты.

Попытайтесь его

Вы можете поэкспериментировать со свойством @container уже сейчас, перейдя по адресу: chrome://flags в Chrome Canary и включив флаг #experimental-container-queries.

CSS последующего поколения: @container

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

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

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