Untuk memperkenalkan cascade layer ke CSS yang sudah ada, tentukan terlebih dahulu di mana aturan lama seharusnya ditempatkan. Aturan normal yang tidak berada di dalam layer memiliki prioritas lebih tinggi daripada setiap layer bernama, jadi override baru di dalam layer hanya akan berfungsi setelah aturan lama yang bersaing dipindahkan ke layer dengan prioritas lebih rendah.

Panduan ini ditujukan bagi seseorang yang mengedit halaman web yang ditulis secara manual di Mac dan memeriksanya di browser desktop. Tugas konkretnya adalah menempatkan stylesheet yang sudah ada di bawah gaya komponen baru sambil mempertahankan jalur migrasi yang mudah dipahami. Contohnya menggunakan file lokal, label sintetis, dan struktur CSS sederhana.

Mengapa gaya baru di dalam layer kalah dari aturan yang sudah ada?

Untuk deklarasi normal yang bersaing dalam stylesheet penulis, CSS yang tidak berada di dalam layer memiliki prioritas lebih tinggi daripada CSS di dalam layer eksplisit mana pun. Selector yang lebih spesifik atau posisi yang lebih akhir di dalam layer tidak dapat mengatasi batas tersebut. Spesifikasi CSS menunjukkan perilaku ini dengan aturan tanpa layer yang mengesampingkan aturan berlapis yang lebih spesifik. CSS Cascading and Inheritance Level 5.

Perhatikan fragmen CSS ini, yang menargetkan elemen dengan class tile:

.tile {
  background-color: #b8bdc5;
}

@layer components {
  .tile {
    background-color: #246a73;
  }
}

Latar belakangnya tetap abu-abu. Menamai layer overrides, memindahkan bloknya lebih jauh ke bawah file, atau meningkatkan spesifisitas selectornya tidak mengubah prioritas aturan normal yang tidak berada di dalam layer. Nama layer tidak memiliki makna bawaan; urutan deklarasinya menentukan hubungan antar-layer. MDN: Cascade layers.

Tabel keputusan berikut mengasumsikan deklarasi stylesheet yang bersaing berada dalam origin dan konteks penulis yang sama, tanpa gaya inline, animasi, atau transisi yang memengaruhi properti. Baca setiap baris dari prioritas yang lebih rendah ke yang lebih tinggi.

Jenis deklarasi Prioritas lebih rendah → lebih tinggi
Normal Layer yang dideklarasikan pertama → layer yang dideklarasikan kemudian → aturan tanpa layer
!important Aturan tanpa layer → layer yang dideklarasikan kemudian → layer yang dideklarasikan pertama

Prioritas layer ditentukan sebelum spesifisitas selector. Di dalam layer yang menang, spesifisitas tetap berpengaruh; urutan sumber dapat menentukan hasil jika deklarasi lainnya setara. Pembalikan prioritas untuk deklarasi penting berarti migrasi harus mempertimbangkan aturan normal dan penting secara terpisah. MDN: Cascade layers.

Batas migrasi mana yang sebaiknya dipilih?

Mulailah dengan satu elemen dan satu properti yang perlu dikendalikan oleh CSS baru. Periksa deklarasi yang saat ini menang, identifikasi stylesheet-nya, lalu tentukan apakah Anda dapat mengubah file tersebut atau cara halaman memuatnya. Ini menetapkan batas migrasi terkecil yang tetap berguna.

Situasi Anda Langkah praktis berikutnya Dampak
CSS yang sudah ada harus tetap memiliki prioritas Biarkan tetap tanpa layer dan tambahkan nilai bawaan dengan prioritas lebih rendah di dalam layer Layer baru menyediakan nilai saat tidak ada aturan yang lebih kuat dan bersaing
Anda dapat mengedit CSS yang sudah ada Tempatkan aturan lama yang memenuhi syarat di dalam @layer legacy Layer berikutnya dapat mengesampingkan deklarasi normal lama
Anda dapat mengubah titik masuk stylesheet Impor file yang sudah ada dengan layer(legacy) Stylesheet hasil impor masuk ke layer tersebut tanpa perlu menulis ulang selectornya
Anda tidak dapat mengubah CSS lama yang bersaing atau cara pemuatannya Untuk sementara, pertahankan override yang diperlukan tanpa layer Anda tetap perlu menyelesaikan spesifisitas dan faktor kaskade lainnya

Pilihan ini mengikuti tiga mekanisme layer yang didokumentasikan oleh CSS: pernyataan mendeklarasikan nama layer, blok menempatkan aturan ke dalam layer, dan impor berlapis menempatkan stylesheet yang diimpor ke dalam layer. Pernyataan saja tidak memindahkan aturan yang sudah ada. CSS Cascading and Inheritance Level 5: Declaring Cascade Layers.

Untuk stylesheet kecil, membungkus aturan biasa mungkin praktis. Untuk file eksternal yang sudah ada, impor berlapis membentuk batas yang jelas. Jangan menempatkan aturan @import yang sudah ada di dalam blok @layer: impor adalah aturan tingkat atas dengan batasan penempatan. MDN: @import.

Migrasi yang direkomendasikan di bawah ini mengimpor file lama ke dalam layer bernama. Ini mengubah prioritasnya terhadap stylesheet lain, jadi periksa CSS lain yang dimuat sebelum menerapkan perubahan yang sama di luar halaman contoh.

Bagaimana cara membuat contoh lokal yang lengkap di Mac?

Buat folder yang berisi tiga file teks biasa berikut. Gunakan editor kode dan pertahankan ekstensi .html dan .css. File-file ini tidak memerlukan paket, skrip, font, atau aset yang diunduh. Nama-namanya adalah sumber daya contoh lokal.

Simpan dokumen lengkap ini sebagai sample.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layer sample</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="sample">
    <h1>Shape sample</h1>
    <p>Tile A</p>
    <div class="tile" aria-label="Sample shape"></div>
  </main>
</body>
</html>

Dokumen ini hanya menautkan ke styles.css. HTML menggunakan rel="stylesheet" dan href untuk menghubungkan stylesheet eksternal dengan halaman. HTML Standard saat ini tidak mendefinisikan atribut layer untuk elemen link; tetapkan sumber daya ke suatu layer melalui CSS. HTML Standard: The link element.

Simpan stylesheet lengkap ini sebagai legacy.css. Isinya mewakili aturan lama yang selectornya tetap tidak berubah:

body {
  margin: 2rem;
  font-family: system-ui, sans-serif;
  color: #26313a;
  background-color: #f4f5f7;
}

#sample .tile {
  width: 6rem;
  height: 6rem;
  background-color: #b8bdc5;
  border-radius: 0;
}

Simpan stylesheet titik masuk lengkap ini sebagai styles.css:

@layer legacy, components;
@import url("legacy.css") layer(legacy);

@layer components {
  .tile {
    background-color: #246a73;
    border-radius: 50%;
  }
}

Buka sample.html di Safari atau Firefox desktop versi terkini. Hasil yang diharapkan adalah lingkaran hijau kebiruan di bawah label Tile A. Layer lama menyediakan dimensinya, sedangkan layer komponen yang dideklarasikan kemudian menyediakan latar belakang dan bentuk bulatnya. Selector satu class-nya menang atas selector ID lama karena deklarasi tersebut bersaing lintas layer. MDN: @layer.

File titik masuk menetapkan urutan layer terlebih dahulu, menempatkan impor sebelum blok, lalu menambahkan aturan komponen. Ini mengikuti sintaks dan aturan penempatan impor yang terdokumentasi. Pernyataan layer boleh mendahului impor; blok layer tidak boleh. MDN: @import.

Apa yang perlu diubah pada halaman yang sudah ada?

Saat menerapkan susunan ini, ganti referensi stylesheet langsung pada halaman dengan stylesheet titik masuk yang baru. Jika halaman tetap memuat legacy.css secara langsung sekaligus mengimpornya ke dalam layer, pemuatan langsung itu menyediakan deklarasi tanpa layer yang dapat menggagalkan migrasi.

Gunakan contoh ini untuk memperkirakan kegagalannya: tambahkan tautan stylesheet langsung yang terpisah ke legacy.css, dan deklarasi normalnya dapat mengembalikan bentuk persegi abu-abu. Menghapus pemuatan langsung itu akan membuat aturan lama tetap berada di dalam layer yang dituju. Prediksi ini mengikuti penempatan aturan tanpa layer oleh spesifikasi setelah layer eksplisit dalam urutan prioritas normal. CSS Cascading and Inheritance Module Level 5: Layer Ordering.

Simpan ketiga file dalam satu folder untuk contoh ini. Saat menyesuaikan pendekatan tersebut, pertahankan kondisi sumber daya yang sudah ada, seperti batasan media, dan pastikan setiap stylesheet yang dirujuk berhasil dimuat sebelum mendiagnosis konflik kaskade.

Bagaimana cara memverifikasi migrasi di Firefox pada macOS?

Buka kotak peralatan pengembang Firefox dengan Command–Option–I, lalu pilih Inspector. Pilih bentuk contoh di pohon dokumen, kemudian periksa tampilan Rules. Mozilla mendokumentasikan pintasan kotak peralatan di Mac dan kontrol pemeriksaan CSS di Inspector. All keyboard shortcuts, Examine and edit CSS.

Periksa contoh satu properti pada satu waktu:

  1. Cari background-color. Deklarasi komponen seharusnya menang atas nilai abu-abu dari aturan lama.
  2. Cari border-radius. Nilai dari komponen seharusnya menghasilkan bentuk lingkaran.
  3. Periksa width dan height. Nilainya seharusnya tetap berasal dari file lama.
  4. Nonaktifkan sementara deklarasi latar belakang komponen. Warna abu-abu dari aturan lama seharusnya terlihat, sementara bentuknya tetap membulat.

Firefox mencoret deklarasi yang dikesampingkan dan menyediakan kotak centang untuk menonaktifkannya sementara. Firefox juga menautkan aturan ke file sumbernya. Gunakan kontrol tersebut untuk mengidentifikasi deklarasi yang bersaing, alih-alih menganggap setiap hasil tak terduga sebagai masalah selector. Mozilla: Examine and edit CSS.

Untuk halaman sungguhan, ulangi pemeriksaan ini pada kondisi yang Anda ubah: jendela yang lebih sempit, kondisi media yang relevan, dan variasi komponen. Simpan perubahan permanen di file sumber dan muat ulang halaman; perubahan sementara melalui pemeriksaan berguna untuk diagnosis.

Apa yang dapat berubah secara tak terduga selama migrasi?

Deklarasi penting membalik urutan yang dimaksud

Dengan @layer legacy, components, deklarasi penting di legacy mengalahkan deklarasi penting yang bersaing di components. Karena itu, memindahkan aturan lama yang penting ke layer awal dapat membuatnya lebih sulit untuk dioverride. Semua deklarasi stylesheet penting berlapis juga memiliki prioritas lebih tinggi daripada deklarasi stylesheet penting tanpa layer yang bersaing dalam origin dan konteks penulis yang sama. MDN: @layer.

Sebelum memindahkan file, cari !important di dalamnya dan periksa setiap konflik yang relevan. Jika Anda mengendalikan kedua deklarasi, tentukan apakah penanda penting masih diperlukan setelah layer diperkenalkan. Jangan menambahkan penanda penting ke setiap aturan komponen baru: itu mengubah sistem prioritas yang Anda gunakan.

Gaya inline perlu diperhatikan secara terpisah. Gaya inline normal memiliki prioritas lebih tinggi daripada aturan stylesheet penulis normal, dan gaya inline penting memiliki prioritas lebih tinggi daripada deklarasi penting penulis lainnya. Memindahkan stylesheet ke dalam layer tidak memindahkan atribut style pada elemen. MDN: Introduction to the CSS cascade.

Pernyataan yang lebih akhir tidak dapat mengubah urutan layer yang sudah ada

Layer mendapatkan urutannya dari deklarasi pertama. Membuka kembali layer bernama menambahkan aturan tanpa memindahkan posisinya. Tetapkan urutan yang diinginkan sebelum halaman pertama kali membuat layer tersebut, termasuk melalui stylesheet yang diimpor. CSS Cascading and Inheritance Module Level 5.

Untuk migrasi bertahap, pertahankan urutan awal yang singkat dan eksplisit. Pindahkan sekelompok aturan yang saling terkait, periksa aturan mana yang menang, lalu lanjutkan. Memindahkan satu aturan sambil meninggalkan salinan tanpa layer yang bersaing biasanya mempertahankan batas prioritas yang justru ingin Anda hilangkan.

Batas dukungan browser apa yang perlu diperhatikan di Mac?

MDN menandai @layer sebagai tersedia secara luas di berbagai browser sejak Maret 2022. WebKit mendokumentasikan dukungan cascade layer di Safari 15.4. Tanggal-tanggal ini menjelaskan ketersediaan fitur; tanggal tersebut tidak memastikan bahwa setiap Mac telah memasang browser yang mendukungnya. Periksa versi yang benar-benar perlu didukung oleh halaman Anda. MDN: @layer, WebKit: New WebKit Features in Safari 15.4.

Browser yang tidak memahami blok layer tidak menerapkan gaya di dalamnya sebagai aturan tanpa layer biasa. Sintaks yang tidak didukung akan dibuang sesuai aturan penguraian CSS. Karena itu, membungkus semua CSS penting di dalam layer bukanlah mekanisme fallback untuk browser lama. MDN: CSS error handling.

Jika browser tersebut masih harus didukung, pertahankan stylesheet yang sengaja tidak menggunakan layer untuk jalur yang didukung itu, lalu atasi konfliknya melalui selector dan urutan sumber. Hindari memuat salinan tanpa layer bersamaan dengan versi berlapis di browser yang mendukungnya: hal itu mengubah kaskade yang baru saja Anda rancang.

Mulailah dengan migrasi terkecil yang memberi komponen baru kendali atas properti yang dituju. Tetapkan urutan layer, tempatkan aturan lama yang bersaing ke dalam layer, hapus pemuatan duplikat tanpa layer, lalu periksa deklarasi mana yang menang. Urutan ini membuat setiap perubahan prioritas terlihat sebelum Anda memigrasikan lebih banyak CSS.

Sumber