Генератор CSS Container Query
Создайте правило @container CSS — query размера, inline-size или стиля — из именованного контейнера, условия breakpoint или custom-property и применяемых стилей. Включает живой предпросмотр с возможностью изменения размера перетаскиванием.
Ввод
Нацеливает этот контейнер конкретно через @container <name> (...). Оставьте пустым для анонимного контейнера, который соответствует ближайшему ancestor с установленным container-type.
Обёрнуто в селектор .card внутри правила @container — это то, что изменяется в предпросмотре.
Вывод
Result will appear here.
Реальная разметка в изолированном Shadow DOM — перетащите ручку изменения размера (size/inline-size) или используйте переключатель (style) для срабатывания условия.
Структура .container / .card, на которую нацелен CSS выше, плюс affordance изменения размера/переключения предпросмотра.
То, что питает живой предпросмотр выше — CSS выше, плюс базовый вид демонстрационной карточки и (для режима style-query) подключение checkbox.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-container-query-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"containerName": "sidebar",
"containerType": "inline-size",
"conditionType": "min-width",
"minWidthPx": "400",
"maxWidthPx": "700",
"styleProperty": "--theme",
"styleValue": "dark",
"declarations": "display: flex;\n flex-direction: row;\n gap: 1re…"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-container-query-generator` tool (CSS Container Query Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-container-query-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS Container Query — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что он делает
Генератор CSS Container Query создаёт готовое к вставке правило @container — CSS, позволяющий компоненту переформатировать себя на основе размера (или custom property) своего собственного контейнера, а не viewport браузера. Выберите тип контейнера, установите breakpoint или условие custom-property и введите стили, которые должны быть применены при совпадении. Живой предпросмотр обновляется при каждом изменении любой опции: перетащите ручку изменения размера примера контейнера для query size/inline-size или переключите checkbox для query style.
Что такое container query
Media query видит только viewport. Container query позволяет элементу реагировать на размер своего ближайшего контекста содержания — так что один и тот же компонент карточки может быть расположен одним способом в широкой боковой панели и другим способом, когда он сжат в узкий столбец, независимо от общего размера экрана:
.container {
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}container-type включает элемент в containment (inline-size только для ширины, size для ширины и высоты); container-name опционален и позволяет нацелить этот конкретный контейнер по имени вместо ближайшего ancestor с установленным container-type.
Три типа контейнеров
- Inline-size — наиболее распространённый выбор. Устанавливает содержание только на встроенной оси (ширина в горизонтальном режиме письма), так что условия
min-width/max-widthмогут к нему обращаться. - Size — содержание на обеих осях, так что условия на основе высоты также становятся возможными. Требует, чтобы контейнер имел явно определённую или ограниченную высоту; контейнер с автоматической высотой не может быть содержащим размер.
- Style — запрашивает значение custom property вместо измерения, через
style(--prop: value). Не требуетcontainer-type: sizeилиinline-size— любой контейнер устанавливает контекст style-query. Полезно для компонента, который должен переформатироваться на основе переменной темы или состояния, установленной выше в дереве.
Как использовать
- Опционально назовите контейнер — оставьте пустым для анонимного контейнера, который соответствует ближайшему ancestor с установленным содержанием.
- Выберите Тип контейнера.
- Для Inline-size/Size выберите условие (min-width, max-width или диапазон min+max) и установите breakpoint(s) в пикселях. Для Style установите имя custom property и значение, которому оно должно соответствовать.
- Введите стили, которые применяются при совпадении условия — они обёрнуты в селектор
.cardвнутри блока@container, соответствующего предпросмотру. Нужна помощь в построении самих правил flex или grid? Попробуйте Генератор CSS Flexbox или Генератор CSS Grid и вставьте результат сюда. - Скопируйте CSS, плюс демонстрационную разметку, если вы хотите повторно использовать структуру предпросмотра, и отрегулируйте селектор
.cardв соответствии с вашим собственным компонентом.
FAQ
Почему моему правилу @container нужен селектор, в отличие от @media?
Media query работает только с viewport, поэтому его тело может содержать обычные объявления. Container query работает с размером самого элемента — и этот элемент может не содержать свойства, которые вы переключаете — поэтому браузер нуждается в селекторе внутри блока, чтобы знать, что переформатировать.
Почему size содержание не работает на моём элементе?
container-type: size требует, чтобы элемент имел определённую высоту (или aspect-ratio). Без неё браузер не может установить размер содержания и query никогда не совпадёт — переключитесь на inline-size, если высота не зафиксирована.
Могу ли я объединить условие размера и условие стиля?
Не в одном правиле @container — выберите то, на что условие этого инструмента нацелено, затем вручную вложите второй блок @container, если вам нужны оба.
Сохраняет ли этот инструмент что-либо или загружает? Нет. Всё, включая живой предпросмотр, работает локально в вашем браузере — ничто из того, что вы вводите, никогда не покидает ваше устройство.
Что если мне нужен breakpoint на основе viewport? Используйте Генератор CSS Media Query — та же идея, но привязанная к viewport браузера вместо контейнера элемента.