[CSS] Reset CSS
YehYeh\'s Notepad yehyeh@gmail.com 

Reset CSS

Reset CSS

  • Reset CSS
    • 早期不同的瀏覽器對一些元素(EX:p)各自有不同的MarginPadding
      造成同樣的css在不同瀏覽器看起來都不相同
      對網頁而言,差1px可能就是有間隙和無間隙的差別
      需要針對不同瀏覽器的主要元素一一設定MarginPadding
      Reset CSS:將全部或主要的元素MarginPadding都設為0
    • 現今的瀏覽器比較符合W3C的標準,所以差異較小,但舊瀏覽器仍很多人使用
    • W3C - Default style sheet for HTML 4
  • CSS Framework
    • CSS Framework是一組寫好的CSS,用來輔助網頁排版 可以快速簡單的排出想要的版型
    • CSS Framework通常都有內建Reset CSS,所以也可寫解決不同瀏覽器差異性的問題
    • 主流的CSS Framework:
  • 沒有完美Reset CSS,只有最適合的Reset CSS
  • 下面將介紹幾種常被使用的Reset CSS,可以針對自己的需求再加以修改使用
Δ 回到最上方

最簡單的Reset CSS

  • Code:
    * { margin: 0; padding: 0;}
    
  • 直接將所有元素的marginpadding設為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!風格不見得符合開發網站風格
    • 檔案大
Δ 回到最上方