Container queries

@container kuralını öğrenirsin.

@container nedir?

Medya sorguları ekran genişliğine bakar; oysa bir bileşenin gerçek kullanım alanı, içinde yer aldığı kutudur. @container bildirimi, içinde bulunulan kabın genişliğine göre biçim değişikliği yapar.

Önce kabı container-type: inline-size ile işaretlersin. Sonra @container (min-width: 400px) yazarak kabın genişliği 400 pikseli geçtiğinde uygulanacak stilleri verirsin. Bileşen artık ekranı değil, kabı dinler.

container-type: inline-size

Bir öğeyi kapsayıcı yapmak için container-type özelliğine değer verirsin. En yaygın değer inline-size'dır; bu, kabın satır içi (genişlik) boyutunu sorguya açar.

Bu bildirimi verdiğinde öğe, kendisini kullanan alt bileşenler için bir ölçü kaynağı olur. Bileşen, içinde bulunduğu genişliği okur ve stillerini buna göre ayarlar.

Uygulama Container sorgusu ile dolgu değiştir

.panel seçicisine container-type: inline-size ver. Ardından @container (min-width: 320px) sorgusu içinde .panel-in alt seçicisine padding: 24px tanımla. Böylece dar kabda az, geniş kabda çok dolgu oluşur.

Örnek çözümü göster

/* panel kabını aç */
/* geniş kabda iç dolgu artsın */
.panel {
  container-type: inline-size;
}
@container (min-width: 320px) {
  .panel-in {
    padding: 24px;
  }
}

Kendini test et

Bir kabı container sorgusuna açan değer hangisidir?
- display: container
- container-name: main
- container-type: inline-size
- position: container
Cevabı göster

container-type: inline-size — Doğru. container-type: inline-size kabın genişliğini sorguya açar.

container-type değerini yaz

.panel {
  ____: inline-size;
}

Cevabı göster

.panel {
  container-type: inline-size;
}

Container parçalarını eşle

@container

Sorgu bildirimi
container-type

Kabı açar
inline-size

Genişliği ölçer
min-width

Eşik koşulu

Sıradaki ders: Aspect-ratio

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler