Container Query'ler artık gerçek: ne zaman, nasıl kullanmalı?

Container query'ler uzun yıllar 'bir gün gelecek' olarak işaretlendi. Artık tüm modern tarayıcılarda destekleniyor ve gerçek projelerde kullanılabiliyor.

Media query vs container query

Media query viewport'a, container query ise bileşenin ebeveynine bakar. Bu fark, yeniden kullanılabilir bileşenler yazarken devrim niteliğinde.

.card-container { container-type: inline-size; }

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

Ne zaman kullanmamalısınız?

Tam sayfa düzeni için hala media query daha uygun. Container query, bileşen düzeyinde esneklik istediğinizde parlıyor.

Bileşen odaklı tasarım, bileşen odaklı sorguları hak eder. Container query'ler bunun son adımı.