Browser: HTML, CSS, DOM, dan Aksesibilitas · 3/8

Dasar CSS: box model, cascade, specificity

Kenapa style-mu diabaikan, dan tiga aturan yang menjelaskannya.

Baca 30 menit

Setelah pelajaran ini kamu bisa

Menjelaskan box model dan kenapa `border-box` itu default yang masuk akal
Menghitung aturan mana yang menang saat beberapa aturan berlaku
Menjelaskan cascade, inheritance, dan specificity secara berurutan
Men-debug "style saya diabaikan" secara metodis

Hampir semua rasa frustrasi terhadap CSS berakar pada dua hal: kotaknya berukuran berbeda dari dugaanmu, atau aturan lain yang menang dari yang kamu duga. Keduanya punya aturan yang presisi dan bisa dipelajari.

Box model

text

┌─────────────────────────────────────┐
│ margin        (outside, transparent)│
│  ┌───────────────────────────────┐  │
│  │ border                        │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │ padding                 │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │ content           │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Pertanyaan yang menjegal semua orang: kalau width: 300px dan padding: 20px, berapa lebar elemennya? Tergantung box-sizing.

`box-sizing`	`width` berarti	300px + padding 20px + border 2px
`content-box` (default CSS)	Hanya kontennya	Lebarnya 344px di layar
`border-box` (yang kamu inginkan)	Konten + padding + border	Lebarnya 300px di layar

Aturan mana yang menang

Saat beberapa aturan mengatur property yang sama, browser memutuskan dengan urutan ini. Turuti daftarnya; langkah pertama yang membedakan keduanya itulah yang menang.

Asal dan tingkat kepentingan. Deklarasi !important mengalahkan yang biasa.
Specificity. Selector yang lebih spesifik mengalahkan yang kurang spesifik.
Urutan penulisan. Kalau semua di atas seri, aturan yang ditulis terakhir menang.

Specificity adalah tiga angka, dibandingkan dari kiri ke kanan seperti nomor versi: (id, class, elemen). style inline mengalahkan semua selector.

Coba sendiri

Algoritma specificity. Inilah yang dipakai DevTools untuk menentukan aturan mana yang ditampilkan dengan garis coret.

// Returns [ids, classes, elements] for a simple selector.
function specificity(selector) {
  let ids = 0, classes = 0, elements = 0;

// Pseudo-elements (::before) count as elements; pseudo-classes (:hover) as classes.
  const tokens = selector
    .replace(/::[a-z-]+/g, (m) => { elements++; return " "; })
    .replace(/#[\w-]+/g, () => { ids++; return " "; })
    .replace(/\.[\w-]+/g, () => { classes++; return " "; })
    .replace(/\[[^\]]+\]/g, () => { classes++; return " "; })
    .replace(/:[a-z-]+(\([^)]*\))?/g, () => { classes++; return " "; })
    .split(/[\s>+~]+/)
    .filter((t) => t && t !== "*");

elements += tokens.length;    // whatever is left is a tag name
  return [ids, classes, elements];
}

function compare(a, b) {
  for (let i = 0; i < 3; i++) {
    if (a[i] !== b[i]) return a[i] > b[i] ? 1 : -1;
  }
  return 0;                     // a tie: source order decides
}

const selectors = [
  "p",
  "ul li",
  ".card",
  "p.card",
  ".card .title",
  "#header",
  "#header .title",
  "a:hover",
  "input[type=text]",
  "li::before",
];

for (const s of selectors) {
  console.log(specificity(s).join(",").padEnd(8) + s);
}

console.log("");
console.log("who wins between .card .title and #header?");
const a = specificity(".card .title");
const b = specificity("#header");
console.log("  ", a.join(","), "vs", b.join(","), "->", compare(a, b) > 0 ? ".card .title" : "#header");
console.log("   one id outranks any number of classes.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Inheritance

Sebagian property diturunkan ke anak-anaknya secara otomatis; sebagian besar tidak. Property terkait teks diwariskan — color, font-family, line-height. Yang terkait kotak tidak — padding, border, display, width.

Itu sebabnya mengatur font-family sekali di html memberi style ke seluruh dokumen — dan itu sebabnya globals.css di proyek ini melakukan tepat itu, dalam satu aturan.

Men-debug style yang diabaikan

Buka DevTools dan pilih elemennya. Lihat panel Styles.
Apakah aturanmu terdaftar sama sekali? Kalau tidak, selector-nya tidak cocok — cek ejaan dan strukturnya.
Terdaftar tapi tercoret? Ada yang lebih spesifik menang. DevTools menampilkan pemenangnya tepat di atasnya.
Nilainya ada tapi tidak ada yang berubah? Property-nya mungkin tidak berlaku untuk tipe display itu — width tidak berpengaruh pada elemen inline.
Cek tab Computed untuk nilai akhirnya, dan klik tanda panahnya untuk melihat asalnya.
Masih bingung? Elemennya mungkin bukan yang kamu pikirkan. Klik kanan halamannya lalu Inspect langsung.

Tugas praktik

Di DevTools pada halaman mana pun di proyek ini, pilih sebuah button dan baca panel Styles-nya dari atas ke bawah. Temukan deklarasi yang tercoret dan identifikasi aturan mana yang mengalahkannya. Lalu edit sebuah nilai secara langsung — ubah sebuah padding — dan lihat layout-nya merespons. Tidak ada yang tersimpan, jadi bereksperimenlah dengan bebas.

Hasil yang diharapkan

Kamu bisa menyebutkan aturan yang menang dan menjelaskan kenapa ia menang.

Cek pemahaman

#header mengatur color: red. .card .title mengatur color: blue dan ditulis setelahnya. Mana yang menang?

Biru, karena ditulis terakhirBiru, karena dua class mengalahkan satu idMerah, karena satu id (1,0,0) mengalahkan berapa pun jumlah class (0,2,0)

Pilih jawaban dulu