Thursday, January 26, 2012

CSS Reset

Paling Sederhana

* {
  padding:0;
  margin:0;
  border:none;
}

Eric Meyer

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Yahoo CSS Reset

YUI 2

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img { 
 border: 0;
 }
address,caption,cite,code,dfn,em,strong,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }

YUI 3

<link rel='stylesheet' type='ext/css' href='http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css'></link>

Sumber: YUI, Eric Meyer

Labels: ,

9 Comments:

At Thursday, January 26, 2012 at 10:17:00 PM GMT+7, Anonymous Anonymous said...

btw kegunaannya buat apa ya? jadi bingung ane 3~3

 
At Friday, January 27, 2012 at 8:16:00 AM GMT+7, Blogger Taufik Nurrohman said...

@Ф дфѕдғфдғ Ф: Ini untuk mereset semua style default bawaan dari browser. Masalahnya, setiap browser memiliki standar CSS yang berbeda-beda. Untuk menyetarakan semua tampilan pada semua browser, lebih baik netralkan semua CSS default browser, kemudian kita tulis CSS kita sendiri.

 
At Monday, January 30, 2012 at 12:19:00 AM GMT+7, Anonymous Anonymous said...

tadi sempet dicoba, tapi kok kagak ada yang ngefek yah?
punya tutor show/hide komentar.. tapi yang bergaya lightboxnya (overlay) -_- susah nyarina nih!

 
At Sunday, April 29, 2012 at 2:24:00 PM GMT+7, Blogger Unknown said...

Mas kalau saya sudah mereset terus saya buat begini juga bolehkan,
Disini adalah text yang mau saya publikasikan.
#main-wrapper{width: 749px; float: left; margin: 0 10px 0 10px; word-wrap: break-word;overflow: hidden;}
#related-posts{display:none;}
#comment-form{display:none;}
#comments{display:none;}
#sidebar-wrapper{display:none;}

kalau mau meringkas saya masih kurang paham betul caranya, tapi ini bisa juga untuk buat multi colom ndak mas..? tapi sebelum tanda # diberi style dan diakhirnya ditutup garisng style. kerena newbie mas jadi banyak nanya kerena pingin tau dan bisa mengikuti jejak mas yang memiliki skill dewa... \o/ :D :D

 
At Sunday, April 29, 2012 at 3:59:00 PM GMT+7, Blogger Taufik Nurrohman said...

@Suwardi Unggit Multikolom??? Mungkin maksudnya memakai CSS Float
Contoh ringkasnya bisa disederhanakan menjadi seperti ini:

Disini adalah text yang mau saya publikasikan...
<style type="text/css">

CSS Reset ditulis di sini...
Setelah itu bisa melanjutkan menulis kode seperti biasa


#main-wrapper {
width:749px;
float:left;
margin:0 10px 0 10px;
word-wrap:break-word;
overflow:hidden;
}

#related-posts,
#comment-form,
#comments,
#sidebar-wrapper {display:none;}
</style>

 
At Sunday, April 29, 2012 at 6:09:00 PM GMT+7, Blogger Unknown said...

@Taufik Nurrohmanyach ngelayout dengan css float maksudnya, terus kalau untuk CSS Reset eric mayer saya meletakannya di dalam templete setelah code dan sebelum /*Variable definitions*/
itu tujuannya biar praktis gitu. Ternyata belajar banyak sumber ini buat binggung kalau begitu saya belajar sama mas taufik aja lah kalau begitu, kemarin pernah nanya sama andre di facebook tapi tidak dibalas liat tutorial bang Amdhas Chromatic puyeng banyak bahas grid dengan HTML5

 
At Sunday, April 29, 2012 at 6:16:00 PM GMT+7, Blogger Unknown said...

@Suwardi Unggit saya masukan lagi lagi codenya yang hilang diatas itu <i rel="code'><![CDATA[ </i>

 
At Sunday, April 29, 2012 at 7:39:00 PM GMT+7, Blogger Taufik Nurrohman said...

@Suwardi Unggit Untuk saat ini lebih baik jangan tanya terlalu banyak sama mas Andre... Hehe 0:) Dia lagi stress gara-gara blognya dihack. Kodenya hilang, mungkin karena kamu memakai tanda petik tunggal. Harusnya memakai petik ganda seperti ini:

<i rel="code"></i>

CSS Reset digunakan untuk mereset semua format tampilan CSS di atasnya. Secara umum sih sebenarnya digunakan untuk mereset semua CSS default dari masing-masing peramban. Sekedar untuk meyakinkan agar kode CSS yang kita buat nantinya benar-benar tampak sama jika dilihat pada semua peramban. Kalau kita meletakkan kode CSS reset di salam posting itu juga supaya kode CSS di atasnya akan terhapus semua dan kembali seperti semula sebagai sesuatu yang bebas. Tapi itu tidak mutlak. Mending mempelajari elemen-elemennya saja seperti biasa, lalu buat versi CSS resetmu sendiri :-bd

 
At Sunday, April 29, 2012 at 7:59:00 PM GMT+7, Blogger Unknown said...

@Taufik Nurrohman terima kasih mas sarannya ,pantasan blognya mas andre tidak bisa dibuka yang ada malah tampil localhost gitu dan ada sedikit jejak inisial di tinggalkan, nanti saya tanya teman saya yang hecker black and white untuk bantu andre, itu kalau teman saya mau sih mas. saya sudah lihat blogazine mas taufik keren.....

 

Post a Comment

<< Home