CSS
Cascade layers
@layer kuralı ile katmanlı cascading'i öğrenirsin.
@layer ile katmanlar
@layer deyimi, stilleri adlandırılmış katmanlarda toplar. Katmanların sırasını sen belirlersin; tarayıcı önce katman sırasına, sonra katman içindeki spesifiteye bakar. Böylece "kimin kazandığı" belli bir hiyerarşiye bağlanır.
Örnek: @layer base, components; sıralamasını en başta bir kez yazarsın. Sonra @layer components { .card { ... } } biçiminde stillerini katmanlara koyarsın. components katmanı base'i geçersiz kılar; tek satırlık deyimle.
Katman sırası nasıl belirlenir?
İlk geçtiği yer sırayı kilitler. @layer base, components, utilities; yazarsan bu sıra tüm dosya için geçerli olur: base en alt, utilities en üst. Daha sonra yine @layer base { ... } yazsan bile base yine en alttadır.
Katmansız stiller — yani @layer içine alınmamış bildirimler — her zaman tüm katmanları geçer. Bu yüzden katman dışı stilleri en güçlü sanırsın. Yalnızca gerçekten herkesi geçmesi gereken bir şey kalıyorsa katman dışında tut.
Katman içi spesifite
Aynı katman içinde sıradan cascading işler: yüksek spesifite kazanır, eşitse sonra yazılan. @layer components { #main .card { ... } .card { ... } } içinde ilk bildirim kazanır çünkü spesifite (1, 1, 0) daha yüksektir.
Farklı katmanlar arasında ise yalnızca katman sırasına bakılır. base içindeki #main bile components içindeki .card'a kaybeder; çünkü components katmanı daha üsttedir. Katman sırası, spesifiteyi alt eder.
Uygulama İki katmanlı iskelet kur
En üste @layer base, components; sıralama deyimini ekle. Sonra @layer base bloğu içinde body seçicisi için margin: 0 bildirimini yaz. En sona @layer components bloğu içinde .card seçicisi için padding: 1rem bildirimini ekle.
Örnek çözümü göster
/* katman iskeletini ekle */
@layer base, components;
@layer base {
body {
margin: 0;
}
}
@layer components {
.card {
padding: 1rem;
}
}
Kendini test et
-
Hangi bildirim kazanır?
@layer base, components;
@layer base {
.card { color: black; }
}
@layer components {
.card { color: navy; }
}
- color: black — base önce yazıldı
- color: navy — components, base'i geçersiz kılar
- color: navy — spesifite farkından
- color: black — base daha güçlüdür
Cevabı göster
color: navy — components, base'i geçersiz kılar — Doğru. components katmanı base'ten sonra gelir; sıra base, components olduğundan components kazanır.
-
@layer bloğunu adlandır
@layer ____ {
body {
margin: 0;
}
}
Cevabı göster
@layer base {
body {
margin: 0;
}
}
-
Cascade layer deyimini anlamına eşle
- @layer a, b;
- Katman sırası
- @layer a { }
- Stil bloğu
- a
- Katman adı
- a, b
- İsim listesi
Sıradaki ders: Modüler CSS
