CSS Tips: Global Reset
Permasalahan utama dalam mendesain sebuah layout adalah tidak standardnya value yang diberikan kepada sebuah tag HTML oleh masing-masing browser. Hal ini lah yang menjadikan permasalahan utama bila Anda membangun sebuah desain CSS. Di satu browser, jaraknya sekian pixel kebawah, sedangkan di browser lain kok baik2 saja…
Beberapa tag yang memiliki nilai default berbeda pada setiap browser, sebagai contoh adalah Heading <h> , List <ul, ol, li>, Paragraph <p>, blockquote, dll. Umumnya perbedaan ini dimiliki oleh tag-tag yang bersifat block (block tag).
Sebagai contoh, bila kita mendefinisikan heading (h1, h2, h3, dst) maka jarak margin dan padding akan berbeda pada berbagai browser.
Sebuah tips yang mungkin berguna bagi Anda, adalah dengan menggunakan apa yang biasa disebut dengan “Global Reset” yaitu dengan menambahkan aturan yang menyamakan semua perbedaan pada setiap browser. Yaitu dengan menambahkan:
/* CSS Document */
* {
padding: 0;
margin: 0;
}
Dengan demikian semua margin dan padding akan di-reset menjadi 0. Dengan demikian, yang anda perlukan selanjutnya adalah mengatur kembali margin dan padding pada setiap elemen:
h1 {
font: normal 18px Arial, Helvetica, Sans-Serif;
margin: 4px;
padding: 4px;
}
Bagi saya, global reset memudahkan penelusuran masalah bila Anda menemukan tampilan yang berbeda atau menjadi tidak sama pada setiap browser. Silakan saja dicoba… (Pupung Budi Purnama)
Mas Pupung, tolong jelasin beda antara standard mode dan quirks mode di browser. Saya sudah baca2 literatur2 berbahasa inggris tapi kok belum mudeng2 juga ya, maklumlah baru belajar
bisa dibaca disini:
http://www.designmagz.com/teori/browser-standard-mode-dan-quirks-mode.html
Thnx info tutorialna, sangat membantu sekali buat belajarnya … thnx
coba ahhhhhh
nah ini dia blog yg bisa disebut “usefull blogs”
Rio pernah menggunakan metode ini sebelumnya tp setelah blog-walking ternyata css reset dg menggunakan tanda bintang ini ternyata kurang baik, krn tanda bintang dapat mempengaruhi semua property pada css. Sehingga jika kita memiliki kode css yang sangat rumit dan panjang, maka tanda bintang ini akan bekerja lebih keras untuk mengaplikasikan property style-nya kepada seluruh elemen dan memaksa sang browser untuk menunggu sampai keseluruhan tag telah diaplikasikan. Dengan kata lain hal ini akan memperlambat load sebuah halaman web.
@Rio: Saya pernah membaca artikel yang disebutkan, tapi tidak ada argumen kuat kalau resetting padding dengan cara diatas memperlambat loading. Justru dengan menulis global reset diatas, akan menghemat byte css karena tidak perlu menulis margin: 0; padding: 0; berulang kali. Tapi memang base CSS adalah ide baik untuk disertakan.
Global Reset memang langkah awal yang sangat baik
Namun bagaimana pandangan mas Pupung mengenai CSS Framework? Di sana kita dapat mempelajari lebih jauh tentang global reset, browser spesifik reset, tipografi, dan grid.
Rio sangat berharap kita bisa share mengenai hal ini di postingan mas berikutnya.
@Rio: Makasih atas usulannya, Mungkin judul artikel diatas lebih cocok adalah “Universal Selector Margin/Padding Reset”. Beberapa designer seperti Andy Budd, Cameron Moll, Jeff Croft masih menggunakan universal selector sampai sekarang, as i learned this technique from them.
Saya masih harus menggali banyak hal tentang CSS ini, kl ada pengalaman nanti saya tulis…