Container Query Nedir?
Kısa tanım
Container query, bir öğenin stilini tarayıcı penceresinin değil, içinde bulunduğu kapsayıcı öğenin boyutuna (ya da bazı durumlarda stiline) göre değiştiren CSS özelliğidir. Önce bir üst öğe container-type ile sorgulanabilir kapsayıcı yapılır, ardından @container kuralıyla koşullar yazılır. Böylece aynı bileşen dar bir kenar çubuğunda ve geniş bir içerik alanında kendi alanına uygun düzeni alır.
Diğer adları: @container, kapsayıcı sorgusu, konteyner sorgusu, CSS container queries
Viewport'a bakmak neden yetmiyor?
Bir ürün kartı düşünün. Ana sayfada üç sütunlu bir ızgarada, kategori sayfasında tek başına geniş bir alanda, ürün detayında ise dar bir kenar çubuğunda kullanılıyor. Klasik media query yalnızca pencere genişliğini bildiği için, 1400 piksellik bir ekranda kartın kenar çubuğunda 280 piksele sıkıştığını anlayamaz. Ekipler bu yüzden yıllarca .kart--dar, .kart--genis gibi bağlama özel sınıflar üretti.
Container query bu bilgiyi doğrudan bileşene verir: kart, kendisini saran kapsayıcının ne kadar yer ayırdığına bakar ve düzenini ona göre seçer. Bileşen nereye konursa konsun aynı kurallar çalışır; bu da UI bileşenlerini gerçekten taşınabilir hâle getirir.
@container ile bir kart örneği
.kart-alani {
container-type: inline-size;
container-name: kart;
}
.kart { display: grid; gap: 0.75rem; }
@container kart (width >= 32rem) {
.kart {
grid-template-columns: 12rem 1fr;
}
.kart h3 {
font-size: clamp(1.1rem, 0.9rem + 2cqi, 1.6rem);
}
}Burada sorgulanan öğe .kart-alani, stil verilen öğe ise onun içindeki .kart'tır. Bu ayrım önemlidir: bir öğe kendi boyutunu sorgulayamaz, koşul her zaman en yakın uygun ata kapsayıcıya göre değerlendirilir. İsim verilmezse tarayıcı en yakın kapsayıcıyı kullanır; isim vermek, iç içe kapsayıcılarda hangisinin kastedildiğini netleştirir.
container-type değerleri ve yan etkileri
inline-size: Yalnızca satır yönündeki genişlik sorgulanır. Pratikte en çok kullanılan değerdir.size: Hem genişlik hem yükseklik sorgulanabilir. Ancak öğeye iki eksende boyut sınırlaması (containment) uygulanır; içeriği yüksekliği belirlemez. Açık bir yükseklik verilmezse kapsayıcı beklenmedik biçimde çökebilir.normal: Varsayılan değer. Öğe boyut kapsayıcısı olmaz ama stil sorgularında yine kullanılabilir.
Boyut sınırlaması, kapsayıcının genişliğini içeriğinden almasını engeller. Bu yüzden inline-size verilen bir öğenin genişliği ebeveyn düzeninden (ızgara, flex ya da blok akışı) gelmelidir.
Kapsayıcıya göre ölçü birimleri
| Birim | Karşılığı |
|---|---|
cqw / cqh | Kapsayıcı genişliğinin / yüksekliğinin %1'i |
cqi / cqb | Kapsayıcının satır / blok yönündeki boyutunun %1'i |
cqmin / cqmax | cqi ile cqb arasındaki küçük / büyük değer |
Uygun bir kapsayıcı bulunamazsa bu birimler küçük viewport birimlerine (svw, svh) geri düşer. Yazı tipi boyutunu clamp() ile sınırlamak, metnin çok dar ya da çok geniş alanlarda okunmaz hâle gelmesini önler.
Tarayıcı desteği: boyut, stil ve kaydırma sorguları
Boyut sorguları MDN'in Baseline sınıflandırmasında "yaygın olarak kullanılabilir" durumdadır; Şubat 2023'ten beri tüm büyük tarayıcılarda çalışır. Aynı @container kuralının iki yeni kolu daha var: style() ile kapsayıcının hesaplanmış stiline (şu an pratikte özel CSS değişkenlerine) bakan stil sorguları ve bir öğenin yapışık (sticky) ya da kaydırılmış olmasına tepki veren scroll-state() sorguları. Bu ikisinin desteği tarayıcıdan tarayıcıya değişiyor; kullanmadan önce MDN uyumluluk tablosuna bakmak ve sorgu çalışmadığında da kabul edilebilir görünen bir varsayılan stil yazmak gerekir.
Media query'nin yerini almaz, onu tamamlar
Sayfanın genel iskeleti (kaç sütun olacağı, menünün hamburgere dönüşüp dönüşmeyeceği) hâlâ pencereye bağlı bir karardır ve breakpoint'lerle media query üzerinden yönetilir. Kullanıcının hareket azaltma veya karanlık tema tercihi gibi bilgiler de yalnızca media query ile okunur. Container query ise bileşen seviyesindeki uyumu üstlenir. İyi kurulmuş bir tasarım sisteminde sayfa düzeni media query'lerle, bileşen içi düzen container query'lerle yazılır; böylece responsive tasarım kararları iki katmana temizce ayrılır.