Container-style
style() fonksiyonu ile kapsayıcı stillerini öğrenirsin.
style() fonksiyonu
Boyut sorguları kabın genişliğini ya da yüksekliğini sorgular. style() fonksiyonu ise kabın hesaplanan özel özellik değerini sorgular. Böylece aynı kabın stiline göre stiller değişebilir.
Sözdizimi: @container style(--theme: dark). Bu sorgu, kabın --theme özelliği dark ise içeriği uygular. Sınıf değişikliği yerine özel özellik değeri ile biçim değiştirirsin.
Bu yöntem, bileşenin görünümünü doğrudan veriye bağlamanın zarif bir yoludur.
Özel özellik sorguları
style() sorgusunun gücü, bileşenin durumunu özel özellikle taşımanızı sağlamasıdır. Üst öge, --theme: dark verdiğinde alt bileşen otomatik olarak koyu görünüme geçer; JavaScript ile sınıf eklemeye gerek kalmaz.
Birden fazla koşul da birleştirilebilir: @container style(--theme: dark) and (min-width: 320px). Böylece hem tema hem boyut tek sorguda denetlenir; bileşen her iki koşula da uyum sağlar.
Uygulama style() ile tema değiştir
.card seçicisine container-type: inline-size ver ve --theme: light özel özelliğini tanımla. Ardından @container style(--theme: dark) sorgusu içinde .card-body alt seçicisine background: #1f2937 ver. Böylece kart, koyu temada koyu arka plan gösterir.
Örnek çözümü göster
/* kart kabını aç, varsayılan tema açık */
/* koyu temada arka plan koyulaşıyor */
.card {
container-type: inline-size;
--theme: light;
}
@container style(--theme: dark) {
.card-body {
background: #1f2937;
}
}Kendini test et
-
Hangisi geçerli bir style() sorgusudur?
- @container (style: --theme)
- @container style(--theme)
- @container (--theme: dark)
- @container style(--theme: dark)
Cevabı göster
@container style(--theme: dark) — Doğru. style() fonksiyonu içine özel özellik adı ve değeri yazılır.
-
style() koşulunu yaz
@container ____(--theme: dark) { .card { color: white; } }Cevabı göster
@container style(--theme: dark) { .card { color: white; } } -
Sorgu türlerini eşleştir
- style()
- Stil sorgusu
- @container style(...)
- Stil koşulu
- --theme: dark
- Özel özellik değeri
- @container (min-width: ...)
- Boyut koşulu