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)

11 Responses to CSS Tips: Global Reset
  1. codebaby Reply

    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 :)

  2. andrian Reply

    Thnx info tutorialna, sangat membantu sekali buat belajarnya … thnx

  3. iqranegara Reply

    coba ahhhhhh

  4. jhend Reply

    nah ini dia blog yg bisa disebut “usefull blogs”

  5. Rio Reply

    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.

  6. admin Reply

    @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.

  7. Rio Reply

    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.

  8. admin Reply

    @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…

  9. eenx Reply

    Wow, thax

  10. yoseph Reply

    thanks banget mas,…
    sangat membantu,…..

    akhirnya problem q berhari hari kelar juga

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>