Tetapkan nilai lalai teks halaman pada body, biarkan sifat yang diwarisi mengalir ke dalam komponen, dan sasarkan peraturan reka letak dengan sengaja. Panduan ini menunjukkan cara membina dan menyemak halaman HTML setempat pada Mac tanpa memaksa setiap elemen membatalkan peraturan sejagat.

Mengapakah peraturan sejagat mengganggu nilai lalai komponen?

Pemilih sejagat * sepadan dengan setiap elemen. Oleh itu, pengisytiharan dalam peraturan itu terpakai secara langsung pada setiap elemen yang sepadan; ia bukan sekadar menyediakan nilai untuk diwarisi oleh keturunan. Ia juga tidak sepadan secara langsung dengan unsur pseudo, yang memerlukan pemilih seperti *::before. Pemilih sejagat.

Pertimbangkan fragmen CSS ini untuk komponen yang mengandungi perenggan dan span teks bersarang:

/* Illustrative fragment: assumes a .tile with text descendants. */
* {
  color: #303840;
}

.tile {
  color: #245d75;
}

Tile itu sendiri menerima warna teks biru. Perenggan dan span menerima warna gelap daripada peraturan sejagat secara langsung. Warna komponen tidak dapat mengalir melalui pengisytiharan tersebut melalui pewarisan biasa. Mengikut peraturan penetapan nilai lalai CSS, sifat yang diwarisi memperoleh nilai terhitung daripada induknya apabila lata tidak membekalkan nilai untuk sifat itu pada elemen berkenaan. CSS Cascading and Inheritance Level 4, Penetapan Nilai Lalai.

Hal ini boleh mengelirukan kerana * mempunyai kekhususan sifar. Kekhususan membandingkan pengisytiharan yang bersaing pada elemen yang sama dalam asal dan lapisan lata yang berkenaan. Pengisytiharan pada induk bukan padanan pemilih yang bersaing pada anaknya. Oleh itu, menjadikan pemilih induk lebih khusus tidak menyelesaikan masalah pewarisan ini. Kekhususan.

Perubahan yang berguna ialah membuang pengisytiharan teks sejagat dan menetapkan nilai lalai pada body. Keturunan kemudian boleh mewarisinya sehingga komponen atau elemen menetapkan nilai lain. MDN mengenal pasti color sebagai sifat yang diwarisi dan menerangkan bahawa pewarisan mengikut nilai terhitung induk. Pewarisan.

Nilai lalai manakah patut diletakkan pada halaman, komponen atau setiap elemen?

Sebelum menulis pemilih yang luas, tentukan sama ada sifat itu patut mengalir melalui pepohon teks, menerangkan satu kotak, atau menetapkan peraturan yang disengajakan untuk semua kotak. Panduan keputusan berikut menerapkan perbezaan itu pada halaman kecil yang ditulis sendiri.

Hasil yang diingini Peletakan yang disyorkan Sebab
Teks biasa halaman berkongsi warna asas dan tipografi body Memberikan teks titik permulaan bersama melalui pewarisan
Tile dan teks biasanya berkongsi warna yang berbeza .tile Menetapkan nilai diwarisi baharu dalam komponen itu
Satu kapsyen mempunyai warna yang berbeza .caption Menggunakan pengecualian pada elemen yang memerlukannya
Satu panel mempunyai padding, sempadan atau latar belakang Kelas panel itu Mengekalkan hiasan kotak pada pemiliknya
Kotak menggunakan model saiz yang konsisten Peraturan box-sizing yang disengajakan Menetapkan konvensyen saiz secara eksplisit
Margin lalai tajuk mudah digantikan Pemilih tajuk yang disasarkan, pilihan dibalut dalam :where() Mengehadkan nilai lalai kepada elemen yang dimaksudkan

Pewarisan bergantung pada sifat. Rujuk entri Inherited dalam rujukan sifat dan jangan anggap setiap pengisytiharan pada body sampai kepada keturunannya. Contohnya, sempadan tidak diwarisi secara lalai. Pewarisan.

Peraturan saiz sejagat masih boleh sesuai. Dengan border-box, lebar yang diisytiharkan bagi sesuatu elemen merangkumi padding dan sempadannya; margin kekal di luar lebar itu. Ini ialah keputusan model kotak yang khusus, bukannya alasan untuk menggunakan setiap nilai lalai halaman secara sejagat. box-sizing.

Bina demonstrasi setempat yang lengkap pada Mac anda

Gunakan TextEdit dalam mod teks biasa atau editor kod sedia ada. Dalam TextEdit, pilih File > New, kemudian Format > Make Plain Text. Tampal dokumen lengkap di bawah, pilih File > Save, dan namakannya page-defaults.html. Jika diminta, pilih Use .html. Apple mendokumentasikan aliran kerja ini dalam panduan HTML TextEdit.

Contoh ini menggunakan label rekaan dan bentuk yang dilukis dengan CSS. Ia ialah satu dokumen lengkap dengan helaian gaya terbenam, jadi tiada fail tambahan perlu disediakan. Kod ini telah diperiksa di sini; paparannya tidak dijalankan dalam pelayar Mac.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page defaults demonstration</title>
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: #303840;
      background-color: #f4f5f6;
    }

    main {
      max-width: 44rem;
      margin: 0 auto;
      padding: 2rem 1rem;
    }

    h1 {
      line-height: 1.2;
    }

    .tile {
      margin: 1.5rem 0;
      padding: 1.25rem;
      border: 2px solid currentColor;
      border-radius: 0.75rem;
      color: #245d75;
      background-color: #ffffff;
    }

    .tile h2 {
      margin-top: 0;
    }

    .shape {
      width: 4rem;
      height: 4rem;
      background-color: currentColor;
    }

    .shape--round {
      border-radius: 50%;
    }

    .caption {
      color: #66523c;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape notes</h1>
    <p>Page sample: <span>Label A</span>.</p>

    <section class="tile">
      <h2>Tile B</h2>
      <div class="shape shape--round" aria-hidden="true"></div>
      <p>Component sample: <span>Label C</span>.</p>
      <p class="caption">Caption D has its own text color.</p>
    </section>

    <p>Page sample: <span>Label E</span>.</p>
  </main>
</body>
</html>

Buka page-defaults.html dalam pelayar anda. Apabila membuka semula sumber dalam TextEdit, pilih TextEdit > Settings > Open and Save dan aktifkan Display HTML files as HTML code instead of formatted text jika anda mahu TextEdit memaparkan markup secara konsisten. Bekerja dengan dokumen HTML dalam TextEdit pada Mac.

Semak sempadan pewarisan dengan tiga suntingan

Semakan ini menjadikan dokumen tersebut latihan diagnostik ringkas. Simpan sumber dan muat semula pelayar selepas setiap suntingan. Simpan salinan dokumen asal atau buat asal setiap perubahan sebelum mencuba yang seterusnya.

  1. Tukar warna body sahaja kepada #4b465f. Teks di sekitar Label A dan Label E sepatutnya berubah. Tile itu mengekalkan warnanya sendiri.
  2. Pulihkan warna halaman, kemudian tukar .tile sahaja kepada color: #526637. Teks tajuk dan perenggannya yang biasa sepatutnya mengikut perubahan itu, termasuk Label C. Caption D mengekalkan warna eksplisitnya.
  3. Pulihkan warna tile, kemudian tambah * { color: #303840; } buat sementara waktu pada permulaan helaian gaya. Perenggan yang mengandungi Label C kini menerima pengisytiharan langsung itu. Buang peraturan sementara tersebut selepas itu.

Semakan ini menunjukkan perbezaan antara komponen yang menetapkan nilai diwarisi dengan keturunan yang menerima pengisytiharan tersendiri. Tingkah laku teks yang dijangka mengikut peraturan pewarisan dan penetapan nilai lalai dalam spesifikasi.

Apakah kontrak antara halaman HTML dengan helaian gayanya?

Asingkan pemuatan sumber daripada tingkah laku pemilih. Contoh ini membenamkan CSS dalam elemen style. Jika anda memilih helaian gaya berasingan, pindahkan kandungan elemen itu sahaja ke dalam fail teks biasa bernama page-defaults.css, yang disimpan bersebelahan fail HTML. Gantikan seluruh elemen style dengan baris berikut di dalam head. Ini ialah fragmen penggantian, bukannya satu lagi dokumen lengkap.

<link rel="stylesheet" href="page-defaults.css">

Jenis pautan stylesheet mengenal pasti sumber CSS luaran yang digunakan untuk memaparkan dokumen. Nama fail dalam href mesti merujuk kepada fail yang benar-benar anda simpan; pengisytiharan itu tidak mencipta fail tersebut. HTML Standard mentakrifkan hubungan ini dalam Jenis pautan: stylesheet.

Bagi contoh ini, kontrak yang terhasil adalah mudah: HTML menyediakan elemen dan kelas, manakala CSS menyediakan persembahannya. Menamakan semula .tile dalam helaian gaya memerlukan kelas yang sepadan dalam HTML dikemas kini. Memindahkan fail CSS memerlukan rujukan sumbernya dikemas kini. Tiada perubahan itu memerlukan pemilih yang lebih kuat.

Jika versi luaran kelihatan tanpa gaya, mula-mula pastikan fail CSS wujud dengan nama yang dijangka dan kandungannya ialah CSS, bukannya keseluruhan dokumen HTML di sekelilingnya. Kembali kepada versi terbenam untuk mengasingkan kesilapan pemuatan sumber sebelum mengubah lata.

Bilakah anda patut menggunakan :where() atau lapisan lata?

Gunakan ciri ini apabila ia menyelesaikan masalah tambahan. Contoh lengkap di atas tidak bergantung pada mana-mana ciri tersebut.

Gunakan :where() untuk nilai lalai tersasar dengan kekhususan sifar

Katakan halaman itu berkembang hingga merangkumi beberapa aras tajuk. Fragmen helaian gaya pilihan ini menetapkan jarak bersama sambil membolehkan pemilih tajuk biasa menggantikannya dengan mudah:

/* Optional fragment: add to the example stylesheet. */
:where(h1, h2, h3) {
  margin-bottom: 0.75rem;
}

h2 {
  margin-bottom: 1rem;
}

Keseluruhan pemilih :where() mempunyai kekhususan sifar, termasuk argumennya. Tetapi menggantikan * dengan :where(*) tidak menyelesaikan masalah warna tadi: ia masih sepadan dengan setiap elemen dan membekalkan pengisytiharan langsung. Gunakan pewarisan untuk menangani masalah itu. MDN mendokumenkan :where() sebagai tersedia secara meluas merentas pelayar sejak Januari 2021; semak jadual keserasiannya jika menyokong pelayar lama. Pseudo-kelas :where().

Bagi pelayar yang tidak menyokong :where(), gunakan senarai pemilih biasa seperti h1, h2, h3 untuk nilai lalai jarak ini, kemudian letakkan pengecualian dengan kekhususan setara selepasnya dalam helaian gaya dan lapisan yang sama. Ini mengekalkan nilai lalai tersasar, walaupun kekhususannya tidak lagi sifar. Kekhususan.

Gunakan lapisan apabila kumpulan peraturan memerlukan susunan yang jelas

Bagi helaian gaya yang lebih besar, fragmen pilihan ini menunjukkan susunan lapisan yang diisytiharkan. Ia berasingan daripada contoh lengkap dan bukan pengganti bagi keseluruhan CSSnya.

/* Optional fragment for browsers supporting cascade layers. */
@layer defaults, components;

@layer defaults {
  p {
    margin-bottom: 1rem;
  }
}

@layer components {
  .tile p {
    margin-bottom: 0.5rem;
  }
}

Bagi pengisytiharan pengarang biasa, lapisan yang lebih kemudian mengatasi lapisan yang lebih awal; pengisytiharan biasa yang tidak berlapis mengatasi pengisytiharan berlapis. Pengisytiharan penting membalikkan susunan lapisan, jadi penambahan !important mengubah susunan itu. Lapisan menyusun peraturan yang bersaing; lapisan tidak menjadikan anak yang digayakan secara langsung mewarisi nilai induknya. Peraturan @layer.

MDN merekodkan ketersediaan merentas pelayar bagi @layer sejak Mac 2022. Jika pelayar sasaran yang lebih lama tidak menyokongnya, kekalkan persembahan penting di luar blok lapisan dan gunakan pendekatan tanpa lapisan yang ditunjukkan dalam contoh lengkap. Jangan letakkan satu-satunya salinan gaya yang diperlukan dalam ciri yang tidak disokong. Sokongan lapisan lata.

Bagaimanakah anda membaiki helaian gaya sedia ada tanpa menambah lebih banyak penggantian?

Tangani satu sifat pada satu masa. Bagi masalah warna teks, cari peraturan luas yang menetapkan warna secara langsung pada keturunan. Buang pengisytiharan itu daripada peraturan sejagat, tetapkan nilai halaman pada body, dan kekalkan warna komponen pada akar komponennya. Kekalkan pengisytiharan pada aras elemen hanya apabila reka bentuk memerlukan pengecualian.

Kemudian ulangi tiga suntingan daripada demonstrasi itu. Jika teks biasa komponen masih tidak mengikut induknya, cari pengisytiharan yang menyasarkan keturunan tersebut. Jika mengubah sempadan komponen tidak mengubah mana-mana sempadan keturunannya, itu memang dijangka: pewarisan sempadan berbeza daripada pewarisan warna teks. Pewarisan.

Nilai lalai yang mudah diselenggara mempunyai pemilik yang jelas. Letakkan tipografi halaman pada sempadan halaman, persembahan komponen pada sempadan komponen, dan pengecualian yang disengajakan pada elemen yang memerlukannya. Hadkan pengisytiharan sejagat kepada keputusan yang memang anda mahu terpakai pada setiap elemen yang sepadan, kemudian sahkan sempadan itu dengan halaman setempat yang ringkas.

Sumber