CSS container queries nedir? Media query'den farkı nedir?

Container query'ler bir elemanı viewport'un değil, içinde bulunduğu kapsayıcının boyutuna göre stillendirmeyi sağlar. Böylece aynı kart bileşeni geniş ana içerikte yatay, dar sidebar'da dikey görünebilir; bileşen gerçekten yeniden kullanılabilir olur. 2023'ten beri tüm modern tarayıcılarda desteklenir.

.card-wrapper {
  container-type: inline-size;  /* genişliğe göre sorgulanabilir */
  container-name: card;
}

.card { display: grid; gap: 1rem; }

@container card (min-width: 400px) {
  .card { grid-template-columns: 150px 1fr; }
}

/* Kapsayıcıya göre birimler: cqi = kapsayıcı inline genişliğinin %1'i */
.card h2 { font-size: clamp(1rem, 4cqi, 1.5rem); }

Dikkat edilecekler

• container-type: inline-size olan eleman, içeriğinden genişlik alamaz (size containment); genelde zaten genişliği parent'tan gelen bir wrapper'a uygulanır.
• Eleman kendisini sorgulayamaz; sorgu her zaman bir ata kapsayıcıya yapılır.
• Style query'ler (@container style(--theme: dark)) custom property değerine göre stil verir; destek henüz daha sınırlıdır.
• Media query'ler hâlâ sayfa genel layout'u, prefers-color-scheme, prefers-reduced-motion gibi kullanıcı tercihleri için gereklidir.