CSS Container Queries: Responsive Tasarımda Devrim Geliyor

Merhaba,

CSS dünyasında yıllardır beklenen bir özellik nihayet tüm modern tarayıcılarda kullanılabilir hale geldi: Container Queries. Bu özellik responsive tasarım anlayışını köklü biçimde değiştiriyor ve bu yazımda elimden geldiğince açıklamaya çalışacağım.

Media Query ile Container Query Farkı Nedir ?

Önce temelden girelim. Klasik media query, tarayıcı penceresinin (viewport) genişliğine bakarak stil uygular:

/* Viewport 768px altındaysa */
@media (max-width: 768px) {
  .kart { flex-direction: column; }
}

Bu yaklaşımın sorunu şu: Bir bileşenin görünümü kendi boyutuna değil, tüm sayfanın genişliğine bağlı. Aynı kart bileşenini sidebar'da dar, ana içerikte geniş kullanmak istiyorsanız media query ile bunu yönetmek gerçek bir baş ağrısına dönüşüyor.

Container Query ise farklı bir soru soruyor: "Bu bileşenin kapsayıcısı ne kadar geniş?" Yani bileşen nereye yerleştirilirse yerleştirilsin, kendi bağlamına göre stil alabiliyor.

Nasıl Kullanılıyor ?

İki adım var. Önce kapsayıcıyı tanımlıyorsunuz, sonra o kapsayıcıya göre sorgu yazıyorsunuz:

/* 1. Kapsayıcıyı belirle */
.kart-wrapper {
  container-type: inline-size;
  container-name: kart;
}

/* 2. Kapsayıcı genişliğine göre stil yaz */
@container kart (min-width: 400px) {
  .kart {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
}

@container kart (max-width: 399px) {
  .kart {
    display: block;
  }
}

Artık bu kart bileşenini sidebar'a da koyabilirsiniz, ana içeriğe de. Her konumda kendi kapsayıcısının genişliğine göre doğru görünümü otomatik alıyor. Media query'ye gerek yok.

Gerçek Hayat Kullanım Senaryoları

Bu özelliğin en çok işe yarayacağı durumlar:

• Yeniden kullanılabilir bileşenler: Aynı bileşeni farklı genişliklerde farklı layout'larla kullanmak.
• Dashboard uygulamaları: Widget'lar farklı grid hücrelerine yerleştirildiğinde otomatik adapte oluyor.
• CMS tabanlı siteler: İçerik editörü bileşeni nereye koyarsa koysun doğru görünüyor.
• Tasarım sistemi geliştirme: Bileşen kütüphanelerinde çok daha temiz ve bağımsız stiller yazılabiliyor.

Tarayıcı Desteği Durumu

2023 ortası itibarıyla Container Queries şu tarayıcılarda destekleniyor:

• Chrome 105+
• Firefox 110+
• Safari 16+
• Edge 105+

Küresel kullanım oranı %90 üzerinde. Yani production projelerinde artık güvenle kullanabilirsiniz. IE11 desteği gerektiren projeler hâlâ varsa (ki umarım yoktur :) ) o başka bir konu tabii.

CSS'in Geleceği Parlak

Container Queries, son iki yılda CSS'e gelen en büyük yeniliklerden biri. Cascade Layers, :has() selector, nesting desteği vs vs ile birlikte CSS artık JavaScript'e olan bağımlılığı azaltıyor. Ön yüz geliştirme yapan arkadaşlar için bu özelliği öğrenmek gerçekten değer.

İlerleyen yazılarımda CSS nesting ve :has() selector'ı da ele alacağım.

İyi Günler Dilerim,