CSS Container Queries, web geliştiricilere bileşen düzeyinde responsive tasarım yapma imkanı sunarak, medya sorgularının sayfa genelindeki sınırlamalarını ortadan kaldırır. Kendi kapsayıcısının boyutuna göre stiller uygulayabilen bu özellik, modüler ve yeniden kullanılabilir arayüzler oluşturmayı kolaylaştırır. Artık bir bileşenin farklı bağlamlarda nasıl görüneceğini, içinde bulunduğu kabın genişliğine göre belirleyebilirsiniz.
Container Queries Nedir ve Neden Gereklidir?
Media queries, tarayıcının viewport genişliğine göre stiller uygular. Ancak aynı bileşen sayfanın farklı yerlerinde farklı genişliklerde yer alabilir. Örneğin bir kart bileşeni, geniş bir ana içerikte üç kolon, dar bir kenar çubuğunda tek kolon olabilir. Media queries ile bu durumu yönetmek için bileşene özel sınıflar eklemek veya karmaşık hesaplamalar yapmak gerekir. Container queries, kabın boyutuna odaklanarak bu sorunu çözer.
Container queries, bir öğenin stillerini en yakın kapsayıcısının boyutuna göre belirler. Bu sayede bileşenler, yerleştirildikleri her bağlamda kendi responsive davranışlarını sergileyebilir.
Temel Kavramlar ve Kullanım
Container queries kullanmak için üç adım izlenir: bir kapsayıcı tanımlamak, container-type ile türünü belirtmek ve @container kuralı ile sorgu yazmak.
1. Kapsayıcı (Container) Tanımlama
Bir öğeyi kapsayıcı yapmak için container-type özelliğini kullanın. En yaygın değer inline-size yönlü boyutlandırmadır. Ayrıca container-name ile adlandırabilirsiniz.
.card-container {
container-type: inline-size;
container-name: card;
}2. @container Sorgusu Yazma
Kapsayıcının genişliğine göre stiller uygulamak için @container kullanın:
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Bu örnekte, .card-container en az 400 piksel genişliğinde olduğunda kart iki kolonlu bir grid haline gelir.
Pratik Örnek: Esnek Kart Bileşeni
Bir ürün kartı düşünün: mobilde dikey, tablette yatay, masaüstünde ise grid içinde farklı boyutlarda olabilir. Container queries ile bu kartı, içinde bulunduğu kaba göre otomatik şekillendirebiliriz.
- Dar kap ( < 350px ): Tek kolon, resim üstte.
- Orta kap ( 350px - 700px ): Yan yana resim ve metin.
- Geniş kap ( > 700px ): Detaylı bilgi eklenir, geniş düzen.
Kapsayıcıya container-type: inline-size eklenir, ardından @container sorguları ile farklı boyutlarda stiller tanımlanır. Bu yaklaşım, özellikle CSS Grid ile kompleks sayfa düzenleri oluştururken esneklik sağlar.
Container Queries vs Media Queries
| Özellik | Media Queries | Container Queries |
|---|---|---|
| Temel aldığı birim | Viewport genişliği | Kapsayıcı boyutu |
| Kullanım alanı | Sayfa düzeyinde düzen | Bileşen düzeyinde düzen |
| Yeniden kullanılabilirlik | Sınırlı (bağlama bağımlı) | Yüksek (bağımsız) |
| Performans | Genellikle iyi | Kapsayıcı sayısına göre değişir |
Container queries, özellikle Next.js'te App Router ile layout tasarımı gibi modüler yaklaşımlarda daha anlamlı hale gelir. Ancak basit sayfa düzenleri için media queries yeterli olabilir.
Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler
- Kapsayıcı tipini unutmak: @container sorgusu çalışmaz. Her zaman bir kapsayıcı tanımlayın.
- İç içe kapsayıcılar: Bir kapsayıcı başka bir kapsayıcının içindeyse, en yakın kapsayıcı baz alınır. Beklenmeyen sonuçlar alabilirsiniz.
- Boyut hesaplamaları: Container queries yalnızca inline-size (genişlik) için çalışır. Yükseklik için block-size değeri deneyseldir.
- Tarayıcı desteği: Modern tarayıcılarda desteklense de eski tarayıcılar için yedek stiller ekleyin. Örneğin debounce gibi performans iyileştirmeleri ile birlikte kullanmak faydalıdır.
İleri Düzey Teknikler
Adlandırılmış Kapsayıcılar
Birden fazla kapsayıcınız varsa, container-name ile ayırt edebilirsiniz:
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
.main-content {
container-type: inline-size;
container-name: main;
}
@container sidebar (max-width: 300px) { ... }
@container main (min-width: 800px) { ... }@container Style Sorguları
Gelecekte, kapsayıcının stil özelliklerine (ör. renk) göre sorgu yapmak da mümkün olacak. Şu anda yalnızca boyut sorguları tam desteklidir.
Gerçek Hayattan Kullanım Senaryoları
- Dashboard widget'ları: Her widget kendi kabının boyutuna göre düzenlenir.
- E-ticaret ürün listeleri: Ürün kartları, bulundukları kolon sayısına göre otomatik şekillenir.
- İçerik blokları: Bir metin bloğu, genişlik arttıkça yanına resim alabilir.
Container queries, CSS Grid ve modern CSS araçlarıyla birleştiğinde, responsive tasarımda yeni bir seviye sunar. Özellikle bileşen tabanlı framework'lerle (React, Next.js) kullanıldığında, gerçek anlamda bağımsız ve taşınabilir arayüzler oluşturmanızı sağlar.
Sık Sorulan Sorular
CSS Container Queries hangi tarayıcılarda destekleniyor?
Chrome, Edge, Firefox ve Safari'nin güncel sürümlerinde tam destek mevcuttur. Eski tarayıcılar için yedek stiller sağlamak önemlidir.
Container queries ile media queries arasındaki temel fark nedir?
Media queries viewport genişliğine göre çalışırken, container queries bir öğenin kapsayıcısının boyutuna göre çalışır. Bu, bileşenlerin bulundukları bağlamdan bağımsız olarak responsive olmasını sağlar.
Container queries için container-type hangi değerler alabilir?
size, inline-size ve block-size değerlerini alabilir. inline-size en yaygın kullanılanıdır ve yalnızca genişlik sorguları için uygundur.
İç içe container queries kullanabilir miyim?
Evet, ancak her bir kapsayıcı için ayrı container-name belirtmezseniz en yakın kapsayıcı baz alınır. Bu istenmeyen sonuçlara yol açabilir, dikkatli planlama gerektirir.
Container queries performansı nasıl etkiler?
Genellikle iyi performans gösterir, ancak çok sayıda kapsayıcı ve sorgu varsa hesaplama maliyeti artabilir. Debounce gibi tekniklerle optimize edilebilir.
