S

SEO | AI | GEO

IT и технологии · 31 августа 2026 г.

Открыть канал в MAX

🎯 CSS Container Queries — адаптивность на уровне компонентов

🎯 CSS Container Queries — адаптивность на уровне компонентов В отличие от привычных @media (ориентированных на весь viewport), Container Queries позволяют подстраивать стили под размер родительского контейнера. 🧩 Это значит, что один и тот же компонент (карточка, виджет, секция) корректно отображается и в узкой боковой панели, и в широком основном контенте — без лишних костылей. Как это работает? Достаточно задать родителю container-type: inline-size и опционально container-name для точной адресации. Затем внутри компонента пишется @container (max-width: 400px) { ... } — стили применяются, когда самому контейнеру тесно, независимо от размеров экрана. 🔧 Для SEO это особенно ценно: Container Queries сокращают потребность в ResizeObserver и JS-обвязке, снижая риск Cumulative Layout Shift (CLS) — одного из ключевых факторов Core Web Vitals. 📉 🔥 Практический совет: Начните с одного переиспользуемого компонента (например, карточки товара). Оберните его в style="container-type: inline-size" и замените вложенные @media на @container. Базовая поддержка — baseline с 2023 года, можно внедрять уже сегодня. #CSS #ContainerQueries #Адаптивность #CoreWebVitals #ВебРазработка