Browser (peramban) memiliki default value CSS-nya sendiri terhadap tag-tag html. Sialnya, default value CSS tiap-tiap browser berbeda. Itulah mengapa kita membutuhkan CSS Reset.

CSS Reset adalah serangkaian nilai CSS yang dibuat untuk me-reset default value browser menjadi nol. Dengan cara ini, tampilan markup setiap tag html yang belum di-styling akan menjadi sama di setiap browser.

File CSS Reset

Saya pribadi menggunakan file CSS Reset-nya Pak Jauhari. Hanya saja saya menambahkan nilai font-weight:normal untuk heading sehingga filenya menjadi seperti ini:

css_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, font, 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 {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
font-weight:normal;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.hide {
display: none;
}
br.clear {
clear: both;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac */
* html .clearfix {
height: 1%;
}
hr {
display: none;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */

/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after,.post:after {
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix, .container {display: block;}

/* Makes clearfix actually work in IE */
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}

.clearfix, .post {display: inline-block;}

/* Hides from IE-mac */
* html .clearfix, * html .post {height: 1%;}
.clearfix, .post {display: block;}
/* End hide from IE-mac */

img#wpstats{width:0px;height:0px;overflow:hidden}

Cara menggunakan CSS Reset

  1. Buat file reset.css, letakkan di dalam direktori yang sama dengan file CSS anda
  2. Copy paste kode diatas ke dalam file reset.css
  3. Embed reset.css kedalam file CSS anda dengan menggunakan tag ini: @import url('reset.css');

Cara diatas berjalan dengan baik. Namun demi mengurangi http request, ada baiknya juga bila kode CSS diatas langsung disatukan ke dalam file CSS anda.

UPDATE 8/Jul/2010: Me”reset” CSS dengan cara yang lebih efisien

Setelah membaca artikel Thierry Koblentz mengenai Setting rather than Resetting Default Styling yang mengemukakan inefesiensi dalam penggunaan css-reset (thanks to @japestinho untuk linknya), artikel TJKDesign mengenai Implementing a starter CSS file rather than using a reset stylesheet dan artikel Steve Souders mengenai don’t use @import (karena lambat) akhirnya saya memodifikasi “cara” saya “me-reset” CSS.

Alih-alih membuat file reset.css yang kemudian di import ke file CSS utama, saya sekarang lebih pilih menambahkan instruksi ini di awal file CSS utama saya secara langsung:

/* Reset
---------------------------------------------*/
css_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, font, 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 {
margin: 0;
padding: 0;
font-size: 100%;
font-weight:normal;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
text-decoration:none;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}

Sesuai kebutuhan saja. Much more simple, isn’t it? What do you think? 😉

9 thoughts on “Menggunakan CSS Reset

  1. […] outstando We Do Outstanding Thing « Menggunakan CSS Reset […]

    1. hmm… make sense juga sih .Sebenarnya sama aja kan, cuman kalo dia alih2 ngereset semuanya jadi 0, value-value yang berbeda itu disetting ulang defaultnya berapa. Jadi motong kerja browser juga.

      Cuman masalahnya, kalau si elemen itu ternyata memang harus distyling berbeda, ujung2nya nambah eksekusi jg. intinya sih kalau ngereset CSS mungkin ngga perlu semua juga. cuman yang akan sering dipake aja.

    2. anyway, base.css-nya Thierry Koblentz di http://tjkdesign.com/ez-css/css/base.css perlu dipelajari lebih lanjut n diimplementasiin deh. baca komentar-komentar dalam stylesheet itu 😀

  2. […] Reset atau “setting” default CSS-nya – Setiap browser memiliki default value sendiri untuk setiap elemen. Membiarkannya berbeda-beda akan sangat memakan waktu penulisan CSS. […]

  3. CSS reset saya hanya 4 baris:

    * {
    margin:0;
    padding:0;
    }

    1. Hihi, benar juga. bisa saja sih disederhanakan seperti ini :p

  4. trims…info bagus nh kebetulan sya jga lgi bkin theme baru

Share Your Thought