Seberapa Penting CSS Reset

css-reset

Hampir 2 tahun ini, kegiatan membuat themes gratis saya selalu menambahkan code css yang sederhana tapi sangat powerful, setidaknya bagi saya sendiri. Kode Powerful itu adalah CSS Reset. Gambaran sederhana dari CSS Reset ini adalah. Membuat semua hal yang tampil dihalaman browser dibuat NOL, entah itu margin, padding, jarak,  outline, background, ukuran font dan macam macam.

Mau tau CSS Reset saya? CSS Reset saya ini sudah saya pakai dibeberapa tema wordpress gratis saya baik di WPGPL ataupun di Jauhari Themes. Jika sampean semua berminat dengan CSS Reset saya silahkan dipake semaunya. Perlu diingat CSS Reset saya ini adalah gabungan dari CSS Reset yang saya temukan di internet, dan beberapa bagian sudah saya tambahi…

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;
}
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, bikin aja file css reset.css dan kemudian paste kode saya diatas di file ini. Kemudian, cara menggunakannya cukup dengan memanggil di CSS original anda, seperti ini

@import url('reset.css');

Jika masih ada kode yang kuran, silahkan ditambahkan, semoga bermanfaat, selamat ber CSS dan semoga lain waktu  bisa berbagi tips tips yang lain

0 thoughts on “Seberapa Penting CSS Reset

    1. Seperti Prolog postingan saya mas.. tujuannya ini sebagai PE RESET. Karena tiap browser mempunyai beda ukuran standard.

      Jadi dengan di RESET, diharapkan ukuran DEFAULT menjadi sama, sehingga kita bisa bermain CSS dengan lebih nyaman….

      1. Ow.. ic.. ic..
        Seperti misalnya ie yg senenaknya sendiri bikin standart sendiri sampe di protes ama Opera dan Firefox itu ya?

        Semoga masyarakat mulai sadar dan meninggalkan ie, kalo ie gak da yg pake, kan nanti dia pasti mulai tau diri. hehehe..

  1. Seberapa Penting? Bisa jadi: 1. Sangat Tidak Penting; 2. Tidak Penting; 3. Biasa; 4. Penting; 5. Sangat Penting. he he :)

    Thanks for sharing.
    Berbagai itu membahagiakan (berebut itu menyakitkan).
    Go ahead Bro.
    .-= ayaheauzi´s last blog ..Resep Bahagia =-.

  2. selaku user dan penikmat theme-theme-nya om, saya juga nggak mudeng dengan makhluk CSS Reset itu, apalagi khasiatnya.

    Anay way, berbagi itu memang membahagiakan.
    Thanks and go ahead.
    .-= ayaheauzi´s last blog ..Resep Bahagia =-.

  3. Terimakasih sharing-nya, om.
    karena cuma user murni dan peniknya theme2-nya om, saya tetep gak nyambung dengan makhluk css reset itu.
    Any way, berbagi itu memang membahagiakan.

    Go ahead.
    .-= ayaheauzi´s last blog ..Resep Bahagia =-.

  4. Wogh, kumplit Gan..

    Saya pake yang sedikit sajah:

    * {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
    list-style: none;
    }

    :D
    .-= Nazieb´s last blog ..Out of Topic =-.

        1. Tergantung AUDIENCEnya :D
          – Penting (bagi saya saat ini)
          – Tidak Penting (bagi yang tidak mendalami dunia ini)
          – Abstain (belum tau pertanyaan ini)

          ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *