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)

5 Responses to “CSS Tips: Global Reset”

  1. codebaby

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

    bisa dibaca disini:
    http://www.designmagz.com/teori/browser-standard-mode-dan-quirks-mode.html

  3. andrian

    Thnx info tutorialna, sangat membantu sekali buat belajarnya … thnx

  4. iqranegara

    coba ahhhhhh

  5. jhend

    nah ini dia blog yg bisa disebut “usefull blogs”

Leave a Reply