Tepki Ver
CSS Container Queries, arayüz bileşenlerinin ekranın tamamına değil, bulundukları kapsayıcının boyutlarına göre uyarlanmasını sağlar. Bu rehberde Container Queries ile Media Queries arasındaki farklar, container-type ve @container kullanımı, responsive kart tasarımı, isimlendirilmiş kapsayıcılar ve container ölçü birimleri açıklanıyor. Ayrıca tarayıcı uyumluluğu, alternatif CSS yöntemleri ve uygulamada karşılaşılan yaygın hatalar ele alınıyor.
Responsive tasarım uzun yıllardır ekran genişliğine göre çalışan CSS kurallarıyla şekilleniyor. Telefon, tablet ve masaüstü için farklı düzenler oluşturmak gerektiğinde çoğu geliştiricinin ilk başvurduğu araç Media Queries oluyor. Ancak modern arayüzlerde ekranın genişliği, bir bileşenin ne kadar alana sahip olduğunu her zaman doğru anlatmıyor.
Örneğin 1440 piksel genişliğindeki bir masaüstü ekranında, bir ürün kartı yalnızca 260 piksel genişliğinde bir kenar çubuğuna yerleştirilmiş olabilir. Aynı kart başka bir sayfada 800 piksel genişliğinde bir içerik alanında kullanılabilir. Ekran boyutu değişmediği halde bileşenin ihtiyaç duyduğu tasarım tamamen farklıdır.
İşte CSS Container Queries bu soruna çözüm getiriyor. Bir bileşenin görünümünü ekranın tamamına göre değil, bulunduğu kapsayıcının ölçülerine göre değiştirmeyi mümkün kılıyor.
Böylece responsive tasarım yalnızca sayfanın genel düzenini yönetmekten çıkıp, kendi koşullarına uyum sağlayan bağımsız arayüz bileşenleri oluşturma yaklaşımına dönüşüyor.
CSS Container Queries Nedir?
CSS Container Queries, bir HTML öğesinin alt bileşenlerine, belirli bir kapsayıcının özelliklerine göre farklı CSS kuralları uygulanmasını sağlayan bir sorgulama mekanizmasıdır.
En yaygın kullanım biçimi, kapsayıcının genişliğine göre tasarım değiştirmektir.
Örneğin bir ürün kartı dar bir alanda dikey yerleşim kullanırken geniş bir alanda görseli solda, açıklaması sağda olacak şekilde düzenlenebilir.
Bu davranış için ekranın mobil veya masaüstü olması önemli değildir. Kartın yerleştirildiği alanın genişliği yeterlidir.
MDN CSS Container Queries dokümantasyonu, bu özelliğin temelini kapsayıcı boyutlarına ve diğer desteklenen özelliklerine göre koşullu stiller uygulamak olarak açıklar.
Container Queries neden geliştirildi?
Geleneksel responsive tasarımda bileşenler çoğunlukla sayfa düzenine bağımlı biçimde tasarlanır.
Örneğin bir kartın masaüstünde yatay, mobilde dikey görünmesi için Media Queries kullanılabilir. Ancak aynı kart masaüstündeki dar bir sidebar alanına taşındığında yatay görünüm kullanılamayacak kadar sıkışabilir.
Bu durumda geliştiriciler ek sınıflar, farklı component varyasyonları veya karmaşık CSS seçicileri kullanmak zorunda kalabilir.
Container Queries ise tasarım kararını bileşenin içinde bulunduğu alana bağlar.
Sonuç olarak aynı HTML yapısı farklı konumlarda daha az özel düzenleme gerektirerek kullanılabilir.
Container Queries ve Media Queries Arasındaki Fark
İki teknoloji benzer sözdizimine sahip olsa da farklı soruları yanıtlar.
Media Queries, genellikle tarayıcının viewport ölçülerine veya cihaz ve kullanıcı tercihlerine göre çalışır.
Container Queries ise ilgili kapsayıcının boyutları ya da desteklenen diğer özellikleri üzerinden değerlendirme yapar.
| Özellik | Media Queries | Container Queries |
|---|---|---|
| Temel referans | Viewport ve medya özellikleri | Kapsayıcı özellikleri |
| Kullanım alanı | Sayfa genelindeki responsive düzen | Bileşen düzeyindeki uyarlamalar |
| CSS kuralı | @media | @container |
| Yeniden kullanılabilir bileşenler | Sayfa bağlamına daha bağımlı olabilir | Farklı alanlara daha kolay uyarlanabilir |
| Tipik örnek | Mobil navigasyon | Genişliğe göre değişen ürün kartı |
Bu iki yaklaşım birbirinin rakibi değildir.
Örneğin bir web sitesinin ana navigasyonunun mobil ekranda açılır menüye dönüşmesi Media Queries ile yönetilebilir. Aynı sayfadaki ürün kartlarının grid sütunlarına veya sidebar genişliğine göre şekil değiştirmesi ise Container Queries ile gerçekleştirilebilir.
Modern responsive tasarımda en esnek yaklaşım, her iki teknolojiyi uygun yerde birlikte kullanmaktır.
CSS Container Queries Nasıl Çalışır?
Container Queries kullanabilmek için öncelikle bir öğenin sorgulanabilir kapsayıcı olarak tanımlanması gerekir.
Bu işlem genellikle container-type özelliğiyle yapılır.
Ardından @container kuralı kullanılarak kapsayıcının belirli koşulları karşılaması halinde alt öğelere uygulanacak CSS tanımlanır.
Temel örnek:
.card-wrapper {
container-type: inline-size;
}
.card {
display: block;
}
@container (min-width: 500px) {
.card {
display: grid;
grid-template-columns: 180px 1fr;
gap: 20px;
}
}Bu kodda .card-wrapper kapsayıcı olarak tanımlanır.
Kapsayıcının genişliği en az 500 piksel olduğunda içindeki .card öğesi iki sütunlu grid düzenine geçer.
Genişlik 500 pikselin altındaysa kartın varsayılan blok düzeni korunur.
Buradaki önemli ayrıntı, 500 piksel değerinin tarayıcı ekranını değil, .card-wrapper kapsayıcısını referans almasıdır.
Aynı kart, ekran genişliği değişmeden farklı sütunlarda farklı düzenlerle görüntülenebilir.
container-type Özelliği Ne İşe Yarar?
container-type, bir öğenin hangi tür container sorgularına uygun olacağını belirler.
Boyut tabanlı sorgularda en sık kullanılan değer inline-size olur.
container-type: inline-size
Bu değer, kapsayıcının satır içi eksendeki boyutunun sorgulanabilmesini sağlar.
Yatay yazım düzenlerinde bu eksen genellikle genişliğe karşılık gelir.
.component-container {
container-type: inline-size;
}Çoğu responsive kart, içerik bölümü ve panel tasarımında bu değer yeterlidir.
Kapsayıcıya inline-size containment uygulanır. Böylece tarayıcı, kapsayıcı genişliğini alt öğelerin stillerinden döngüsel biçimde etkilenmeden değerlendirebilir.
container-type: size
size değeri hem inline hem de block ekseninde boyut sorguları yapılmasını sağlar.
.dashboard-panel {
container-type: size;
}Bu seçenek yalnızca genişliğin değil, yüksekliğin de tasarım kararlarında önemli olduğu yapılarda kullanılabilir.
Ancak size containment, kapsayıcının boyut hesaplamasını etkilediğinden dikkatli kullanılmalıdır.
Özellikle yüksekliği içeriğe göre otomatik belirlenen bileşenlerde beklenmeyen sonuçlar oluşabilir.
Bu nedenle yalnızca genişliğe göre uyarlama yapılacaksa inline-size genellikle daha uygun bir başlangıçtır.
container-type: normal
Varsayılan değer normal olarak tanımlanır.
Bu değer, öğeyi boyut sorguları için bir size query container haline getirmez. Bununla birlikte isim tabanlı ve desteklenen stil sorgularında kullanılabilir.
Boyut sorgularında neden inline-size veya size gerektiği, MDN’in Container Size Queries açıklamasında ayrıntılı olarak ele alınır.
@container Kullanımı ve Sorgu Koşulları
@container kuralı, tanımlanmış bir kapsayıcının belirli koşulları sağlayıp sağlamadığını kontrol eder.
Örneğin:
@container (min-width: 600px) {
.product-card {
padding: 24px;
}
}Bu kural, uygun kapsayıcının genişliği en az 600 piksel olduğunda çalışır.
Modern karşılaştırma sözdizimiyle aynı koşul şöyle de yazılabilir:
@container (width >= 600px) {
.product-card {
padding: 24px;
}
}Birden fazla koşul da kullanılabilir:
@container (width >= 400px) and (width <= 800px) {
.product-card {
gap: 16px;
}
}Bu örnekte stil yalnızca kapsayıcı genişliği 400 ile 800 piksel arasında olduğunda uygulanır.
Burada dikkat edilmesi gereken önemli bir kural bulunur: Container query, kapsayıcının kendi boyutunu değiştirmek için değil, uygun kapsayıcının içindeki alt öğeleri biçimlendirmek için kullanılır.
Dolayısıyla kapsayıcı olarak tanımlanan öğenin kendi stilini aynı kapsayıcı sorgusuyla değiştirmeye çalışmak beklenen sonucu vermez.
Uygulamalı Örnek: Responsive Ürün Kartı
Container Queries kullanımını anlamanın en iyi yollarından biri, farklı alan genişliklerine uyum sağlayan bir ürün kartı oluşturmaktır.
Bu örnekte kartın dar alanlarda dikey, geniş alanlarda yatay görünmesi hedefleniyor.
1. HTML yapısı
<div class="product-container">
<article class="product-card">
<img
src="product.webp"
alt="Kablosuz kulaklık"
>
<div class="product-content">
<h2>Kablosuz Kulaklık</h2>
<p>
Günlük kullanım için hafif ve
taşınabilir kulaklık modeli.
</p>
<a href="/urun/">
Ürünü incele
</a>
</div>
</article>
</div>Bu yapıdaki .product-container, kartın içinde bulunduğu alanı temsil eder.
.product-card ise genişliğe göre tasarımı değiştirilecek bileşendir.
2. Varsayılan CSS
.product-container {
container-type: inline-size;
}
.product-card {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 14px;
}
.product-card img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
.product-content h2 {
margin-top: 0;
}Bu aşamada kart tek sütunlu görünür.
Görsel üstte, ürün açıklaması ve bağlantı ise altında yer alır.
Dar alanlar için bu düzen uygundur çünkü görsel ile metnin yan yana sıkışmasını önler.
3. Container Query eklemek
@container (min-width: 560px) {
.product-card {
grid-template-columns: 200px minmax(0, 1fr);
align-items: center;
}
}Kapsayıcı genişliği 560 piksele ulaştığında kart iki sütunlu hale gelir.
İlk sütunda ürün görseli, ikinci sütunda ürün bilgileri bulunur.
Bu tasarımın avantajı, kartın hangi sayfada kullanıldığından bağımsız çalışmasıdır.
Örneğin aynı kart geniş bir içerik alanında yatay görünürken dar bir kenar çubuğunda dikey düzene dönebilir.
4. Küçük alanlar için iyileştirme
Uzun ürün adlarının veya bağlantı metinlerinin taşmasını önlemek için ek kurallar kullanılabilir.
.product-content {
min-width: 0;
}
.product-content h2 {
overflow-wrap: anywhere;
}min-width: 0, grid veya flex yerleşimlerinde içeriğin gerektiğinde daralabilmesine yardımcı olur.
overflow-wrap: anywhere ise çok uzun ve bölünemeyen metinlerin taşmasını önleyebilir.
Bu küçük düzenlemeler özellikle farklı dillerde ve dinamik içeriklerle çalışan bileşenlerde önemlidir.
Container Query Breakpoint Değerleri Nasıl Belirlenmeli?
Responsive tasarımda breakpoint değerlerini yalnızca popüler cihaz genişliklerine göre belirlemek yaygın bir alışkanlıktır.
Ancak Container Queries yaklaşımında bu yöntem her zaman anlamlı değildir.
Çünkü sorgulanan alan ekranın tamamı değil, bileşenin bulunduğu kapsayıcıdır.
Örneğin bir kart için 560 piksel breakpoint kullanılması, belirli bir telefon veya tablet modeline karşılık gelmek zorunda değildir.
Asıl soru, kartın hangi genişlikte iki sütunlu düzene rahatça geçebildiğidir.
Breakpoint belirlerken şu unsurlar değerlendirilmelidir:
- Görselin minimum kullanılabilir genişliği
- Metin alanının okunabilirliği
- Başlıkların satır kırılma davranışı
- Buton ve bağlantıların yerleşimi
- Bileşenin farklı içerik uzunluklarıyla davranışı
Örneğin kısa başlıklı bir kart 480 piksel genişlikte yatay düzene geçebilirken uzun açıklamalara sahip başka bir bileşen için 600 piksel daha uygun olabilir.
Bu nedenle breakpoint değerleri bileşenin gerçek içerik ihtiyacına göre test edilmelidir.
İsimlendirilmiş Container Kullanımı
Karmaşık sayfalarda birden fazla kapsayıcı bulunabilir.
Örneğin bir yönetim panelinde ana içerik alanı, sidebar, widget ve kart bileşenleri farklı genişliklere sahip olabilir.
Bu durumda hangi kapsayıcının sorgulanacağını açıkça belirlemek için container-name özelliği kullanılabilir.
.dashboard-section {
container-type: inline-size;
container-name: dashboard;
}Ardından sorgu belirli bir kapsayıcı adına bağlanır:
@container dashboard (min-width: 700px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}Bu kural yalnızca dashboard adıyla tanımlanmış uygun kapsayıcının koşulları sağlandığında uygulanır.
container kısa yazımı
container-type ve container-name özellikleri tek satırda da tanımlanabilir.
.dashboard-section {
container: dashboard / inline-size;
}Bu kullanım, bileşen bazlı CSS mimarisinde daha kısa ve düzenli yapılandırmalar oluşturabilir.
Ancak kapsayıcı adlarının büyük-küçük harfe duyarlı olduğu unutulmamalıdır.
CSS Container Ölçü Birimleri: cqw, cqi ve Diğerleri
Container Queries yalnızca koşullu CSS kurallarıyla sınırlı değildir.
CSS, kapsayıcı boyutlarına göre hesaplanan özel uzunluk birimleri de sunar.
Bu birimler, bileşenlerin yazı boyutu, boşluk veya diğer ölçülerinin kapsayıcıya göre değişmesini sağlayabilir.
| Birim | Anlamı |
|---|---|
cqw | Query container genişliğinin %1’i |
cqh | Query container yüksekliğinin %1’i |
cqi | Inline boyutun %1’i |
cqb | Block boyutun %1’i |
cqmin | Inline ve block boyutlarından küçük olanın %1’i |
cqmax | Inline ve block boyutlarından büyük olanın %1’i |
Örneğin:
.card-title {
font-size: clamp(1.2rem, 3cqi, 2rem);
}Bu örnekte başlık boyutu kapsayıcının inline ölçüsüne göre değişebilir.
clamp() fonksiyonu ise minimum ve maksimum sınırlar belirleyerek yazı boyutunun aşırı küçülmesini veya büyümesini önler.
Ancak bu birimlerin kullanımı sırasında önemli bir ayrıntı bulunur.
Uygun bir query container bulunamazsa ilgili container ölçü birimleri, eksenlerine karşılık gelen küçük viewport birimlerine dayalı fallback davranışı gösterebilir.
Bu nedenle container ölçü birimlerinin her durumda beklenen kapsayıcıyı referans aldığı varsayılmamalıdır.
Özellikle karmaşık ve iç içe geçmiş bileşenlerde hesaplanan CSS değerlerinin tarayıcı geliştirici araçlarıyla kontrol edilmesi yararlıdır.
Container Style Queries Nedir?
Container Queries yalnızca boyut sorgularından oluşmaz.
Stil sorguları, kapsayıcının belirli CSS özelliklerine göre alt öğelere farklı stiller uygulanmasını sağlar.
Pratikte en yaygın desteklenen kullanım, CSS özel özellikleri yani custom properties üzerinden yapılan sorgulardır.
Örneğin:
.theme-wrapper {
--theme: dark;
}
@container style(--theme: dark) {
.theme-card {
background: #111827;
color: #ffffff;
}
}Bu örnekte .theme-card, uygun ata kapsayıcıda --theme özel özelliğinin dark değerine sahip olması halinde koyu temaya geçer.
Ancak stil sorgularının destek kapsamı boyut sorgularından farklıdır.
Özellikle sıradan CSS özelliklerini doğrudan sorgulama desteği, custom property sorgularıyla aynı düzeyde değerlendirilmemelidir.
Bu nedenle stil sorguları kullanılmadan önce hedef tarayıcıların destek durumları kontrol edilmelidir.
MDN Container Size and Style Queries rehberi, bu iki yaklaşımın kullanım koşullarını ayrıntılı olarak açıklar.
Container Queries Tarayıcılarda Destekleniyor mu?
Boyut tabanlı Container Queries, modern tarayıcılarda yaygın olarak desteklenmektedir.
Chrome, Edge, Firefox ve Safari’nin güncel sürümlerinde temel container-type ve @container boyut sorguları kullanılabilir.
Ancak Container Queries ailesindeki bütün özelliklerin aynı anda ve aynı kapsamda desteklendiği düşünülmemelidir.
Boyut sorguları, stil sorguları, scroll-state sorguları ve daha yeni özelliklerin tarayıcı uyumluluk durumları farklı olabilir.
Bu nedenle özellikle geniş kullanıcı kitlesine hitap eden web uygulamalarında hedeflenen özellik ayrı ayrı kontrol edilmelidir.
Desteklenmeyen tarayıcılar için alternatif
Eski tarayıcı desteği gerekiyorsa varsayılan tasarım, Container Queries olmadan da kullanılabilir durumda olmalıdır.
Örneğin:
.card {
display: block;
}
@supports (container-type: inline-size) {
.card-wrapper {
container-type: inline-size;
}
@container (min-width: 500px) {
.card {
display: grid;
grid-template-columns: 180px 1fr;
}
}
}Bu yaklaşımda temel kart görünümü bütün tarayıcılarda korunur.
Container Queries destekleyen tarayıcılarda ise gelişmiş iki sütunlu düzen uygulanır.
@supports kontrolü, ilgili CSS özelliğinin desteklenip desteklenmediğini değerlendirmek için kullanılır. Bununla birlikte uygulamanın gerçek davranışı hedef tarayıcılarda ayrıca test edilmelidir.
Daha karmaşık sistemlerde Flexbox, CSS Grid ve Media Queries ile alternatif düzenler oluşturmak da mümkündür.
Container Queries Kullanırken Yapılan Yaygın Hatalar
Container Queries oldukça güçlü olsa da yanlış yapılandırıldığında CSS kuralları beklenen şekilde çalışmayabilir.
Kapsayıcı tanımlamayı unutmak
Boyut sorgularının çalışması için uygun bir ata öğenin container-type: inline-size veya container-type: size ile tanımlanması gerekir.
Yalnızca @container yazmak yeterli değildir.
Kapsayıcının kendi stilini değiştirmeye çalışmak
Container Query kuralları uygun kapsayıcının alt öğelerini hedefler.
Kapsayıcının kendi genişliğine göre kendi stilini değiştirmek için aynı kapsayıcı sorgusunu kullanmak doğru yaklaşım değildir.
Gerekirse kapsayıcının dışına ayrı bir wrapper eklenebilir.
Yanlış kapsayıcının sorgulanması
İç içe geçmiş bileşenlerde isimsiz sorgular beklenenden farklı bir ata kapsayıcıyı referans alabilir.
Bu tür durumlarda container-name kullanmak daha öngörülebilir bir yapı sağlayabilir.
Her şeyi Container Queries ile çözmeye çalışmak
Container Queries, Media Queries’in tamamen yerini almak için tasarlanmamıştır.
Sayfa genelindeki responsive düzenlerde Media Queries, bileşenlerin kendi alanlarına uyum sağlamasında ise Container Queries çoğu zaman daha uygundur.
İçerik taşmalarını göz ardı etmek
Kapsayıcı genişliğine göre sütun sayısını değiştirmek, bütün taşma problemlerini otomatik olarak çözmez.
Uzun başlıklar, büyük görseller ve bölünemeyen metinler ayrıca ele alınmalıdır.
Bu nedenle minmax(), min-width, overflow-wrap ve uygun görsel boyutlandırma kuralları önemini korur.
Container Queries Performansı Etkiler mi?
Container Queries kullanımı, tek başına bir web sitesinin daha hızlı veya daha yavaş olacağını göstermez.
Tarayıcılar kapsayıcı sorgularını değerlendirmek için gerekli hesaplamaları gerçekleştirir. Boyut sorgularında kullanılan containment mekanizmaları ise düzen hesaplamalarında döngüsel bağımlılıkları önlemeye yardımcı olur.
Ancak karmaşık ve çok sayıda iç içe geçmiş bileşenden oluşan arayüzlerde CSS mimarisinin genel karmaşıklığı yine önemlidir.
Performans açısından asıl hedef, gereksiz sorgular üretmeden bileşenin gerçekten ihtiyaç duyduğu koşulları tanımlamaktır.
Örneğin tek bir kart için onlarca küçük breakpoint oluşturmak yerine, içeriğin düzen değiştirmesini gerektiren birkaç anlamlı eşik kullanmak daha sürdürülebilir olabilir.
Ayrıca Container Queries’in kullanılması, görsel optimizasyonu, gereksiz JavaScript’in azaltılması veya kritik CSS yönetimi gibi diğer performans çalışmalarının yerine geçmez.
Responsive tasarım ve performans birbiriyle ilişkili olsa da aynı problem değildir.
Container Queries Hangi Projelerde Kullanılmalı?
Container Queries özellikle aynı bileşenin farklı genişliklerde tekrar kullanıldığı projelerde avantaj sağlar.
Bunlara örnek olarak e-ticaret ürün kartları, blog içerik kutuları, yönetim paneli widget’ları, dashboard bileşenleri ve dinamik grid düzenleri gösterilebilir.
Örneğin bir dashboard tasarımında kullanıcı sidebar’ı genişlettiğinde ana içerik alanı daralabilir.
Media Queries kullanılan bir yapıda ekran genişliği değişmediği için kartların düzeni aynı kalabilir.
Container Queries kullanılan bir yapıda ise kartlar mevcut alanı yeniden değerlendirerek daha uygun bir görünüme geçebilir.
Benzer şekilde sürükle-bırak arayüz oluşturucularında veya farklı sayfa şablonlarında tekrar kullanılan bileşenlerde de bu yaklaşım faydalıdır.
Bununla birlikte her projede Container Queries kullanmak zorunlu değildir.
Basit bir sayfada yalnızca birkaç genel ekran breakpoint’i gerekiyorsa Media Queries yeterli olabilir.
Doğru teknoloji seçimi, kullanılan CSS özelliğinin yeniliğinden çok çözülmesi gereken tasarım problemine bağlıdır.
Sonuç: Responsive Tasarımda Bileşenin Alanı da Önemli
CSS Container Queries, responsive tasarımın uzun süredir eksik kalan bir yönünü tamamlıyor.
Media Queries ekran ve cihaz koşullarına göre genel düzen kararları vermeye devam ederken Container Queries, arayüz bileşenlerinin bulundukları alanın özelliklerine göre davranmasını sağlıyor.
container-type, @container, isimlendirilmiş kapsayıcılar ve container ölçü birimleri birlikte kullanıldığında daha bağımsız ve yeniden kullanılabilir bileşenler oluşturmak mümkün hale geliyor.
Özellikle modern frontend mimarilerinde aynı kartın, panelin veya widget’ın farklı sayfalarda yeniden kullanılması gerektiğinde bu yaklaşım CSS bakımını kolaylaştırabilir.
Yine de en iyi sonuç, Container Queries’i bütün responsive tekniklerin yerine koymaktan değil, CSS Grid, Flexbox ve Media Queries ile birlikte doğru yerde kullanmaktan geçiyor.
İyi tasarlanmış bir arayüz, yalnızca ekran boyutunu değil, içindeki bileşenlerin gerçekten ne kadar alana sahip olduğunu da dikkate alır.
Önerilen Yazılar
