Правила @container и контрольные точки
Пишите правила @container, применяющие стили, когда контейнер достигает определённых размеров.
«Правила @container и контрольные точки» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Синтаксис правила @container
@container — это правило at-rule, применяющее стили, когда контейнер соответствует определённым условиям размера. Его синтаксис похож на синтаксис медиазапросов:
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
Запросы именованного контейнера
Обращение к определённому именованному контейнеру:
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
Запросы контейнера по максимальной ширине
Используйте max-width, чтобы применять стили к контейнерам меньшего размера:
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
Диапазонные контейнерные запросы
Современный синтаксис контейнерных запросов поддерживает диапазоны:
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
Адаптивный компонент карточки
Компонент карточки, адаптирующийся к ширине своего контейнера:
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
Вложенные контейнерные запросы
Контейнерные запросы можно вкладывать. Внутренний запрос по умолчанию обращается к ближайшему предку-контейнеру.
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
Точки перехода контейнерных запросов
В отличие от точек перехода области просмотра, контейнерные точки перехода следует выбирать исходя из того, когда необходимо изменить макет компонента, а не из произвольных размеров устройств. Начните с минимальной и максимальной ширины содержимого компонента.
Типографика в контейнерах
Настройте типографику для небольших контейнеров:
<div class="wrapper">
<h3 class="card-title">Adaptive Heading</h3>
<p class="card-text">Body copy that hides on very narrow containers.</p>
</div>
Контейнерный запрос для макета сетки
Изменяйте внутреннюю сетку компонента в точках перехода контейнера:
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
Запросы стилей (не только размер)
Контейнерные запросы также поддерживают запросы стилей, которые проверяют вычисленные значения пользовательских свойств. Это позволяет создавать варианты компонентов на основе переменных CSS без дополнительных классов:
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
Быстрая проверка
На что нацелен @container (min-width: 500px)?
Повторение
Правила @container применяют стили к элементам внутри контейнера, когда контейнер соответствует условиям размера. Используйте именованные контейнеры, чтобы обращаться к определённым предкам. Точки перехода контейнера должны основываться на потребностях содержимого, а не на размерах устройств. Запросы стилей расширяют контейнерные запросы, позволяя проверять значения переменных CSS и создавать мощные декларативные варианты компонентов.
Часто задаваемые вопросы
Урок «Правила @container и контрольные точки» бесплатный?
Да — полный текст урока «Правила @container и контрольные точки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Правила @container и контрольные точки»?
Пишите правила @container, применяющие стили, когда контейнер достигает определённых размеров. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Правила @container и контрольные точки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- container-type и container-name
- Правила @container и контрольные точки
- Единицы контейнерных запросов: cqw и cqh
- Контейнерные запросы и медиазапросы