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 <a title="See also How To Reset Google Apps Administrator Password ..." href="http://nurudin.jauhari.net/how-to-reset-google-apps-administrator-password.jsp">How To</a> Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after,.post:after {
content: "\0020";
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
Yaiks, sharing yang sangat bermanfaat sekali Kang Jauhari! Thanks!
Sekarang tidak akan bingung model “loh, ini kok tiba2 ke-style sendiri sih?” lagi. wkwkwkwk
.-= Fikri Rasyid @ Bloggingly´s last blog ..25 Produk Google Untuk Mengoptimasi Blogging Anda =-.
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;
}
.-= Nazieb´s last blog ..Out of Topic =-.
Hmmm Ide CEMERLANG boss..
saya cuma takut kompability aja akhirnya semua kode di masukkan
pertanyaan saya balik ke judul postingan, kang?
seberapa penting menerapkan CSS Reset?
.-= gum´s last blog ..Tentang Brunei, Koin Cepekan dan Gocapan =-.
Tergantung AUDIENCEnya
- Penting (bagi saya saat ini)
- Tidak Penting (bagi yang tidak mendalami dunia ini)
- Abstain (belum tau pertanyaan ini)
good trick…
.-= wahono´s last blog ..Yang Pertama =-.
bingung lop sam…gak itreng blas, hehehe
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 =-.
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 =-.
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 =-.
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 =-.
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
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
ada sekolahnya gak ya untuk mahir yang beginian….
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..
lama ga ke blog ini …
css-reset selalu terpakai, paling enak cemplungin punya YUI
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.
[...] pribadi menggunakan file CSS Reset-nya Pak Jauhari. Hanya saja saya menambahkan nilai font-weight:normal untuk heading sehingga filenya menjadi [...]
[...] Seberapa Penting CSS Reset [...]
Tutorial nya pasti bemanfaat. Tapi sayang sekali saya belum mengerti sama sekali. Mudah-mudahan nanti juga bisa paham.