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

• Визуальный конструктор запросов к контейнерам: визуально создавайте запросы к контейнерам CSS с помощью нашего интерактивного конструктора запросов к контейнерам. Установите тип контейнера (встроенный размер, размер или обычный), добавьте условия запроса с помощью пользовательских операторов и единиц измерения, а также определите адаптивные стили — и все это без написания вручную ни одной строки CSS.
• Частный — загрузка на сервер не требуется: построитель запросов к контейнеру полностью работает в вашем браузере. Конфигурации контейнера, условия запроса и адаптивные стили никогда не покидают ваше устройство. Вся генерация CSS выполняется на 100% на стороне клиента без загрузки данных.
• Предварительный просмотр в реальном времени с элементами управления изменением размера. Посмотрите, как именно ведет себя ваш контейнерный запрос, с помощью панели предварительного просмотра с изменяемым размером в реальном времени. Используйте кнопки предустановленной ширины (от 320 до 1024 пикселей) или интерактивный ползунок, чтобы протестировать запрос при любой ширине контейнера. Предварительный просмотр мгновенно обновляется, чтобы показать, применим ли запрос.
• Готовый к использованию вывод CSS: скопируйте сгенерированное правило @container, объявление контейнера или строку условия запроса одним щелчком мыши. Построитель запросов к контейнерам создает готовый к использованию CSS с правильным экранированием имен контейнеров и правильно отформатированным синтаксисом медиазапросов.

• Отзывчивость компонентов React. Разработчики React используют построитель запросов к контейнеру для создания по-настоящему отзывчивых компонентов, которые адаптируются к родительскому контейнеру, а не к области просмотра. Создавайте компоненты карточек, боковой панели и информационной панели, которые реорганизуют свой макет в зависимости от доступной ширины контейнера, что важно для библиотек многократного использования компонентов, где один и тот же компонент отображается в контейнерах разной ширины.
• Современные адаптивные макеты. Веб-дизайнеры используют построитель запросов контейнеров для создания макетов, которые реагируют на содержащий их элемент, а не на область просмотра. Это особенно полезно для сеток информационной панели, областей виджетов и вложенных макетов, где элементы появляются в нескольких контекстах разных размеров — запросы контейнеров адаптируются естественным образом без дублирования медиа-запросов.
• Адаптивные системы виджетов и панелей: создавайте системы виджетов и боковые панели, которые адаптируют свой внутренний макет по мере изменения их размера пользователем. Конструктор контейнерных запросов помогает создавать адаптивные виджеты боковой панели, панели чата и ящики настроек, которые реорганизуют контент — переключаясь со стопочного макета на параллельный в зависимости от ширины контейнера, а не ширины экрана.
• Содержимое CMS и Page Builder. Редакторы контента, использующие WordPress, Drupal или конструкторы страниц, такие как Elementor, могут использовать построитель запросов контейнеров для создания блоков контента, которые реагируют на ширину их столбцов. Макет с двумя столбцами на настольном компьютере превращается в один столбец на мобильном устройстве, но один и тот же блок контента адаптируется по-разному в зависимости от того, находится ли он на полной ширине или на боковой панели.
• Адаптивность компонентов системы проектирования. Архитекторы систем проектирования используют построитель запросов к контейнерам для определения адаптивных вариантов компонентов системы проектирования — карточек, таблиц, панелей навигации и макетов форм, которые адаптируются на основе родительского контейнера. Контейнерные запросы устраняют необходимость в хрупких и быстро реагирующих реквизитах и ​​позволяют использовать по-настоящему автономные компоненты.
• Сетки карточек товаров электронной коммерции. Разработчики электронной коммерции используют построитель запросов к контейнерам для создания карточек товаров, которые плавно переходят между представлениями сетки и списка при изменении ширины контейнера. Изображения продуктов, названия, цены и кнопки добавления в корзину автоматически реорганизуются, когда пользователь регулирует количество столбцов в сетке продуктов.

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

1. Определите контейнер: задайте имя контейнера и тип контейнера. Наиболее распространенным типом является inline-size, который превращает элемент в контейнер запроса, реагирующий на изменения ширины. Используйте размер, если вам нужно запросить как ширину, так и высоту. Используйте обычный для включения без функции запроса.
2. Добавьте условия запроса. Добавьте одно или несколько условий, используя такие свойства, как ширина, высота, встроенный размер или соотношение сторон с префиксами min- или max-. Несколько условий объединяются с помощью и . Построитель контейнерных запросов поддерживает стандартные единицы CSS (px, em, rem), а также единицы контейнерных запросов (cqw, cqi, cqh).
3. Определите адаптивные стили и предварительный просмотр: добавьте объявления CSS, которые должны применяться при совпадении запроса. Используйте наборы стилей («Компактная карта», «Расширенная карта» и т. д.) в качестве отправной точки или введите собственные пары «свойство-значение». Измените размер предварительного просмотра в реальном времени, чтобы точно увидеть, когда выполняются условия вашего запроса.

• Область действия: Медиа-запросы реагируют на размер области просмотра — ширину окна браузера. Запросы контейнера реагируют на размер определенного родительского элемента. Это делает контейнерные запросы идеальными для повторно используемых компонентов, которые появляются в разных контекстах.
• Возможность повторного использования. Компонент с запросами контейнера работает правильно независимо от того, отображается ли он на узкой боковой панели (300 пикселей), в основной области контента (800 пикселей) или в главном разделе полной ширины (1200 пикселей). Медиа-запросы потребуют, чтобы компонент знал контекст своего окна просмотра.
• Поддержка браузера: запросы CSS-контейнера поддерживаются в Chrome 105+, Firefox 110+, Safari 16+ и Edge 105+. Теперь они стабильны и готовы к использованию во всех современных браузерах. Используйте построитель запросов контейнеров для создания стилей прогрессивного улучшения.
• Производительность. Контейнерные запросы могут быть более производительными, чем медиа-запросы, для реагирования на уровне компонентов, поскольку они охватывают перерасчеты стилей поддеревом контейнера, а не всего документа.

Запросы CSS-контейнеров вводят новые относительные единицы измерения, которые рассчитываются на основе размеров контейнера: cqw (1% ширины контейнера), cqi (1% строкового размера контейнера), cqh (1% высоты контейнера), cqb (1% размера блока контейнера), cqmin (меньшее из cqi и cqb) и cqmax (большее из cqi и cqb). Эти единицы особенно полезны для плавной типографики и интервалов, которые масштабируются вместе с контейнером, а не с окном просмотра. Например, размер шрифта: зажим(0,875rem, 2cqi, 1,5rem) плавно масштабирует размер шрифта между 0,875rem и 1,5rem по мере увеличения встроенного размера контейнера примерно с 44 пикселей до 75 пикселей.