Aturan @layer CSS

Definisi dan penggunaan

CSS @layer Aturan dapat digunakan untuk mengendalikan urutan penilaian gaya CSS lapisan cascading (cascade layers).

Ini dapat dicapai dengan meng definikan lapisan pertama, kemudian mengembungi set aturan yang perlu diukur menurut urutan khusus dalam lapisan itu.

@layer Dapat ditentukan dengan atau tanpa nama.

Tanpa nama @layer DisebutLapisan yang tak bernamaLapisan yang tak bernama diukur menurut urutan deklarasi (lihat contoh di bawah). Mereka mengikuti urutan cascading yang default (dari atas ke bawah).

Dengan nama yang unik @layer DisebutTingkatan yang dinamaiDengan tingkatan yang dinamai, kami dapat menentukan urutan lapisan cascading yang tepat (lihat contoh di bawah). Urutan dari yang paling kurang spesifik hingga yang paling spesifik, diurutkan dari kiri ke kanan.

Contoh

Contoh 1

Gunakan tingkatan yang tak bernama (akan mengikuti urutan cascading yang default - dari atas ke bawah):

/* Lapisan 1 */
@layer {
  body {
    background: pink;
  }
}
/* Lapisan 2 */
@layer {
  body {
    background: lightblue; /* Lapisan terakhir yang berlaku */
  }
}

Coba sendiri

Contoh 2

Gunakan tingkatan yang dinamai (dan tentukan urutan lapisan cascading yang tepat):

/* Tentukan urutan lapisan cascading yang tepat */
@layer bgblue, bgpink;
/* Lapisan 1 */
@layer bgpink {
  body {
    background: pink; /* Berlaku */
  }
}
/* Lapisan 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Coba sendiri

Sintaks CSS

@layer name {
  deklarasi css;
}

Nilai atribut

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung @ aturan ini.