CSS следующего поколения: @container
Новое свойство @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера.
Вы можете думать об этом как о медиа-запросе (@media), но вместо того, чтобы полагаться на область просмотра (viewport) для настройки стилей, эти стили теперь могу зависеть от родительский контейнер целевого элемента.
Контейнерные запросы (@container) станут самым большим изменением в веб-стиле со времен CSS3, изменив наше представление о том, что означает «отзывчивый дизайн» (responsive design).
Область просмотра (viewport) и пользовательский агент больше не будут единственными целями, которые нам нужны для создания адаптивного макета и стилей пользовательского интерфейса. С контейнерными запросами элементы смогут нацеливаться на своих родителей и соответствующим образом применять собственные стили. Это означает, что один и тот же элемент, который находится на боковой панели (к примеру), в теле или на базовой панели, может выглядеть совершенно по-разному в зависимости от доступного размера.
@container в действие
В этом примере я использую две карточки в родительском элементе со следующей разметкой:
<div class="card-container">
<div class="card">
<figure> ... </figure>
<div>
<div class="meta">
<h2>...</h2>
<span class="time">...</span>
</div>
<div class="notes">
<p class="desc">...</p>
<div class="links">...</div>
</div>
<button>...</button>
</div>
</div>
</div>
Затем я устанавливаю включение (свойство container-type ) для родителя, у которого я буду запрашивать стили контейнера (.card-container). Я также устанавливаю относительный макет сетки для родителя .card-container, поэтому его inline-size будет меняться в зависимости от этой сетки. Вот что я запрашиваю с помощью @container:
.card-container {
container-type: inline-size;
width: 100%;
}
Теперь я могу использовать контейнерный запрос для настройки стилей! Это очень похоже на то, как вы устанавливаете стили, используя медиа запросы на основе ширины , используя max-width для установки стилей, когда элемент меньше определенного размера, и min-width, когда он больше.
/* when the parent container is smaller than 850px,
remove the .links div and decrease the font size on
the episode time marker */
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
/* when the parent container is smaller than 650px,
decrease the .card element's grid gap to 1rem */
@container (max-width: 650px) {
.card {
gap: 1rem;
}
/* ... */
}
Контейнерные запросы + медиа-запросы
Одной из лучших функций контейнерных запросов является возможность отделять микро макеты от макро макетов. Вы можете стилизовать отдельные элементы с помощью контейнерных запросов, создавая детализированные микро-макеты, а также стилизовать целые макеты страниц с помощью медиа-запросов, макро макетов. Это создает новый уровень контроля, позволяющий создавать еще более отзывчивые интерфейсы.
Вот еще один пример, демонстрирующий возможности использования медиа-запросов для макро макетов (пример календаря, переходящего с одной панели на несколько панелей) и микро-макета (т. е. макета/размера даты и полей события/сдвига размера) для создания прекрасной коллекции запросов.
Контейнерные запросы + CSS Grid
Один из моих любимых способов увидеть влияние контейнерных запросов — это посмотреть, как они работают в grid. Возьмем следующий пример пользовательского интерфейса для торговли растениями:
На этом сайте вообще не используются медиа-запросы. Вместо этого мы используем контейнерные запросы только вместе с CSS grid для отображения компонента карты покупок в разных представлениях.
В сетке товара макет создается с помощью grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));. Это создает макет, который говорит cards занимать доступное дробное пространство, пока они не достигнут размера 230 пикселей, а затем перетекают в следующую строку. Ознакомьтесь с другими трюками с сеткой на 1linelayouts.com.
Затем у нас есть контейнерный запрос, который настраивает карточки так, чтобы они принимали вертикальный блочный макет, когда они имеют ширину менее 350 пикселей, и переходит к горизонтальному встроенному макету, применяя display: flex (который по умолчанию имеет inline flow).
@container (min-width: 350px) {
.product-container {
padding: 0.5rem 0 0;
display: flex;
}
/* ... */
}
Это означает, что каждая карточка имеет собственный адаптивный стиль. Это еще один пример того, как вы можете создать макро-макет с сеткой товаров и микро-макет с карточками товаров. Довольно круто!
Применение
Чтобы использовать @container, сначала необходимо создать родительский элемент, содержащий контейнер. Для этого вам нужно установить в родительском элементе значение contain: layout inline-size. Вы можете использовать inline-size, поскольку в настоящее время мы можем применять контейнерные запросы только к inline. Это предотвратит разрыв вашего макета в блочном направлении.
Настройка contain: layout inline-size создает новый содержащий блок и новый блочный контекст форматирования, позволяя браузеру отделить его от остальной части макета. Теперь мы можем строить запросы!
Ограничения
В настоящее время вы не можете использовать контейнерные запросы на основе высоты, используя только ось блока. Чтобы дочерние элементы сетки работали с @container, вам нужно добавить элемент-оболочку. Несмотря на это, добавление оболочки позволяет получить желаемые эффекты.
Попробуйте
Вы можете поэкспериментировать со свойством @container в Chromium уже сегодня, перейдя по адресу: chrome://flags в Chrome Canary и включив флаг #experimental-container-queries.
