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

Sıradaki ders: Container query units

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler