✨ Контейнерные запросы — адаптивность нового уровня

Обычно мы пишем:

@media (min-width: 600px) {
  .card { flex-direction: row; }
}

Но что, если карточка живёт в разных местах — и в сайдбаре, и в сетке?
Глобальный @media ломает вёрстку.

💡 Решение — @container

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Теперь адаптация зависит от ширины контейнера, а не всего экрана. Каждый блок подстраивается под своё окружение — без медиазапросного ада.

⚙️ Работает в Chrome 105+, Safari 16+, Firefox 109+

🐸 Библиотека фронтендера

#readme #css

🏓 Table tenniCSS

Мини-анимация, созданная только с помощью HTML и SCSS, без единой строки JS.

Отличный пример того, насколько мощными могут быть CSS-анимации.

🔗 Попробуйте запустить демо на CodePen

🐸 Библиотека фронтендера

#readme #css