Container-name
container-name ile adlandırılmış kapsayıcıları öğrenirsin.
container-name ile adlandırma
Bir sayfada birden fazla kapsayıcı olabilir. Adsız @container sorguları en yakın kabı dinler; bu da istenmeyen üst kabın devreye girmesine yol açabilir. container-name özelliği kaba ad verir.
Tanımladıktan sonra sorguyu @container ad (min-width: 200px) biçiminde yönlendirirsin. Böylece yalnızca o adı taşıyan kabın ölçüsü sorguyu etkiler; diğer kaplar görmezden gelinir.
Bu, iç içe geçmiş düzenlerde karışıklığı önler ve sorguları okunur kılar.
İç içe adlandırılmış kaplar
İç içe yerleşen kapları adlandırdığında sorgular keskin biçimde hedef alır. Dış kaba container-name: sayfa, iç kaba container-name: panel ver; sonra @container panel (min-width: 300px) yazarsan yalnızca iç kabın genişliği sorguyu çalıştırır.
Aynı adı birden fazla kapta kullanmak mümkündür; bu durumda sorgu, adı taşıyan en yakın kabı seçer. Yine de benzersiz adlar tasarımı daha öngörülür kılar.
Uygulama Adlandırılmış kapsayıcı sorgusu yaz
.side seçicisine container-type: inline-size ve container-name: side ver. Ardından @container side (min-width: 280px) sorgusu içinde .side-list alt seçicisine display: grid tanımla. Böylece dar kabda tek sütun, geniş kabda ızgara görünümü oluşur.
Örnek çözümü göster
/* side adlı kapsayıcıyı aç */
/* geniş kabda liste ızgaraya dönsün */
.side {
container-type: inline-size;
container-name: side;
}
@container side (min-width: 280px) {
.side-list {
display: grid;
}
}Kendini test et
-
Hangisi adlandırılmış kabı sorgular?
- @container (min-width: 200px)
- @container (name: sidebar)
- @container sidebar (min-width: 200px)
- @container (sidebar: min-width)
Cevabı göster
@container sidebar (min-width: 200px) — Doğru. @container'dan sonra ad, sonra koşul parantezi gelir.
-
Adlandırılmış sorguyu tamamla
@container ____ (min-width: 200px) { .menu { display: flex; } }Cevabı göster
@container sidebar (min-width: 200px) { .menu { display: flex; } } -
Adlandırma parçalarını eşleştir
- container-name
- Kaba ad veren özellik
- @container main
- Adı 'main' olan kabı sorgular
- main sidebar
- Birden fazla ad örneği
- container-type
- Kabı sorguya açan özellik