Jul 18, 2011

5+ Kumpulan CSS Reset Untuk Menghemat Waktu Anda

Monday, July 18, 2011  , , ,  1 comment

CSS Reset adalah sekumpulan kode CSS yang dirancang sedemikian rupa sehingga setiap style pada setiap element memiliki nilai default yang serupa. Dengan adanya berbagai browser dengan core yang berbeda, tak heran jika ada beberapa element pada user agent tersebut memiliki nilai yang tak sama. CSS Reset memudahkan web designer untuk mendesign web secara cross-browser dengan memberikan starting value yang sama bagi setiap browser.
Manfaat lainnya adalah untuk menghindari bug-bug CSS dengan memberikan default value yang “seharusnya ada” pada masing-masing element. Umumnya bug-bug tersebut berada pada Internet Explorer versi 6 ke bawah.
Berikut ini adalah kumpulan CSS Reset dapat anda gunakan untuk memulai CSS anda. Selalu tempatkan CSS Reset di awal untuk mendapatkan hasil yang diinginkan.

CSS Reset Blueprint CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* -----------------------------------------------------------------------
 
 
 Blueprint CSS Framework 0.8
 http://blueprintcss.org
 
   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.
 
----------------------------------------------------------------------- */
 
/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

CSS Reset 960 Grid System

1
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;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

Yahoo! Reset CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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;
 }

CSS Reset Eric Meyer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* v1.0 | 20080212 */
 
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;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
 
/* remember to define focus styles! */
:focus {
 outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

“Undo HTML” oleh Tantek

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */
 
/* Purpose: undo some of the default styling of common (X)HTML browsers */
 
 
/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }
 
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }
 
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
 
/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
 
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
 
/* de-italicize address */
address { font-style:normal }
 
/* more varnish stripping as necessary... */

“Tripoli Reset” oleh David Hellsing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
 
/*
-----------------------------
GENERIC
-----------------------------
*/
 
/* MAIN TYPOGRAPHY */
 
html { font-size: 62.5%; font-family: helvetica, "microsoft sans serif", arial, sans-serif; }
strong, th, thead td, h1, h2, h3, h4, h5, h6, dt { font-weight: bold; }
cite, em, dfn { font-style: italic; }
code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size: 92%; font-family: monaco, "Lucida Console", courier, mono-space; }
pre { white-space: pre; }
pre * { font-size: 100%; white-space: pre; }
del { text-decoration: line-through; color: #666; }
ins, dfn { border-bottom: 1px solid #ccc; }
small, sup, sub { font-size: 85%; }
big { font-size: 125%; line-height: 80%; }
abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
a abbr, a acronym { border: none; }
abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
sup { vertical-align: super; }
sub { vertical-align: sub; }
a:link, a:visited, a:hover, a:active, a:focus { text-decoration: underline; }
 
/* QUOTES */
 
blockquote { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666; }
blockquote > *:before { content: "\201C"; }
blockquote > *:after { content: "\201D"; }
 
/* language specific quotes! */
 
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
:lang(af), :lang(nl), :lang(pl) { quotes: '\201E' '\201D' '\201A' '\2019'; }
:lang(bg), :lang(cs), :lang(de), :lang(is), :lang(lt), :lang(sk), :lang(sr), :lang(ro) { quotes: '\201E' '\201C' '\201A' '\2018'; }
:lang(da), :lang(hr) { quotes: '\00BB' '\00AB' '\203A' '\2039'; }
:lang(el), :lang(es), :lang(sq), :lang(tr) { quotes: '\00AB' '\00BB' '\2039' '\203A'; }
:lang(en-GB) { quotes: '\2018' '\2019' '\201C' '\201D'; }
:lang(fi), :lang(sv) { quotes: '\201D' '\201D' '\2019' '\2019'; }
:lang(fr) { quotes: '\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a'; }
 
/* NOTE: safari refuses to support the quotes syntax. I only added the english language quotes for safari to save space. */
*[lang|='en'] q:before   { content: '\201C'; }
*[lang|='en'] q:after    { content: '\201D'; }
*[lang|='en'] q q:before { content: '\2018'; }
*[lang|='en'] q q:after  { content: '\2019'; }
 
/* FORMS */
 
fieldset { border: 1px solid #ccc; }
legend { background: #fff; }
textarea, input[type='text'], select { border: 1px solid #ccc; background: #fff; }
textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #aaa; }
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #888; outline: 2px solid #ddd; }
input[type='button'], input[type='submit'], input[type='checkbox'], input[type='image'], input[type='radio'], input[type='reset'], select, button { cursor: pointer; }
input[type='hidden'] { display:none; }
 
/*
-----------------------------
CONTENT ONLY
-----------------------------
*/
 
/* BASE SIZES */
 
.content { font-size: 1.2em; line-height: 1.6em; }
.content h1 { font-size: 1.6em; }
.content h2 { font-size: 1.5em; }
.content h3 { font-size: 1.4em; }
.content h4 { font-size: 1.3em; }
.content h5 { font-size: 1.2em; }
.content h6 { font-size: 1em; }
 
/* HR */
 
.content hr { display: block; background: #aaa; color: #aaa; width: 100%; height: 1px; border: none; }
 
/* LISTS */
 
.content ul{list-style: disc outside;}
.content ol{list-style: decimal outside;}
 
/* TABLES */
 
.content table { border-top: 1px solid #ccc;  border-left: 1px solid #ccc; }
.content th, .content td { border-bottom: 1px solid #ddd; border-right: 1px solid #ccc; }
 
/* MARGINS & PADDINGS */
 
.content hr, .content p, .content ul, .content ol, .content dl, .content pre, .content blockquote, .content address, .content table, .content form { margin-bottom: 1.6em; }
.content p+p { margin-top: -.8em; }
/* NOTE: Calulate header margins: TOP: line-height/size, BOTTOM: TOP/2 */
.content h1 { margin: 1em 0 .5em;  }
.content h2 { margin: 1.07em 0 .535em; }
.content h3 { margin: 1.14em 0 .57em; }
.content h4 { margin: 1.23em 0 .615em; }
.content h5 { margin: 1.33em 0 .67em; }
.content h6 { margin: 1.6em 0 .8em; }
.content th, .content td { padding: .8em; }
.content caption { padding-bottom: .8em; } /* padding instead of margin for IE */
.content blockquote { padding: 0 1em; margin: 1.6em 0; }
.content fieldset { padding: 0 1em 1em 1em; margin: 1.6em 0; } /* padding-top is margin-top for fieldsets in Opera */
.content legend { padding-left: .8em; padding-right: .8em; }
.content legend+* { margin-top: 1em; } /* compensates for the opera margin bug */
.content textarea, .content input { padding: .3em .4em .15em .4em; }
.content select { padding: .1em .2em 0 .2em; }
.content option { padding: 0 .4em .1em; }
.content a { position: relative; padding: 0.3em 0 .1em 0; } /* for larger click-area */
.content dt { margin-top: .8em; margin-bottom: .4em; }
.content ul, .content ol { margin-left: 2.2em; }
.content ul ul, content ol ul, .content ul ol, content ol ol { margin-bottom: 0; }
.content form div { margin-bottom: .8em; }
.content button { padding: 0.3em 0.5em; }
.content blockquote > * { margin: .8em 0; }
 
/* COLORS */
 
.content a:link { color: #36c; }
.content a:visited { color: #99c; }
.content a:hover { color: #c33; }
.content a:active, .content a:focus { color: #000; }
.content code, .content pre { color: #c33; } /* very optional, but still useful. W3C use

1 comments:

  1. fasana ItechApril 23, 2012 at 11:16 AM

    mantab tambah demonya gan,... http://bo-fsakti.blogspot.com

    ReplyDelete