Deklarasi dan Pengurutan @layer
Deklarasikan lapisan kaskade bernama dan kendalikan urutan prioritasnya dengan pernyataan @layer.
Deklarasi dan Pengurutan @layer adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Apa Itu @layer?
Lapisan kaskade CSS (@layer) menyediakan mekanisme untuk mengontrol prioritas aturan CSS dalam kaskade secara eksplisit — tanpa bergantung pada spesifisitas. Lapisan dengan prioritas lebih rendah kalah meskipun memiliki pemilih dengan spesifisitas lebih tinggi.
Mengapa @layer Penting
Tanpa lapisan, setiap aturan CSS bersaing menggunakan spesifisitas dan urutan sumber. Hal ini menyebabkan perang spesifisitas ketika gaya pengaturan ulang, komponen, dan utilitas saling bersaing untuk mendapatkan prioritas. Lapisan memberikan prioritas yang tetap dan dapat diprediksi kepada setiap kelompok.
Mendeklarasikan Lapisan
Deklarasikan lapisan sejak awal dalam satu pernyataan. Urutan deklarasi menentukan prioritas — lapisan yang dideklarasikan kemudian menang atas lapisan yang dideklarasikan lebih awal.
<p>This scene only declares layer order — see the CSS panel:</p>
<p style="color:#888;font-size:0.9em;">@layer reset, base, components, utilities;</p>Posisi Deklarasi Lapisan
Deklarasi @layer sebaiknya berada di bagian atas lembar gaya Anda (atau berkas impor utama). Anda dapat menambahkan gaya ke lapisan dalam urutan apa pun setelah deklarasi tersebut — prioritas ditentukan oleh urutan deklarasi, bukan oleh tempat gaya ditambahkan.
Mengapa Urutan Sumber Tidak Penting bagi Lapisan
Karena prioritas lapisan ditentukan saat deklarasi, Anda dapat menambahkan gaya ke lapisan di mana saja — bahkan sebelum lapisan tersebut dideklarasikan, melalui referensi maju. Urutan yang dideklarasikanlah yang penting.
Aturan Prioritas Lapisan
Deklarasi dalam lapisan yang lebih baru selalu menang atas deklarasi dalam lapisan yang lebih awal, terlepas dari spesifisitas:
<p>Reset layer !important paragraph (red)</p>
<div id="header">Components layer header (blue)</div>Gaya Tanpa Lapisan
Gaya yang ditempatkan di luar lapisan apa pun disebut tanpa lapisan. Gaya ini memiliki prioritas tertinggi — bahkan lebih tinggi daripada lapisan yang dideklarasikan terakhir. Gunakan gaya ini untuk penimpaan darurat yang harus selalu menang.
Tumpukan Prioritas
Urutan prioritas lengkap (dari tertinggi ke terendah untuk gaya penulis):
- Gaya tanpa lapisan (di luar @layer apa pun)
- Lapisan yang dideklarasikan terakhir (misalnya, utilitas)
- Lapisan kedua dari terakhir (misalnya, komponen)
- Lapisan yang lebih awal (dasar, pengaturan ulang)
Pembalikan !important dalam Lapisan
!important dalam lapisan cukup rumit: aturan ini membalik urutan lapisan untuk deklarasi tersebut. !important dalam lapisan paling awal menang atas !important dalam lapisan yang lebih baru. Hal ini sesuai dengan perilaku kaskade asli untuk gaya pengguna dibandingkan gaya penulis.
Lapisan Bertingkat
Lapisan dapat dibuat bertingkat menggunakan notasi titik:
<p>This scene declares nested layers with dot notation — see the CSS panel.</p>Contoh Penyiapan Praktis
Penyiapan lapisan proyek yang realistis:
<p>A realistic project layer order — see the CSS panel.</p>Pemeriksaan Singkat
Lapisan dideklarasikan sebagai: @layer base, components, utilities. Gaya dari lapisan mana yang menang dalam konflik?
Ringkasan
@layer menetapkan lapisan kaskade yang diurutkan secara eksplisit. Deklarasikan nama lapisan dalam urutan prioritas (yang terendah terlebih dahulu). Lapisan yang lebih baru selalu menang atas lapisan yang lebih awal, terlepas dari spesifisitas. Gaya tanpa lapisan memiliki prioritas tertinggi. !important membalik urutan prioritas lapisan untuk deklarasi tersebut.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Deklarasi dan Pengurutan @layer” gratis?
Ya — teks lengkap “Deklarasi dan Pengurutan @layer” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Deklarasi dan Pengurutan @layer”?
Deklarasikan lapisan kaskade bernama dan kendalikan urutan prioritasnya dengan pernyataan @layer. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Deklarasi dan Pengurutan @layer” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Deklarasi dan Pengurutan @layer
- Menambahkan Gaya ke Lapisan
- Prioritas Lapisan dan Interaksi !important
- Lapisan dalam Kode Pihak Ketiga