DesignMagz

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)