Что такое container queries?

Middle
146 просмотров
AFK Offer AI

Container queries позволяют стилизовать элемент в зависимости от размера его контейнера, а не viewport. Контейнер объявляется через container-type: inline-size, стили — через @container (min-width: 400px). Это решает давнюю проблему: компонент в сайдбаре и в main имеет разную ширину, но media query одинаковая. С container queries кард перестраивается под доступное пространство. Поддержка в современных браузерах уже полная — можно использовать в продакшене.

Следующий вопрос

Как тестировать производительность на фронтенде?