CSS Reset dan Normalize

Tulis satu heading dan satu daftar tanpa CSS apa pun: heading tampil dengan margin besar, daftar bergeser ke kanan, dan tombol memakai font yang tidak mengikuti halaman. Semua itu datang dari stylesheet bawaan browser, yang nilainya berbeda tipis antar browser sehingga proyek yang sama bisa terlihat tidak konsisten di tempat berbeda. Chapter ini membahas dua pendekatan meratakan fondasi — reset dan normalize — lalu menyusun reset modern minimal yang layak menjadi pembuka setiap proyek.

Dari Mana Default Browser Berasal #

Setiap browser membawa user-agent stylesheet: aturan internal untuk menampilkan dokumen yang tidak punya CSS. Tanpa aturan ini, semua heading tampil sama besar dengan teks biasa dan daftar kehilangan bullet-nya. Masalahnya, bawaan itu juga mengganggu desain yang kita tulis:

Selain mengganggu, bawaan antar browser tidak sepenuhnya sama; margin heading, padding daftar, hingga detail tombol berbeda tipis di antara mesin render. Meratakan fondasi lebih dulu membuat kita mendesain di atas papan yang sama.

Reset: Mulai dari Nol #

Reset adalah pendekatan klasik: nolkan margin, padding, dan gaya teks semua elemen, lalu tulis sendiri semua yang dibutuhkan. Reset yang dipublikasikan Eric Meyer adalah contoh paling berpengaruh dari sekolah pemikiran ini:

* {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

Papan benar-benar polos — dan itulah kelemahannya: paragraf, daftar, dan heading kehilangan struktur bacaan, sehingga hampir semua gaya harus ditulis ulang. Untuk proyek dengan gaya dokumen, biaya itu terasa berat.

Normalize: Rapikan, Jangan Nol-kan #

Pendekatan kedua dikenal lewat normalize.css: default yang berguna dipertahankan, inkonsistensi antar browser yang diperbaiki. Margin paragraf tetap ada, bullet daftar tetap tampil, tetapi detail yang berbeda antar browser disamakan. Perbandingan keduanya:

Reset Modern Minimal #

Praktik saat ini bergerak ke bentuk yang lebih pendek: reset minimal yang hanya menyentuh titik-titik paling menjebak tanpa menolkan semuanya. Berikut versi yang lazim dipakai dan cukup untuk sebagian besar proyek:

/* 1. Model kotak bisa diprediksi */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Margin bawaan dinolkan */
* {
  margin: 0;
}

/* 3. Tinggi baris diwariskan sebagai rasio */
body {
  line-height: 1.5;
}

/* 4. Media berhenti di lebar kontainernya */
img, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 5. Elemen form mengikuti tipografi halaman */
button, input, select, textarea {
  font: inherit;
}

/* 6. Teks panjang tidak mendorong lebar layout */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

Mari kita uraikan baris demi baris:

1. box-sizing: border-box pada semua elemen dan pseudo-element: nilai width mencakup padding dan border, sehingga ukuran kartu tidak melebihi hitungan (recap chapter box model).
2. margin: 0 universal: seluruh jarak vertikal bawaan hilang; spasi kini murni keputusan desain.
3. line-height: 1.5 pada body: tanpa satuan, nilai ini diwariskan sebagai rasio yang mengikuti ukuran font tiap elemen — praktik terbaik dibanding 150%.
4. Media menjadi block dengan max-width: 100%: gambar dan video tidak meluap dari kartunya, dan display: block menghilangkan celah kecil di bawah gambar.
5. font: inherit pada elemen form: tombol dan input akhirnya mengikuti font halaman, bukan font dialog bawaan browser.
6. overflow-wrap: break-word pada teks: kata panjang tanpa spasi (URL, misalnya) melipat dengan rapi dan tidak mendorong lebar layout.

Demo berikut memakai reset="false" sehingga iframe menampilkan perilaku bawaan browser secara murni. Panel kiri tanpa reset; panel kanan menerima reset minimal yang dibatasi pada panelnya:

Perhatikan ukuran heading tetap besar di kedua panel; reset modern memang tidak menolkan font-size.

Bangun Reset Milik Proyek #

Reset yang baik dimulai kecil. Ambil enam aturan di atas, tambahkan baris baru hanya saat menemui bawaan yang mengganggu proyekmu, dan beri komentar alasan pada setiap penambahan. Reset yang dipahami baris demi baris lebih mudah dirawat daripada salinan panjang yang tidak ada yang berani hapus. Tempatnya juga sudah disepakati: bagian paling atas stylesheet, tepat setelah token — persis urutan yang dipakai chapter berikutnya.

Ringkasan #

Bawaan browser adalah sumber inkonsistensi pertama yang dijumpai setiap proyek. Reset klasik menolkan semuanya dan memberi papan polos, normalize mempertahankan default yang berguna, dan reset modern minimal menyatukan keduanya dalam enam aturan pendek. Fondasi yang sudah rata ini tinggal disusun ke dalam arsitektur berkas proyek — topik chapter penutup section ini.