Özet - Duyarlı widget sistemi

Container queries ile duyarlı widget sistemi kurarsın.

Duyarlı widget sistemi

Bu özette dört kavramı birleştireceğiz: container-type kabı sorguya açar, container-name ad verir, cqi birimi kaba göre ölçek sağlar, style() özel özellik değerini sorgular. Hepsi bir araya gelince her kabın içinde kendine göre dizilen bir widget sistemi oluşur.

Widget, ekranı değil kabını dinler; aynı widget ana sayfada geniş, kenar çubuğunda dar, modalda orta boy çalışır. Tasarım tutarlı kalır; kod tekrarı azalır.

Uygulama Widget kabını kur

.widget seçicisine container-type: inline-size ve container-name: widget ver. Ardından .widget h2 alt seçicisine font-size: 4cqi tanımla. Böylece widget başlığı kabın genişliğiyle ölçeklenir.

Örnek çözümü göster

/* widget kabını aç ve adlandır */
/* başlık kabın genişliğiyle büyüsün */
.widget {
  container-type: inline-size;
  container-name: widget;
}
.widget h2 {
  font-size: 4cqi;
}

Uygulama Widget varyantını ekle

@container widget style(--compact: 1) sorgusu yaz. İçinde .widget-body alt seçicisine padding: 8px ver. Böylece widget, --compact: 1 verildiğinde daraltılmış görünür; aynı HTML ile iki görünüm elde edilir.

Örnek çözümü göster

/* sıkı modda gövde daralsın */
@container widget style(--compact: 1) {
  .widget-body {
    padding: 8px;
  }
}

Kendini test et

Widget yazı boyutunu kaba göre ölçeklemek için en uygun birim hangisidir?
- rem
- vw
- cqi
- em
Cevabı göster

cqi — Doğru. cqi kabın satır içi eksenine göre ölçeklenir; widget kaba uyum sağlar.

Widget kabını adlandır

.widget {
  container-type: inline-size;
  container-name: ____;
}

Cevabı göster

.widget {
  container-type: inline-size;
  container-name: widget;
}

Sıradaki ders: View transitions nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler