Yükleniyor...

CSS Konteyner Sorguları

Nesting bileşen seçicilerini bir arada tuttu. Medya sorguları hâlâ viewport’u izler. Konteyner sorguları başka bir soru sorar: bu ebeveyn kutunun genişliği ne? Aynı ürün kartı dar bir rail’de kompakt kalır, geniş ana sütunda açılır — tarayıcı penceresi hiç değişmese bile.

Viewport neden yetmez

Düzenlerde aynı bileşen eşit olmayan yuvalara konur: 16rem’lik yan rail ve esnek ana alan. İkisi de aynı viewport genişliğini paylaşır; @media (min-width: …) ikisinde de aynı tetiklenir. Stiller ekranın tamamından değil, kartı saran konteynerden gelmelidir.

Ölçüm bağlamı oluşturun

Boyutunu bildirmesi gereken ebeveyni seçin. container-type verin — genelde inline-size, ebeveynin satır içi boyutunu (yatay yazımda genişlik) sorgulamak için, her iki eksende tam size containment dayatmak zorunda kalmadan:

Turn a rail into a size container

css

.rail {
container-type: inline-size;
container-name: rail;
width: 16rem;
padding: 1rem;
background: #f8fafc;
}

.stage {
container-type: inline-size;
container-name: stage;
flex: 1;
min-width: 0;
padding: 1.25rem;
}

container-type olmadan @container’ın güvenilir ölçeceği bir şey yoktur. container-name isteğe bağlıdır; birden fazla ata konteyner olduğunda isimle hedeflersiniz.

`@container` ile konteyneri sorgulayın

Kurulumdan sonra kuralları @container içinde bir boyut koşuluyla sarın. Torunlar, o kutu eşleştiğinde tepki verir — yalnızca viewport değişince değil:

Product card reacts to its parent width

css

.product-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
}

.product-card .media {
aspect-ratio: 16 / 10;
border-radius: 0.5rem;
background: #cbd5e1;
}

.product-card .meta {
font-size: 0.875rem;
color: #64748b;
}

@container (min-width: 28rem) {
.product-card {
grid-template-columns: 10rem 1fr;
align-items: center;
}

.product-card .title {
font-size: 1.25rem;
}
}

Dar bir .rail içinde .product-card tek sütunda kalır. Aynı HTML geniş .stage’de iki sütunu açar — aynı işaretleme, aynı viewport, farklı konteyner genişliği.

Adlı konteynerler

İç içe konteynerler hangi kutunun sorgulandığını karıştırıyorsa, @container sonrasına adı yazın:

Target a named containment context

css

@container stage (min-width: 36rem) {
.product-card {
grid-template-columns: 12rem 1fr auto;
gap: 1.25rem;
}

.product-card .buy {
justify-self: end;
}
}

@container rail (max-width: 18rem) {
.product-card .meta {
display: none;
}
}

@container stage (…) yalnızca stage adlı atayı dinler. Rail’in sıkı kuralları ile stage’in geniş kuralları aynı işaretlemeyi sardığında çakışmaz.

Konteyner sorgu birimleri

Containment bağlamı varken cqi (sorgu konteynerinin satır içi boyutunun %1’i) ve cqw (genişliğinin %1’i) gibi uzunluklar tipografi ve boşluğu ebeveynle ölçekler, viewport ile (vi / vw) değil:

Type that tracks the container

css

.product-card .title {
font-size: clamp(1rem, 0.85rem + 2.5cqi, 1.5rem);
}

.product-card {
padding: clamp(0.75rem, 2.5cqi, 1.5rem);
}

Önceki Modern Toolkit derslerindeki var() ve clamp() ile birleştirin. Konteyner birimleri sorgu için kullanılan containment bağlamını ölçer — yeniden kullanılabilir widget’lar için ideal.

Konteyner ve medya — kim ne yapar?

📊 Konteyner sorguları ve medya sorguları

Sorduğunuz soru	Tercih	Tipik araç
Tarayıcı viewport’u ne kadar geniş?	Sayfa kabuğu, nav, çok sütunlu sayfa	`@media (min-width: …)`
Bileşenin etrafındaki bu ebeveyn ne kadar geniş?	Kartlar, widget’lar, eşit olmayan yuvalardaki embed’ler	`container-type` sonrası `@container (min-width: …)`
İkisine de ihtiyaç var mı?	Sık sık evet	MQ sayfa için; CQ yuvadaki bileşen için

İki yuva, bir bileşen

Küçük bir eskiz kazancı gösterir — iki konteyner, bir kart sınıfı:

Sidebar rail and main stage share one card

css

.page {
display: flex;
gap: 1rem;
align-items: start;
}

.rail {
container-type: inline-size;
container-name: rail;
width: 16rem;
}

.stage {
container-type: inline-size;
container-name: stage;
flex: 1;
min-width: 0;
}

/* Same .product-card class in both slots — @container rules above decide layout */

Yalnızca yuva genişliği için .product-card--sidebar ve .product-card--main ayırmak zorunda değilsiniz. Yuva boyutunu bildirir; kart dinler.

Sayfa medyasını bileşen konteynerleriyle eşleştirin

Viewport sorgularını sayfa kararları için tutun (site nav’ı daralt, kabuğu tek sütun). Konteyner sorgularını sayfanın verdiği yuvadaki bileşen kararları için kullanın:

Viewport for the page, container for the card

css

@media (max-width: 40rem) {
.page {
flex-direction: column;
}

.rail {
width: auto;
}
}

@container (min-width: 28rem) {
.product-card {
grid-template-columns: 10rem 1fr;
}
}

Küçük telefonda sayfa üst üste biner; geniş masaüstünde rail dar, stage geniş kalabilir — bu ayrımı net anlatan yalnızca konteyner sorgularıdır.

Kendiniz deneyin

Kartın etrafındaki sarmalayıcıya container-type: inline-size ekleyin; DevTools’ta containment bağlamını doğrulayın.
@container (min-width: 24rem) ile kartı yığından iki sütuna geçirin.
container-name: panel verin ve @container panel (min-width: 30rem) ile hedefleyin.
Başlığı cqi ile boyutlandırın; yalnızca ebeveyni yeniden boyutlandırın (pencereyi değil).
Sayfa kabuğunda bir @media bırakın; aynı mantığı kartın içinde tekrarlamayın.

Sık yapılan hatalar

Atada container-type olmadan @container — ölçülecek anlamlı bir şey yok
Tüm medya sorgularını konteyner sorgularıyla değiştirmek — sayfa kabuğu hâlâ @media’nın işi
Üç iç içe konteyner ve hangi genişliğin geçerli olduğu belirsiz — adlandırın ve açıkça hedefleyin
Viewport kırılım noktalarını (48rem) her widget’a kör kopyalamak — yuvaya göre ayarlayın, cihaz kataloğuna değil
Nesting (&, iç içe seçiciler) ile containment’ı karıştırmak — nesting seçicileri düzenler; konteyner sorguları kutuları ölçer

Özet

Konteyner sorguları yalnızca viewport’tan değil, ebeveyn boyutundan stiller
container-type (çoğunlukla inline-size); netlik için isteğe bağlı container-name
@container (min-width: …) / @container name (…) ile torunları yeniden biçimlendirin
Uzunluklar konteyneri izlemeli diye cqi / cqw
Modern Toolkit’te sırada: feature queries (@supports) — stilleri tarayıcı yeteneğine bağlama

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil