Reset CSS
Reset CSS
- Reset CSS
- 早期不同的瀏覽器對一些元素(EX:p)各自有不同的Margin和Padding
造成同樣的css在不同瀏覽器看起來都不相同
對網頁而言,差1px可能就是有間隙和無間隙的差別
需要針對不同瀏覽器的主要元素一一設定Margin和Padding
Reset CSS:將全部或主要的元素Margin和Padding都設為0
- 現今的瀏覽器比較符合W3C的標準,所以差異較小,但舊瀏覽器仍很多人使用
- W3C - Default style sheet for HTML 4
- 早期不同的瀏覽器對一些元素(EX:p)各自有不同的Margin和Padding
- CSS Framework
- CSS Framework是一組寫好的CSS,用來輔助網頁排版 可以快速簡單的排出想要的版型
- CSS Framework通常都有內建Reset CSS,所以也可寫解決不同瀏覽器差異性的問題
- 主流的CSS Framework:
- 沒有完美Reset CSS,只有最適合的Reset CSS
- 下面將介紹幾種常被使用的Reset CSS,可以針對自己的需求再加以修改使用
最簡單的Reset CSS
- Code:
* { margin: 0; padding: 0;}
- 直接將所有元素的margin和padding設為0是最簡單的Reset CSS
- 優點:
- 簡潔、易記、檔案小
- 缺點:
- 連一些不需要Reset的元素或不會用到的元素都會Reset 需要重新定義
Eric Meyer的Reset CSS
- Full Version:
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ 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; }
- Minified Version:
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}
- Eric Meyer是著名的CSS大師
- 依據統計,Eric Meyer’s “Reset CSS”是最多人使用的Reset CSS
- 優點:
- 針對各別元素指定
- 除了margin和padding還考慮字型、清單、表格的樣式
- 連帶處理部份瀏覽器bug
- 支援HTML 5
- 缺點:
- blockquote:before, blockquote:after,q:before, q:after 舊版IE不支援
- 一些樣式(EX:ul,li)的樣式都被Reset,所以需要自行重定義
- 檔案大
YUI 3.5.0 的Reset CSS
- Code:
/** * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * http://cssreset.com * Copyright 2012 Yahoo! Inc. All rights reserved. * http://yuilibrary.com/license/ */ /* TODO will need to remove settings on HTML since we can't namespace it. TODO with the prefix, should I group by selector or property for weight savings? */ html{ color:#000; background:#FFF; } /* TODO remove settings on BODY since we can't namespace it. */ /* TODO test putting a class on HEAD. - Fails on FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } /* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit... */ 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; font-variant:normal; } /* to preserve line-height and selector appearance */ sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; } /*to enable resizing for IE*/ input, textarea, select { *font-size:100%; } /*because legend doesn't inherit in IE */ legend { color:#000; } /* YUI CSS Detection Stamp */ #yui3-css-stamp.cssreset { display: none; }
- YUI是由Yahoo!開發的Javascript Framework
- Yahoo!的網站幾乎都是使用YUI開發
- 優點:
- 針對各別元素指定
- 除了margin和padding還考慮到一些瀏覽器bug、字型、清單、表格的樣式
- 連帶處理部份瀏覽器bug
- 缺點:
- q:before, q:after 舊版IE不支援
- 一些樣式(EX:ul,li)的樣式都被Reset,所以需要自行重定義
- Yahoo!風格不見得符合開發網站風格
- 檔案大