CSS-Tricks近日在網站上做了一個調查："What CSS Reset Do You Use"，其中最多人使用的Eric Meyer的版本(不意外)，佔了27%，令人莞爾的是佔了26%的第二名："CSS Reset是什麼?"。
CSS Reset是什麼?想必台灣很多做網頁設計的也不一定知道啊。簡單的來說，CSS Reset是一整套的CSS設定，用來統一各瀏覽器的不同內建值。舉例來說，如果沒有指定body的margin或padding，在Firefox、 IE5~IE8、Safari等瀏覽器，上方出現的空間是不一樣大的，如果沒有CSS Reset的觀念，要一統網頁在各瀏覽器的外觀，根本不可能。所以每個前端網頁設計師，都得有一套CSS Reset!
目前為止最新版的Eric Meyer的CSS Reset
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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Smashing Maganize的這篇文章提到了更多的CSS Reset及CSS Framework，你可以挑選適合的現成設定來使用，或是發展自己的CSS Reset。