CSS Reset sederhana

CSS Reset adalah istilah untuk sekumpulan style CSS yang mengatur ulang style bawaan elemen HTML. Tujuan penggunaannya adalah agar tampilan web yang dibuat dapat tampil konsisten di berbagai peramban.

Salah satu CSS Reset yang cukup terkenal adalah milik Eric Meyer yang mengatur ulang style bawaan untuk hampir seluruh elemen HTML. Selain itu, ada juga Normalize.css yang mengeklaim hanya mengatur ulang style pada elemen yang diperlukan.

Keduanya tentu masih bisa dipakai meskipun sudah lama sejak terakhir kali diperbarui. Namun, bagi saya yang sedang mempelajari CSS, menggunakan keduanya bukanlah opsi terbaik karena membuat saya tidak memahami seperti apa style bawaan dari tiap elemen, sehingga sulit untuk menetapkan style yang pas nantinya.

Karena alasan itu saya lebih memilih sebuah CSS Reset sederhana dan mengubah style suatu elemen hanya ketika saya memerlukannya. Beruntung, saya menemukan artikel berjudul My Custom CSS Reset yang cukup mendekati apa yang saya inginkan.

Dengan sedikit perubahan, berikut adalah CSS Reset yang biasa saya gunakan:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-white: hsl(0, 0%, 100%);
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  height: 100%;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
}

img {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
}

CSS Reset ini tidak banyak mengubah style bawaan, tapi cukup menyelesaikan beberapa masalah yang sering saya temui saat bekerja dengan tampilan. Berikut adalah penjelasan pada tiap style-nya:

Dimensi elemen yang lebih mudah dikalkulasi

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Lebar dan tinggi elemen HTML secara bawaan dikalkulasi berdasarkan kontennya. Itu sebabnya elemen <p> dengan style berikut akan memiliki lebar sebesar 224px alih-alih 200px.

p {
  border: 2px solid red;
  padding: 10px;
  width: 200px;
}

Maka dari itu, penting bagi kita mengubah nilai bawaan property yang mengatur hal ini (yaitu box-sizing) dari content-box menjadi border-box agar dimensinya dikalkulasi berdasarkan batas tepinya. Dengan begitu, style di atas akan membuat elemen <p> memiliki lebar sebesar 200px dan lebar kontennya kini menyusut jadi 176px.

Perbandingan box-sizing dengan nilai content-box dan border-box

Style ini menggunakan Universal Selector (*) agar bisa diterapkan di seluruh elemen HTML. Saya juga menghapus nilai margin dan padding bawaan agar mengatur jarak antara elemen nantinya bisa lebih presisi.

Selector untuk menampung CSS Variables

:root {
  --color-white: hsl(0, 0%, 100%);
}

Selector :root sebenarnya masih merujuk pada elemen <html>. Namun, saya tetap pisahkan fungsinya dari selector html dan menjadikan :root sebagai tempat menampung apa yang disebut sebagai CSS Variables.

CSS Variables adalah fitur di mana kita bisa membuat custom property sendiri. Aturan penamaan property yang merupakan CSS Variables adalah dimulai dengan dua tanda setrip (--) agar membedakannya dari property asli CSS.

Contoh sederhana penggunaan fitur ini adalah kita dapat menyimpan nilai warna yang nantinya akan digunakan, seperti contoh di atas. Setelah dibuat, kita hanya perlu memanggilnya menggunakan fungsi var() ketika ingin digunakan, seperti contoh berikut:

div {
  background-color: var(--color-white);
}

article {
  border: 2px solid var(--color-white);
}

h1 {
  color: var(--color-white);
}

Penggunaan CSS Variables akan memudahkan kita dalam mengubah suatu style karena hanya perlu mengubah nilainya di :root dan perubahannya akan terjadi di seluruh elemen di mana custom property-nya digunakan.

Membuat satuan persen dapat mengatur tinggi elemen

html {
  height: 100%;
}

body {
  ...
  height: 100%;
  ...
}

Satuan persen (%) sulit mengatur tinggi dari elemen HTML karena secara bawaan tinggi elemen diatur berdasarkan konten di dalamnya. Jika kita ingin suatu elemen memiliki tinggi yang sesuai ukuran layarnya, maka bisa dipastikan tinggi elemen tersebut tetap hanya setinggi konten di dalamnya.

Karena itulah style ini penting untuk ditambahkan. Nantinya elemen yang tingginya ingin disesuaikan dengan ukuran layar hanya perlu menerapkan property min-height, seperti contoh berikut:

main {
  background-color: cyan;
  min-height: 100%;
}

min-height digunakan agar tinggi elemennya tetap adaptif jika konten di dalamnya lebih tinggi dari ukuran layarnya.

Perbandingan tanpa style, menggunakan style, dan 'height' saja pada <main>

Sesuaikan tipografi untuk meningkatkan keterbacaan

body {
  font-family: sans-serif;
  ...
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
}

Menurut artikel berjudul Picking the right font: Serif vs. sans serif, Sans-serif adalah tipe fon yang tepat digunakan pada desain aplikasi dan web karena tingkat keterbacaan menjadi perhatian serius, terutama pada perangkat dengan ukuran layar yang kecil dan resolusi yang rendah.

Sementara itu, menurut WCAG jarak antara baris di dalam paragraf yang ideal setidaknya adalah 1,5 kali ukuran fonnya. Namun, ukuran tersebut juga akan membuat jarak antara baris pada Headings menjadi cukup besar sehingga kita perlu mengaturnya kembali ke nilai yang pas.

Gambar seharusnya juga punya ruangnya sendiri

img {
  display: block;
  max-width: 100%;
}

Selain teks, media lain yang kemungkinan besar ada dalam sebuah web adalah gambar. Anehnya, style bawaan dari elemen <img> membuat gambar seolah harus disisipkan di antara kata di dalam paragraf layaknya elemen <em> dan <strong>.

Oleh karena itu, kita perlu mengubah nilai bawaan dari property display menjadi block agar gambar diperlakukan layaknya elemen <div> dan <p> yang ditampilkan dalam baris baru. Property max-width: 100% juga perlu ditambahkan agar lebar gambar menyesuaikan dengan lebar elemen penampungnya.

Tipografi pada elemen-elemen Form juga perlu disesuaikan

button, input, select, textarea {
  font: inherit;
}

Tipografi pada elemen-elemen yang berkaitan dengan Form ternyata tidak terpengaruh dengan style yang sudah ditetapkan pada selector body. Untuk mengatasinya, kita perlu mengatur style-nya secara terpisah dengan menetapkan shorthand property font: inherit agar elemen-elemen tersebut mengikuti style tipografi yang sama seperti pada elemen lain di sekelilingnya.

Demikian penjelasan dari CSS Reset yang biasa saya gunakan. Saya sangat menyarankan kamu untuk membaca juga artikel "My Custom CSS Reset" yang menjadi sumber inspirasi dari CSS Reset ini.

Semoga bermanfaat.

divclassid