Nested media

@media içinde nested kullanmayı öğrenirsin.

@media iç içe

Bir seçicinin içine @media bloğu yerleştirilebilir. .grid { @media (max-width: 600px) { grid-template-columns: 1fr; } } yazdığında tarayıcı bunu dışarı çıkarır ve @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } } olarak uygular.

Sonuç aynıdır; ancak stil, bileşene yakın durur. Bileşenin küçük ekran davranışını tanımından uzakta aramak zorunda kalmazsın.

Bileşene yakın yanıt

Nested @media, bileşenin responsive davranışını tanımıyla birlikte tutar. Sepet bileşeninin .cart bloğunda @media (max-width: 600px) yazarsan, küçük ekrandaki haliyle büyük ekrandaki hali tek yerde durur.

Dosyada ileri geri gezinme azalır. Bileşen kütüphanesi kuruyorsan her bileşen kendi içinde taşınabilir hale gelir.

Uygulama Küçük ekran için tek sütun

.grid seçicisinin içine bir @media (max-width: 600px) bloğu ekle ve içine grid-template-columns: 1fr özelliğini yaz.

Örnek çözümü göster

.grid bloğunun içine @media bloğu ekle.
Örnek çözüm:
/* .grid içine @media ekle */
.grid {
  grid-template-columns: 1fr 1fr;
  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

Tema tercihleri nested

Aynı yapı prefers-color-scheme gibi kullanıcı tercihleri için de çalışır. .card { @media (prefers-color-scheme: dark) { background: #111; color: #eee; } } yazarsan kart, koyu tema seçildiğinde otomatik koyu arka plana döner.

Bileşen, kendi koyu temasını kendi içinde taşır. Ayrı bir .dark .card seçicisine gerek kalmaz.

Kendini test et

Hangi yazım nested @media gösterir?
- @media { .grid { } } (max-width: 600px)
- .grid { @media { grid-template-columns: 1fr; } }
- @media (max-width: 600px) .grid { }
- .grid { @media (max-width: 600px) { grid-template-columns: 1fr; } }
Cevabı göster

.grid { @media (max-width: 600px) { grid-template-columns: 1fr; } } — Doğru. @media bloğu .grid bloğunun içinde, kendi koşulu ve süslü parantezleriyle yazılmış.

Koşulu tamamla

.grid {
  @media ____ {
    grid-template-columns: 1fr;
  }
}

Cevabı göster

.grid {
  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

Sıradaki ders: Nested pseudo

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler