Untuk memperkenalkan lapisan kaskad dalam CSS sedia ada, tentukan dahulu di mana peraturan lama patut diletakkan. Peraturan biasa yang tidak berlapis mengatasi setiap lapisan bernama, jadi penggantian berlapis yang baharu hanya akan berfungsi selepas peraturan legasi yang bersaing dipindahkan ke lapisan berkeutamaan lebih rendah.

Panduan ini ditujukan kepada seseorang yang menyunting halaman web yang ditulis sendiri pada Mac dan menyemaknya dalam pelayar desktop. Tugas khususnya ialah meletakkan helaian gaya sedia ada di bawah gaya komponen baharu sambil mengekalkan laluan migrasi yang mudah difahami. Contoh-contohnya menggunakan fail setempat, label rekaan dan struktur CSS yang ringkas.

Mengapa gaya berlapis baharu kalah kepada peraturan sedia ada?

Bagi pengisytiharan biasa yang bersaing dalam helaian gaya pengarang, CSS yang tidak berlapis mengatasi CSS dalam mana-mana lapisan eksplisit. Pemilih yang lebih khusus atau kedudukan yang lebih lewat dalam lapisan tidak dapat mengatasi batasan itu. Spesifikasi CSS menunjukkan tingkah laku ini dengan peraturan tidak berlapis mengatasi peraturan berlapis yang lebih khusus. CSS Cascading and Inheritance Level 5.

Pertimbangkan cebisan CSS ini, yang menyasarkan elemen dengan kelas tile:

.tile {
  background-color: #b8bdc5;
}

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

Latar belakang kekal kelabu. Menamakan lapisan itu overrides, mengalihkan bloknya lebih jauh ke bawah dalam fail atau meningkatkan kekhususan pemilihnya tidak mengubah keutamaan peraturan biasa yang tidak berlapis. Nama lapisan tidak mempunyai makna terbina dalam; tertib yang diisytiharkan menentukan hubung kait antara lapisan. MDN: Cascade layers.

Jadual keputusan berikut mengandaikan pengisytiharan helaian gaya yang bersaing berada dalam asal dan konteks pengarang yang sama, tanpa gaya sebaris, animasi atau peralihan yang mempengaruhi sifat tersebut. Baca setiap baris daripada keutamaan lebih rendah kepada lebih tinggi.

Jenis pengisytiharan Keutamaan rendah → tinggi
Biasa Lapisan yang diisytiharkan dahulu → lapisan yang diisytiharkan kemudian → peraturan tidak berlapis
!important Peraturan tidak berlapis → lapisan yang diisytiharkan kemudian → lapisan yang diisytiharkan dahulu

Keutamaan lapisan ditentukan sebelum kekhususan pemilih. Dalam lapisan yang menang, kekhususan masih penting; tertib sumber boleh menentukan keputusan bagi pengisytiharan yang sama keutamaannya. Pembalikan tertib bagi pengisytiharan penting bermakna migrasi perlu mempertimbangkan peraturan biasa dan penting secara berasingan. MDN: Cascade layers.

Sempadan migrasi yang manakah patut anda pilih?

Mulakan dengan satu elemen dan satu sifat yang perlu dikawal oleh CSS baharu. Periksa pengisytiharan yang menang sekarang, kenal pasti helaian gayanya dan tentukan sama ada anda boleh mengubah fail itu atau cara halaman memuatkannya. Ini menetapkan sempadan migrasi berguna yang paling kecil.

Situasi anda Langkah seterusnya yang praktikal Kesannya
CSS sedia ada mesti mengekalkan keutamaannya Biarkan ia tidak berlapis dan tambahkan nilai lalai berlapis yang berkeutamaan lebih rendah Lapisan baharu membekalkan nilai apabila tiada peraturan lebih kuat yang bersaing
Anda boleh menyunting CSS sedia ada Letakkan peraturan legasi yang layak di dalam @layer legacy Lapisan kemudian boleh mengatasi pengisytiharan legasi biasa
Anda boleh mengubah titik masuk helaian gaya Import fail sedia ada dengan layer(legacy) Helaian gaya yang diimport menyertai lapisan itu tanpa perlu menulis semula pemilihnya
Anda tidak boleh mengubah CSS legasi yang bersaing atau cara ia dimuatkan Kekalkan sementara penggantian yang diperlukan dalam keadaan tidak berlapis Anda masih perlu menangani kekhususan dan faktor kaskad lain

Pilihan ini selaras dengan tiga mekanisme lapisan yang didokumenkan dalam CSS: pernyataan mengisytiharkan nama lapisan, blok meletakkan peraturan dalam lapisan, dan import berlapis meletakkan helaian gaya yang diimport dalam lapisan. Pernyataan sahaja tidak memindahkan peraturan sedia ada. CSS Cascading and Inheritance Level 5: Declaring Cascade Layers.

Bagi helaian gaya yang kecil, membungkus peraturan biasanya mungkin lebih mudah. Bagi fail luaran sedia ada, import berlapis mewujudkan sempadan yang jelas. Jangan letakkan peraturan @import sedia ada di dalam blok @layer: import ialah peraturan peringkat teratas dengan sekatan kedudukan. MDN: @import.

Migrasi yang disyorkan di bawah mengimport fail legasi ke dalam lapisan bernama. Ini mengubah keutamaannya berbanding helaian gaya lain, jadi periksa CSS lain yang dimuatkan sebelum menggunakan perubahan yang sama pada halaman selain halaman contoh.

Bagaimanakah anda membina contoh setempat yang lengkap pada Mac?

Cipta folder yang mengandungi tiga fail teks biasa berikut. Gunakan penyunting kod dan kekalkan sambungan .html dan .css. Fail-fail ini tidak memerlukan pakej, skrip, fon atau aset yang dimuat turun. Namanya ialah sumber contoh setempat.

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 memaut kepada styles.css. HTML menggunakan rel="stylesheet" dan href untuk mengaitkan helaian gaya luaran dengan halaman. HTML Standard semasa tidak mentakrifkan atribut layer untuk elemen link; tetapkan sumber kepada lapisan melalui CSS. HTML Standard: The link element.

Simpan helaian gaya lengkap ini sebagai legacy.css. Ia mewakili peraturan sedia ada yang pemilihnya kekal sama:

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 helaian gaya titik masuk yang 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 dalam Safari atau Firefox desktop terkini. Hasil yang dijangka ialah bulatan berwarna teal di bawah label Tile A. Lapisan legasi membekalkan dimensinya, manakala lapisan komponen yang kemudian membekalkan latar belakang dan bentuk bulat. Pemilih satu kelasnya mengatasi pemilih ID legasi kerana pengisytiharan tersebut bersaing merentas lapisan. MDN: @layer.

Fail titik masuk menetapkan tertib lapisan terlebih dahulu, mengekalkan import sebelum blok, kemudian menambah peraturan komponen. Ini mematuhi sintaks dan peraturan kedudukan import yang didokumenkan. Pernyataan lapisan boleh mendahului import; blok lapisan tidak boleh. MDN: @import.

Apakah yang patut anda ubah dalam halaman sedia ada?

Gantikan rujukan helaian gaya langsung halaman dengan helaian gaya titik masuk baharu apabila menggunakan susunan ini. Jika halaman masih memuatkan legacy.css secara langsung selain mengimportnya ke dalam lapisan, pemuatan langsung itu membekalkan pengisytiharan tidak berlapis yang boleh menggagalkan migrasi.

Gunakan contoh ini untuk menjangkakan kegagalan: tambah pautan helaian gaya langsung yang berasingan kepada legacy.css, dan pengisytiharan biasanya boleh mengembalikan segi empat sama kelabu. Mengalih keluar pemuatan langsung itu meninggalkan peraturan legasi dalam lapisan yang sepatutnya. Jangkaan ini selaras dengan kedudukan peraturan tidak berlapis selepas lapisan eksplisit dalam tertib keutamaan biasa yang dinyatakan dalam spesifikasi. CSS Cascading and Inheritance Module Level 5: Layer Ordering.

Kekalkan ketiga-tiga fail bersama-sama untuk contoh ini. Semasa menyesuaikan pendekatan tersebut, kekalkan syarat sumber sedia ada seperti sekatan media, dan pastikan setiap helaian gaya yang dirujuk berjaya dimuatkan sebelum mendiagnosis konflik kaskad.

Bagaimanakah anda boleh mengesahkan migrasi dalam Firefox pada macOS?

Buka kotak alat pembangun Firefox dengan Command–Option–I dan pilih Inspector. Pilih bentuk contoh dalam pepohon dokumen, kemudian periksa paparan Rules. Mozilla mendokumenkan pintasan kotak alat pada Mac dan kawalan pemeriksaan CSS dalam Inspector. All keyboard shortcuts, Examine and edit CSS.

Periksa contoh itu satu sifat pada satu masa:

  1. Cari background-color. Pengisytiharan komponen sepatutnya mengatasi nilai kelabu legasi.
  2. Cari border-radius. Nilai komponen sepatutnya menghasilkan bulatan.
  3. Periksa width dan height. Nilainya sepatutnya masih datang daripada fail legasi.
  4. Nyahdayakan pengisytiharan latar belakang komponen buat sementara waktu. Warna kelabu legasi sepatutnya kelihatan sementara bentuknya kekal bulat.

Firefox memangkah pengisytiharan yang diatasi dan menyediakan kotak semak untuk menyahdayakannya buat sementara waktu. Firefox juga memautkan peraturan kepada fail sumbernya. Gunakan kawalan tersebut untuk mengenal pasti pengisytiharan yang bersaing dan bukannya menganggap setiap hasil yang tidak dijangka sebagai masalah pemilih. Mozilla: Examine and edit CSS.

Bagi halaman sebenar, ulang pemeriksaan ini untuk keadaan yang anda ubah: tetingkap yang lebih sempit, syarat media yang berkaitan dan variasi komponen. Simpan suntingan kekal dalam fail sumber dan muat semula; perubahan sementara melalui pemeriksaan berguna untuk diagnosis.

Apakah yang mungkin berubah secara tidak dijangka semasa migrasi?

Pengisytiharan penting membalikkan tertib yang dimaksudkan

Dengan @layer legacy, components, pengisytiharan penting dalam legacy mengatasi pengisytiharan penting yang bersaing dalam components. Oleh itu, memindahkan peraturan legasi yang penting ke dalam lapisan awal boleh menyukarkannya untuk diatasi. Semua pengisytiharan helaian gaya berlapis yang penting juga mengatasi pengisytiharan helaian gaya tidak berlapis yang penting dan bersaing dalam asal dan konteks pengarang yang sama. MDN: @layer.

Sebelum memindahkan fail, cari !important di dalamnya dan periksa setiap konflik yang berkaitan. Jika anda mengawal kedua-dua pengisytiharan, tentukan sama ada penggunaan tanda penting masih diperlukan selepas memperkenalkan lapisan. Jangan tambah tanda penting pada setiap peraturan komponen baharu: tindakan itu mengubah sistem keutamaan yang anda gunakan.

Gaya sebaris memerlukan perhatian berasingan. Gaya sebaris biasa mengatasi peraturan helaian gaya pengarang yang biasa, dan gaya sebaris penting mengatasi pengisytiharan pengarang penting yang lain. Memindahkan helaian gaya ke dalam lapisan tidak memindahkan atribut gaya pada elemen. MDN: Introduction to the CSS cascade.

Pernyataan yang lebih lewat tidak boleh menyusun semula lapisan sedia ada

Lapisan mengikut tertib pengisytiharan pertamanya. Membuka semula lapisan bernama menambah peraturan tanpa mengalihkannya. Letakkan tertib yang dimaksudkan sebelum halaman mencipta lapisan tersebut buat kali pertama, termasuk melalui helaian gaya yang diimport. CSS Cascading and Inheritance Module Level 5.

Untuk migrasi berperingkat, pastikan tertib awal ringkas dan jelas. Pindahkan kumpulan peraturan yang padu, periksa pengisytiharan yang menang, kemudian teruskan. Memindahkan satu peraturan sambil meninggalkan salinan tidak berlapis yang bersaing biasanya mengekalkan batas keutamaan yang anda ingin hapuskan.

Had sokongan pelayar manakah yang penting pada Mac?

MDN menandakan @layer sebagai tersedia secara meluas dalam pelayar sejak Mac 2022. WebKit mendokumenkan sokongan lapisan kaskad dalam Safari 15.4. Tarikh ini menerangkan ketersediaan ciri tersebut; tarikh ini tidak memastikan setiap Mac telah memasang pelayar yang menyokongnya. Semak versi yang benar-benar perlu disokong oleh halaman anda. MDN: @layer, WebKit: New WebKit Features in Safari 15.4.

Pelayar yang tidak memahami blok lapisan tidak menggunakan gaya di dalamnya sebagai peraturan biasa yang tidak berlapis. Sintaks yang tidak disokong digugurkan mengikut peraturan penghuraian CSS. Oleh itu, membungkus semua CSS penting dalam lapisan bukanlah kaedah sandaran untuk pelayar lama. MDN: CSS error handling.

Jika pelayar tersebut masih perlu disokong, kekalkan helaian gaya tidak berlapis yang dirancang khusus untuk laluan sokongan itu dan selesaikan konfliknya melalui pemilih dan tertib sumber. Elakkan memuatkan pendua tidak berlapis bersama versi berlapis dalam pelayar yang menyokongnya: tindakan itu mengubah kaskad yang baru sahaja anda reka.

Mulakan dengan migrasi terkecil yang memberikan komponen baharu kawalan ke atas sifat yang dimaksudkan. Tetapkan tertib lapisan, letakkan peraturan legasi yang bersaing ke dalam lapisan, alih keluar pemuatan pendua yang tidak berlapis dan periksa pengisytiharan yang menang. Urutan itu menjadikan setiap perubahan keutamaan jelas sebelum anda memigrasikan lebih banyak CSS.

Sumber