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.
Jaman sekarang mencari CSS Reset sudah sangat mudah ditemukan, tinggal ketik CSS Reset di Google, kita akan mendapatkan banyak sekali metod alternatip yang bertujuan sama. Sama sama memudahkan dan bahkan bisa kita langsung embed di website kita.
Framework2 seperti Bootstrap juga sudah menyertakan CSS Reset ini, dengan CSS Reset adalah salah satu cara megeneralisasi agar supaya desain di banyak device nanti bisa serupa. Banyak Device, Banyak Sistem dan Banyak Aplikasi.
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');
22 comments
Tutorial nya pasti bemanfaat. Tapi sayang sekali saya belum mengerti sama sekali. Mudah-mudahan nanti juga bisa paham.
Selama ini sih, berdasarkan pengalaman, setiap kali pakai CSS itu udah kayak me-reset setingan default dari browser. saya pikir gak terlalu penting melakukan reset ini.
lama ga ke blog ini …
css-reset selalu terpakai, paling enak cemplungin punya YUI ;)
Aku koq masih bingung ya..
Emang seberapa penting sih? apa efeknya kalo gak memakainya?
Maap om.. aku masih awam ama CSS.
Thanks banget ya ilmunya.
.-= Rosyidi´s last blog ..Islam Melarang Bom Bunuh Diri =-.
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….
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..
ada sekolahnya gak ya untuk mahir yang beginian….
selama ini saya pakai
http://meyerweb.com/eric/tools/css/reset/
http://sonspring.com/journal/clearing-floats
http://www.positioniseverything.net/easyclearing.html
mungkin nanti di gabungin sama punya sampean :D
terimakasih sharingnya
.-= zam.web.id´s last blog ..Malang Kedatangan Blogger Tamu dari Blogshops Road to Pesta Blogger 2009 =-.
Sebenarnya CSS itu sudah gabungan capur aduk dari sumber sumber seperti di atas mas :D
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 =-.
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 =-.
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 =-.
Apalagi aku yang bener-bener gaptek …. hehehehe
Gak dong Mass…….
INGIN BLOG/WEB ANDA DIHARGAI …GABUNG DISINI AJA
.-= JHonie´s last blog ..PEMBAYARAN PERDANA DARI ASK2LINK.COM =-.
bingung lop sam…gak itreng blas, hehehe
good trick…
.-= wahono´s last blog ..Yang Pertama =-.
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 =-.
Hmmm Ide CEMERLANG boss..
saya cuma takut kompability aja akhirnya semua kode di masukkan :D
pertanyaan saya balik ke judul postingan, kang?
seberapa penting menerapkan CSS Reset?
.-= gum´s last blog ..Tentang Brunei, Koin Cepekan dan Gocapan =-.
Tergantung AUDIENCEnya :D
– Penting (bagi saya saat ini)
– Tidak Penting (bagi yang tidak mendalami dunia ini)
– Abstain (belum tau pertanyaan ini)
;)
Yaiks, sharing yang sangat bermanfaat sekali Kang Jauhari! Thanks! :D
Sekarang tidak akan bingung model “loh, ini kok tiba2 ke-style sendiri sih?” lagi. wkwkwkwk :P
.-= Fikri Rasyid @ Bloggingly´s last blog ..25 Produk Google Untuk Mengoptimasi Blogging Anda =-.