Penggunaan CSS merupakan sebuah keharusan dalam membangun sebuah website. Berkembangnya web browser yang berbeda dan banyaknya versi yang beragam menyebabkan masalah bagi pengembang dan desainer web, dikarenakan harus menangani semua masalah yang timbul disetiap web browser.
Untuk mengatasi masalah tersebut, mari kita pelajari teknik CSS Reset.
Apa itu CSS Reset ?
CSS Reset merupakan seperangkat aturan dalam menuliskan perintah CSS yang tujuannya adalah untuk me-reset atau mengatur semua elemen HTML agar tampil seragam di berbagai web borwser.
Perlu diketahui, setiap web borwser (seperti Firefox, Internet Explorer, Opera, Chrome, Safari, dll) memiliki aturan yang berbeda dalam menemapilkan style CSS.
Bagaimana Cara Menuliskan CSS Reset ?
Untuk menuliskan CSS Reset perintah yang digunakan tetaplah perintah CSS. Tidak ada kode/perintah khusus dalam mengimplementasikan CSS Reset. Mari kita coba !
Perhatikan perintah berikut :
* {
margin:0;
padding:0;
}
Perintah diatas akan me-reset CSS untuk menghilangkan margin dan padding di semua elemen menggunanakan selector universal. Namun, perintah reset diatas dapat mempengaruhi beberapa elemen yang tidak memiliki margin dan padding untuk dihilangkan.
Apa Saja Yang Perlu di Reset ?
Beberapa hal yang perlu di-reset ialah :
- Mengatur margin dan padding ke nol (0)
- Mengatur border ke nol (0)
- Menghilangkan tampilan list-style
- Menentukan font default halaman web
- Mengatur ketebalan font (font-weight) dan tampilan font (font-style) normal
Contoh Beragam Perintah CSS Reset
Berikut beberapa perintah CSS Reset yang umum digunakan pada elemen yang sering bermasalah.
/* Menghilangkan margin dan padding pada beberapa elemen kunci */
html, body, ul, ol, li, form, fieldset, legend {
margin:0;
padding:0;
}
/* Menghapus margin top di heading dan paragraf */
h1, h2, h3, h4, h5, h6, p {
margin-top:0;
}
/* Menghapus border pada fieldset dan image */
fieldset, img {
border:0;
}
/* Mengatur border dan spacing tabel */
table {
border-collapse:collapse;
border-spacing:0;
}
/* Mengatur caption, header tabel dan data cell tabel */
caption, th, td {
text-align:left;
vertical-align:top;
font-weight:normal;
}
/* Memberikan warna pada fieldset (Mengatasi masalah warna pada IE) */
legend {
color:#000;
}
/* Mengatur ukuran font dan ketinggian paragraf pada input, textarea dan select */
input, textarea, select {
font-size:110%;
line-height;1.1;
}
/* Menghilangkan list bullet*/
li {
list-style:none;
}
/* Mengatur border-bottom dan cursor pada abbr dan acronym */
abbr, acronym {
border-bottom:.1em dotted;
cursor:help;
}
/* Mengatur vertical-align pada sup dan sub */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
Kesimpulan
Dengan CSS Reset, Anda dapat mengatur desain web agar tampak seragam di berbagai web browser. Tentunya untuk mengurangi beragam masalah yang ditimbulkan oleh web browser nantinya.
Baca Juga : 4 CSS Reset Populer Terbaik
Selamat mencoba dan semoga bermanfaat.
