CSS @layer kuralı

Tanımlama ve kullanım

CSS @layer Kurallar, CSS katman sırası (cascade layers) değerlendirme sırasını kontrol etmek için kullanılabilir.

Bu, öncelikle bir katman tanımlanması ve ardından belirli bir sırayla değerlendirilmesi gereken kurallar kümesi bu katman içinde sarılarak gerçekleştirilir.

@layer Adlandırılmış veya adlandırılmamış olarak tanımlanabilir.

Adlandırılmamış @layer AdlandırılırAnonim katmanAnonim katmanlar, tanımlanan sıraya göre değerlendirilir (aşağıdaki örnekleri bkz.). Varsayılan katman sırasını izlerler (soldan sağa).

Tekil bir adı olan @layer AdlandırılırAdlandırılmış katmanAdlandırılmış katmanlar, gerekli belirli katman sırasını belirlemek için kullanılabilir (aşağıdaki örnekleri bkz.). Sıra en az spesifikten en spesifik, soldan sağa sıralanır.

Örnek

Örnek 1

Anonim katmanları kullanarak (varsayılan katman sırasını izler):

/* Katman 1 */
@layer {
  body {
    background: pink;
  }
}
/* Katman 2 */
@layer {
  body {
    background: lightblue; /* En son katman etkili */
  }
}

Kişisel olarak deneyin

Örnek 2

Adlandırılmış katmanları kullanarak (ve gerekli belirli katman sırasını belirtin):

/* Belirli bir katman sırasını belirtin */
@layer bgblue, bgpink;
/* Katman 1 */
@layer bgpink {
  body {
    background: pink; /* Etkili */
  }
}
/* Katman 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Kişisel olarak deneyin

CSS dilbilgisi

@layer name {
  css declarations;
}

Özellik değeri

Tarayıcı desteği

Tablodaki rakamlar, bu @ kuralıyı tam olarak destekleyen ilk tarayıcı sürümünü gösterir.