CSS Container Queries, web geliştirmede medya sorgularına güçlü bir alternatif sunar. Geleneksel medya sorguları sayfanın tamamının genişliğine göre stiller uygularken, container queries bir bileşenin kendi kapsayıcısının boyutuna tepki verir. Bu sayede aynı bileşen, farklı bağlamlarda yeniden boyutlandırıldığında kendi içinde uyum sağlar. Özellikle modüler ve mikro frontend mimarileriyle çalışan ekipler için container queries, tutarlı ve bakımı kolay bir yöntemdir.
Container Queries Nedir ve Neden Kullanmalıyız?
Container queries, bir kapsayıcı elemanın boyutuna göre alt öğelerin stillerini değiştirmeye olanak tanır. Medya sorgularından farkı, yalnızca viewport'a değil, belirlenen bir kapsayıcının genişliği veya yüksekliğine bağlı olmasıdır. Bu, özellikle aynı bileşenin farklı yerleşimlerde kullanıldığı modern web uygulamalarında büyük esneklik sağlar.
Örneğin bir ürün kartı bileşeni düşünün. Ana sayfada geniş bir kolonda, yan panelde ise dar bir alanda görüntülenebilir. Medya sorgularıyla tasarım, viewport kırılma noktalarına bağımlı kalır. Container queries ile kart bileşeni, içinde bulunduğu kapsayıcıya göre otomatik olarak uyum sağlar. Bu, yeniden kullanılabilirliği artırır ve geliştirme süresini kısaltır.
Container Queries vs Medya Sorguları: Temel Farklar
- Kapsam: Medya sorguları viewport'a, container queries ise belirlenen bir kapsayıcıya bağlıdır.
- Kullanılabilirlik: Container queries, bileşen düzeyinde modülerlik sağlarken medya sorguları genel sayfa düzeni için idealdir.
- Performans: Container queries, gereksiz yeniden hesaplamaları önleyebilir ancak tarayıcı desteği henüz tam değildir.
"Container queries, mikro frontend ve bileşen odaklı geliştirmede devrim yaratıyor. Bileşenler artık çevrelerine uyum sağlayarak gerçekten taşınabilir hale geliyor."
Temel Container Queries Kullanımı
Bir kapsayıcıda container queries kullanabilmek için öncelikle kapsayıcıya container-type özelliği atanır. Ardından @container kuralı ile sorgu yazılır. Aşağıdaki örnek, bir kapsayıcı genişliği 400 pikselden küçük olduğunda metin boyutunu değiştirir:
.card-container {
container-type: inline-size;
}
@container (max-width: 400px) {
.card-title {
font-size: 1.2rem;
}
}
container-type değeri inline-size (yalnızca genişlik) veya size (genişlik ve yükseklik) olabilir. Pratikte çoğu durumda yalnızca genişlik yeterlidir, çünkü yükseklik genellikle içerik tarafından belirlenir.
Kapsayıcı Belirleme ve İsimlendirme
Bir kapsayıcıya container-name ile isim vererek birden fazla kapsayıcıyı ayırt edebilirsiniz. Bu, özellikle iç içe geçmiş container durumlarında faydalıdır:
.main {
container-name: layout;
container-type: inline-size;
}
@container layout (max-width: 600px) {
/* stiller */
}
İsimlendirme sayesinde hangi kapsayıcının sorgulanacağı netleşir ve çakışmalar önlenir.
Gelişmiş Container Queries Teknikleri
Container queries, yalnızca basit boyut sorguları için değil, stiller arası geçişler ve animasyonlar için de kullanılabilir. Aşağıdaki tabloda farklı container query türleri ve kullanım alanları özetlenmiştir:
| Sorgu Türü | Açıklama | Örnek Kullanım |
|---|---|---|
max-width | Kapsayıcı genişliği belirtilen değerden küçükse | Dar alanlarda dikey düzen |
min-width | Kapsayıcı genişliği belirtilen değerden büyükse | Geniş alanlarda yatay düzen |
height | Kapsayıcı yüksekliğine göre (daha az yaygın) | Scroll container'lar |
style (CSS tabanlı) | JavaScript olmadan stil özelliklerine göre (henüz deneysel) | Tema değişimleri |
Container Queries ile Performans İpuçları
Container queries, tarayıcı tarafından optimize edilmesine rağmen aşırı kullanımı performansı etkileyebilir. Özellikle büyük DOM ağaçlarında her container query yeniden hesaplaması maliyetlidir. İşte dikkat edilmesi gerekenler:
- Sadece ihtiyaç duyulan kapsayıcılarda
container-typekullanın; her elemana eklemeyin. - Mümkünse
inline-sizetercih edin, çünküsizehem genişlik hem yükseklik değişimlerini takip eder ve daha fazla kaynak tüketir. - Container queries içinde karmaşık hesaplamalar yapmaktan kaçının; basit stillerle sınırlı kalın.
- Yaygın tarayıcı desteğini kontrol edin. Container queries, Chrome 105+ ve Safari 16.2+ gibi modern tarayıcılarda çalışır. Daha eski tarayıcılar için polyfill veya medya sorguları yedeği planlayın.
Modern web geliştirme araçları, container queries'i destekler. Örneğin Webpack vs Vite karşılaştırmasında, Vite'nin hızlı derleme süreci container query içeren projelerde avantaj sağlar. Benzer şekilde, React 19 Server Components ile istemci tarafında container query kullanımı, sunucuda render edilen bileşenlerde farklılık gösterebilir.
Sık Yapılan Hatalar ve Çözümleri
Container queries'i yeni kullanan geliştiricilerin karşılaştığı yaygın sorunlar şunlardır:
- Kapsayıcı belirlenmemiş:
@containerkuralı geçerli olmaz. Çözüm: Gerekli kapsayıcıyacontainer-typeekleyin. - Yanlış kapsayıcı ismi: İsimlendirme yapıldıysa sorguda aynı ismi kullanmamak. Çözüm: İsimleri kontrol edin.
- Kapsayıcı içeriğinin taşması: Container queries sabit genişlik yerine esnek değerlerle çalışır; bazen içerik taşabilir. Çözüm:
overflow: autoveya taşmayı yönetin. - Tarayıcı uyumsuzluğu: Kullanıcıların %10'u halen eski tarayıcı kullanıyor olabilir. Çözüm: Medya sorguları ile yedekleme yapın veya bir polyfill ekleyin.
Gelecek Perspektifi: Container Queries ile Responsive Tasarımın Evrimi
Container queries, CSS'in geleceğinde önemli bir yer tutuyor. Şu anda W3C aday tavsiyesi aşamasında olan bu özellik, özellikle içerik yönetim sistemleri ve bileşen kütüphaneleri için vazgeçilmez hale gelecek. Micro Frontends ile Modüler Web Uygulamaları gibi yaklaşımlar, container queries ile daha da güçleniyor. Ayrıca, Web Font Performansı yazısında da değinildiği gibi, container queries ile font boyutlandırma daha tutarlı hale gelebilir.
Özetle: CSS Container Queries, bileşen bazlı responsive tasarım için güçlü bir araçtır. Doğru kullanıldığında kod tekrarını azaltır, bakımı kolaylaştırır ve kullanıcı deneyimini iyileştirir. Projenizde container queries'i denemek için modern bir tarayıcı kullanın ve küçük bir bileşenle başlayın. Unutmayın, her yeni teknoloji gibi öğrenme eğrisi vardır ancak getirdiği esneklik yatırıma değer.
Sık Sorulan Sorular
CSS Container Queries hangi tarayıcılarda çalışır?
Container queries, Chrome 105+, Safari 16.2+ ve Firefox 112+ gibi modern tarayıcılarda desteklenir. Eski tarayıcılar için polyfill veya medya sorguları yedeği kullanılmalıdır.
Container queries ile medya sorguları arasındaki temel fark nedir?
Medya sorguları viewport boyutuna göre stiller uygularken, container queries belirlenen bir kapsayıcı elemanın boyutuna göre şekillenir. Bu sayede bileşenler bulundukları bağlamdan bağımsız olarak uyum sağlar.
Container queries performansı nasıl etkiler?
Container queries, tarayıcı tarafından optimize edilir ancak aşırı kullanımı DOM yeniden hesaplamalarına yol açabilir. Sadece gerekli kapsayıcılarda kullanmak ve inline-size tercih etmek performansı iyileştirir.
container-type: inline-size ile size arasındaki fark nedir?
inline-size yalnızca kapsayıcının genişliğini izlerken, size hem genişlik hem de yükseklik değişimlerini takip eder. Çoğu durumda inline-size yeterlidir ve daha az kaynak tüketir.
Container queries'de kapsayıcı isimlendirme neden önemlidir?
İsimlendirme, iç içe geçmiş kapsayıcılarda hangi kapsayıcının sorgulanacağını netleştirir. Aynı isimde birden fazla kapsayıcı varsa çakışmaları önler.
