Tetapkan default teks halaman pada body, biarkan properti yang diwariskan mengalir ke komponen, dan tentukan aturan tata letak secara sengaja. Panduan ini menunjukkan cara membuat dan memeriksa halaman HTML lokal di Mac tanpa membuat setiap elemen membatalkan aturan universal.

Mengapa aturan universal mengganggu default komponen?

Selector universal * mencocokkan setiap elemen. Karena itu, deklarasi di dalam aturan tersebut berlaku langsung pada setiap elemen yang cocok; deklarasi itu tidak sekadar menyediakan nilai untuk diwariskan oleh turunan. Selector ini juga tidak langsung mencocokkan pseudo-elemen, yang memerlukan selector seperti *::before. Selector universal.

Perhatikan fragmen CSS berikut untuk komponen yang berisi paragraf dan span teks bertingkat:

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

.tile {
  color: #245d75;
}

Tile itu sendiri menerima warna teks biru. Paragraf dan span di dalamnya menerima warna gelap dari aturan universal secara langsung. Warna komponen tidak dapat mengalir melalui deklarasi tersebut lewat pewarisan biasa. Menurut aturan default CSS, properti yang diwariskan memperoleh nilai komputasi milik induknya jika kaskade tidak menyediakan nilai untuk properti tersebut pada elemen itu. CSS Cascading and Inheritance Level 4, Defaulting.

Hal ini dapat membingungkan karena * memiliki spesifisitas nol. Spesifisitas membandingkan deklarasi yang bersaing pada elemen yang sama dalam origin dan layer kaskade yang berlaku. Deklarasi pada induk bukanlah kecocokan selector yang bersaing pada turunannya. Karena itu, membuat selector induk lebih spesifik tidak menyelesaikan masalah pewarisan ini. Spesifisitas.

Perubahan yang tepat adalah menghapus deklarasi teks universal dan menetapkan default pada body. Dengan begitu, turunan dapat mewarisinya sampai komponen atau elemen menetapkan nilai lain. MDN menyebut color sebagai properti yang diwariskan dan menjelaskan bahwa pewarisan mengikuti nilai komputasi milik induk. Pewarisan.

Default mana yang sebaiknya ditempatkan pada halaman, komponen, atau setiap elemen?

Sebelum menulis selector yang luas, tentukan apakah properti tersebut perlu mengalir melalui subpohon teks, mendeskripsikan satu kotak, atau menetapkan aturan yang disengaja untuk semua kotak. Panduan keputusan berikut menerapkan pembedaan itu pada halaman kecil yang ditulis sendiri.

Hasil yang diinginkan Penempatan yang disarankan Alasan
Teks halaman biasa menggunakan warna dasar dan tipografi yang sama body Memberi teks titik awal yang sama melalui pewarisan
Tile dan teks biasa di dalamnya menggunakan warna berbeda .tile Menetapkan nilai baru yang diwariskan di dalam komponen tersebut
Satu keterangan menggunakan warna berbeda .caption Menerapkan pengecualian pada elemen yang memerlukannya
Satu panel memiliki padding, border, atau latar belakang Class panel tersebut Menjaga dekorasi kotak tetap melekat pada pemiliknya
Kotak menggunakan model ukuran yang konsisten Aturan box-sizing yang disengaja Menetapkan konvensi ukuran secara eksplisit
Margin default judul mudah diganti Selector judul yang ditargetkan, opsional dibungkus dalam :where() Membatasi default hanya pada elemen yang dimaksud

Pewarisan bergantung pada properti. Periksa entri Inherited pada referensi properti alih-alih berasumsi bahwa setiap deklarasi pada body mencapai turunannya. Misalnya, border tidak diwariskan secara default. Pewarisan.

Aturan ukuran universal tetap dapat digunakan. Dengan border-box, lebar yang dideklarasikan untuk sebuah elemen mencakup padding dan bordernya; margin tetap berada di luar lebar tersebut. Ini adalah keputusan khusus tentang model kotak, bukan alasan untuk menerapkan setiap default halaman secara universal. box-sizing.

Buat demonstrasi lokal lengkap di Mac Anda

Gunakan TextEdit dalam mode teks biasa atau editor kode yang sudah ada. Di TextEdit, pilih File > New, lalu Format > Make Plain Text. Tempel dokumen lengkap di bawah ini, pilih File > Save, lalu beri nama page-defaults.html. Jika diminta, pilih Use .html. Apple mendokumentasikan alur kerja ini dalam panduan HTML TextEdit.

Contoh ini menggunakan label sintetis dan bentuk yang digambar dengan CSS. Contoh ini merupakan satu dokumen lengkap dengan stylesheet tertanam, jadi tidak ada berkas tambahan yang perlu disiapkan. Kodenya sudah diperiksa di sini; tampilannya belum dijalankan di browser 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 di browser Anda. Saat membuka kembali sumber di TextEdit, pilih TextEdit > Settings > Open and Save, lalu aktifkan Display HTML files as HTML code instead of formatted text jika Anda ingin TextEdit menampilkan markup secara konsisten. Bekerja dengan dokumen HTML di TextEdit pada Mac.

Periksa batas pewarisan dengan tiga pengeditan

Pemeriksaan ini mengubah dokumen menjadi latihan diagnostik kecil. Simpan sumbernya dan muat ulang browser setelah setiap pengeditan. Simpan salinan dokumen asli atau batalkan setiap perubahan sebelum mencoba perubahan berikutnya.

  1. Ubah hanya warna body menjadi #4b465f. Teks di sekitar Label A dan Label E seharusnya berubah. Tile tetap menggunakan warnanya sendiri.
  2. Kembalikan warna halaman, lalu ubah hanya .tile menjadi color: #526637. Teks judul dan paragraf biasa di dalamnya seharusnya mengikuti perubahan tersebut, termasuk Label C. Caption D tetap menggunakan warna eksplisitnya.
  3. Kembalikan warna tile, lalu tambahkan sementara * { color: #303840; } di awal stylesheet. Paragraf yang berisi Label C kini menerima deklarasi langsung tersebut. Hapus aturan sementara itu setelahnya.

Pemeriksaan ini menunjukkan perbedaan antara komponen yang menetapkan nilai untuk diwariskan dan turunan yang menerima deklarasinya sendiri. Perilaku teks yang diharapkan mengikuti aturan pewarisan dan penetapan default dalam spesifikasi.

Apa kontrak antara halaman HTML dan stylesheet-nya?

Pisahkan pemuatan sumber daya dari perilaku selector. Contoh ini menyematkan CSS di dalam elemen style. Jika Anda lebih suka stylesheet terpisah, pindahkan hanya isi elemen tersebut ke berkas teks biasa bernama page-defaults.css, yang disimpan di samping berkas HTML. Ganti seluruh elemen style dengan baris berikut di dalam head. Ini adalah fragmen pengganti, bukan dokumen lengkap lainnya.

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

Jenis tautan stylesheet menandai sumber daya CSS eksternal yang digunakan untuk menyajikan dokumen. Nama berkas pada href harus menunjuk ke berkas yang benar-benar Anda simpan; deklarasi tersebut tidak membuat berkas itu. HTML Standard mendefinisikan hubungan ini dalam Jenis tautan: stylesheet.

Untuk contoh ini, kontraknya sederhana: HTML menyediakan elemen dan class, sedangkan CSS menyediakan tampilannya. Jika Anda mengganti nama .tile di stylesheet, class yang sesuai di HTML juga harus diperbarui. Jika berkas CSS dipindahkan, referensi sumber dayanya harus diperbarui. Tidak satu pun perubahan tersebut memerlukan selector yang lebih kuat.

Jika versi eksternal tampak tanpa gaya, pertama-tama pastikan berkas CSS ada dengan nama yang diharapkan dan isinya berupa CSS, bukan seluruh dokumen HTML. Kembali ke versi tertanam untuk mengisolasi kesalahan pemuatan sumber daya sebelum mengubah kaskade.

Kapan sebaiknya menggunakan :where() atau cascade layer?

Gunakan fitur ini jika memang membantu menyelesaikan masalah tambahan. Contoh lengkap di atas tidak bergantung pada keduanya.

Gunakan :where() untuk default terarah dengan spesifisitas nol

Misalkan halaman bertambah besar dan mencakup beberapa tingkat judul. Fragmen stylesheet opsional ini menetapkan spasi bersama sekaligus memudahkan selector judul biasa untuk menggantinya:

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

h2 {
  margin-bottom: 1rem;
}

Selector :where() secara keseluruhan memiliki spesifisitas nol, termasuk argumennya. Namun, mengganti * dengan :where(*) tidak memperbaiki masalah warna sebelumnya: selector itu tetap mencocokkan setiap elemen dan memberikan deklarasi langsung. Gunakan pewarisan untuk mengatasi masalah tersebut. MDN mencatat bahwa :where() tersedia secara luas di berbagai browser sejak Januari 2021; periksa tabel kompatibilitasnya jika Anda mendukung browser yang lebih lama. Pseudo-class :where().

Untuk browser yang tidak mendukung :where(), gunakan daftar selector biasa seperti h1, h2, h3 untuk default spasi ini, lalu tempatkan pengecualian dengan spesifisitas yang sama di bagian akhir stylesheet dan layer yang sama. Dengan demikian default tetap terarah, meskipun spesifisitasnya tidak lagi nol. Spesifisitas.

Gunakan layer ketika kelompok aturan memerlukan urutan yang eksplisit

Untuk stylesheet yang lebih besar, fragmen opsional ini menunjukkan deklarasi urutan layer. Fragmen ini terpisah dari contoh lengkap, bukan pengganti seluruh CSS-nya.

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

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

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

Untuk deklarasi normal dari penulis, layer yang muncul belakangan mengungguli layer yang lebih awal; deklarasi normal tanpa layer mengungguli deklarasi ber-layer. Deklarasi penting membalik urutan layer, sehingga menambahkan !important mengubah susunan tersebut. Layer mengatur aturan yang saling bersaing; layer tidak membuat anak yang diberi gaya langsung mewarisi nilai induknya. Aturan @layer.

MDN mencatat bahwa @layer tersedia di berbagai browser sejak Maret 2022. Jika browser target yang lebih lama tidak mendukungnya, letakkan gaya penting di luar blok layer dan gunakan pendekatan tanpa layer yang ditunjukkan dalam contoh lengkap. Jangan menempatkan satu-satunya salinan gaya yang diperlukan di dalam fitur yang tidak didukung. Dukungan cascade layer.

Bagaimana cara memperbaiki stylesheet yang ada tanpa menambahkan lebih banyak override?

Tangani satu properti dalam satu waktu. Untuk masalah warna teks, cari aturan luas yang menetapkan warna secara langsung pada elemen-elemen turunan. Hapus deklarasi tersebut dari aturan universal, tetapkan nilai halaman pada body, dan pertahankan warna komponen pada elemen akar komponennya. Pertahankan deklarasi tingkat elemen hanya jika desain memerlukan pengecualian.

Kemudian ulangi tiga pengeditan dari demonstrasi. Jika teks komponen biasa masih tidak mengikuti induknya, cari deklarasi yang menargetkan elemen turunan tersebut. Jika mengubah border komponen tidak mengubah border turunannya, itu memang diharapkan: pewarisan border berbeda dari pewarisan warna teks. Pewarisan.

Default yang mudah dirawat memiliki pemilik yang jelas. Letakkan tipografi halaman pada batas halaman, tampilan komponen pada batas komponen, dan pengecualian yang disengaja pada elemen yang memerlukannya. Cadangkan deklarasi universal untuk keputusan yang memang ingin Anda terapkan ke setiap elemen yang cocok, lalu periksa batas-batas tersebut dengan halaman lokal kecil.

Sumber