Perbedaan antara CSS Reset dan Normalize.css – Apa yang sudah Anda ketahui tentang CSS Reset dan Normalize.css? Dan apa yang membedakannya? Kedua tool ini sama-sama digunakan pada style sheet website. Saya akan mencoba untuk membantu anda memberikan penjelasan mengenai perbedaan CSS Reset dan Normalize.css ini.
CSS Reset
Sebuah CSS Reset (atau “Reset CSS”) adalah serangkaian atursan CSS terkompresi yang mereset styling semua elemen HTML menjadi dasar yang konsisten. Tool ini dibuat oleh Eric Meyer yang digunakan untuk mengurangi inkonsistensi browser yang dalam hal-hal seperti line-height, margin dan font-size heading, dan sebagainya. Dia merupakan pioner dalam mengembangkan metode CSS Reset yang banyak digunakan jutaan website sampai sekarang. Kebanyakan orang menggunakannya dalam bentuk belum diedit, meskipun rekomendasi Meyer terhadap ini:
Style reset yang diberikan disini dengan sengaja sangat generik. Tidak ada standar warna apapun atau background ditetapkan untuk elemen body, contohnya. Saya tidak sangat merekomendasikan bahwa Anda cukup menggunakan ini dalam kondisi tidak berubah dalam proyek anda sendiri. Itu perlu ditweak, diedit, diperluas, dan selain itu disetel agar sesuai dengan dasar spesifik reset Anda. Isikan dengan warna pilihan anda untuk halaman, link, dan sebagainya.
Dari rekomendasi Eric Meyer di atas dengan jelas, dia memperbolehkan untuk merubah CSS Reset sesuai dengan spesifikasi style reset Anda. File CSS Reset lengkap bisa anda unduh di sini atau bisa Anda lihat di bawah ini:
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Normalize.css
Normalize.css adalah file CSS kecil yang menyediakan konsistensi lintas-browser yang lebih baik dalam styling elemen HTML default . Modern, HTML5-ready, alternatif reset CSS biasa. Normalize.css adalah sebuah alternatif untuk me-reset CSS. Tool ini dikerjakan oleh @necolas dan @jon_neal tentang perbedaan antara style browser default.
Tujuan normalize.css adalah sebagai berikut:
- Mempertahankan default browser yang berguna daripada menghapusnya.
- Normalisasikan style untuk berbagai elemen HTML.
- Mengoreksi bug dan inkonsistensi browser yang umum.
- Meningkatkan kegunaan dengan peningkatan yang halus.
- Menjelaskan kode menggunakan komentar dan dokumentasi lengkap.
Sebagai contoh, bagaimana normalize.css membuat jenis input search HTML5 baru lintas-browser yang konsisten dan styleable.
/** * 1. Addresses appearance set to searchfield in S5, Chrome * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Removes inner padding and search cancel button in S5, Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
Untuk file Normalize.css lengkap bisa anda unduh di sini.
vito says
sebaiknya menggunakan yang mana mas?
Ahmad Fahrurroji says
Saya sendiri sering menggunakan CSS Reset