DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 推薦一份不錯的reset.css
推薦一份不錯的reset.css
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:但從 2004 年到現在,已經一晃眼 5 年了。曾經的一些考慮,比如針對 ie 5.5 的代碼,目前已經可以大膽捨棄了。抄的過程中,努力去做到求實求證,努力求一份自己的理解,很難很難。但只要孜孜不倦,終究會有所獲,有所得,有所悟。

時間過得真快,離 Reset CSS 研究(八卦篇) 已經 3 個多月了。廢話少說,趕緊將技術篇寫完吧。

回顧與反思

第一份 reset css 是 Tantek 的 undohtml.css, 很簡單的代碼,Tantek 根據自己的需要,對浏覽器的默認樣式進行了一些重置。

Eric 的也是如此。

YUI 除了 cssreset, 還配套有 cssfonts 和 cssbase. cssreset 清除默認樣式,cssfonts 和 cssbase 則將一些元素的默認樣式重設回來。

很長一段時間,* { margin: 0; padding: 0; }和 YUI cssreset 模糊了我對 reset 的理解,讓我認為 reset 就應該清除掉所有樣式,將一切歸零。

後來閱讀 Eric 的博客,發現 Eric 並不期望大家下載他的 reset.css 後直接拿去用。而是期待能根據具體需求,適量裁剪和修改後再使用。

世間的事總會有些戲劇化,Eric 的期待沒有如意。大家都想得到通用解決方案,期待銀彈。在這種渴求下,YUI cssreset 很徹底很干淨,廣為流傳。

更戲劇化的是,由於 YUI 的 cssfonts 和 cssbase 只考慮了西歐文字,對漢字的考慮不多。這導致國內用戶大部分只會用 cssreset. 比喻成武林秘籍的話,我們一直在用殘卷。

調節顯示器,有一個“重置為出廠設置”的選項。這有兩重含義:一是去掉當前的設置,二是還原為出廠時的設置。CSS Reset 也一樣,第一步是清除浏覽器的默認樣式,第二步是重設浏覽器的默認樣式。很明顯,* { margin: 0; padding: 0; }和 YUI cssreset 偏向於第一步。

這兩步並不是截然分開的。reset 的初始意圖,是想減少各種浏覽器下默認樣式的差異。對於沒有差異的默認樣式,則可以根據情況,選擇性重置或不重置。比如 strong, 默認都是粗體,這符合預期,就可以不重置。又比如 a, 現在的主流浏覽器下默認樣式無差別,但為了某些因素,比如可讀性,也會考慮將下劃線重置為無。

以上,是回顧,是反思,是接下來技術實現的指導思想。

技術實現

天下一大抄,抄來抄去,種種 reset 代碼,長得都差不離。這沒什麼不好,不光解決了問題,還促進了技術傳播。

但從 2004 年到現在,已經一晃眼 5 年了。曾經的一些考慮,比如針對 ie 5.5 的代碼,目前已經可以大膽捨棄了。抄的過程中,努力去做到求實求證,努力求一份自己的理解,很難很難。但只要孜孜不倦,終究會有所獲,有所得,有所悟。

這是我和好友正淳一起整理的一份 reset.css:

/*
KISSY CSS Reset
理念:清除和重置是緊密不可分的
特色:1.適應中文 2.基於最新主流浏覽器
*/
/* 清除內外邊距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表單元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 設置默認字體 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋體", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何編碼下都無問題 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 將斜體扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 統一等寬字體 */
small { font-size: 12px; } /* 小於 12px 的中文很難閱讀,讓 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.這裡用了屬性選擇符,ie6 下無效果 */
	border-bottom: 1px dotted;
	cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表單元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭車:讓鏈接裡的 img 無邊框 */
/* 注:optgroup 無法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表單元素在 ie 下能繼承字體大小 */
}

/* 重置表格元素 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 讓非ie浏覽器默認也顯示垂直滾動條,防止因滾動條引起的閃爍 */
html { overflow-y: scroll; }

用途在注釋裡都標明了,就不多解釋。測試頁面在這裡:CSS Reset Test. 這份測試頁面花了我們很大心血,如果轉載,請注明下出處,呵呵。

先說明下測試過的浏覽器:IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+

下面解釋一些和 YUI cssreset 的差異點:

  1. 清除內外邊距的元素,去掉了 div, code(在測試浏覽器中,沒發現有邊距), 增加了 button(感覺是 YUI 遺漏了).
  2. 去掉了 YUI 裡對 html 顏色和背景色的設置。在測試浏覽器中,沒有發現差異。(要設的話,推薦background: transparent
  3. 對於 address, caption, …, em, strong 等文本格式元素,做了調整。保留了 strong 和 th 的粗體。
  4. 對 abbr 和 acronym 做了調整,使得在非 ie6 下可視性更好。
  5. 去掉了 sup 和 sub 的樣式,直接用浏覽器默認的即可。
  6. 對於 input, select, textarea 表單元素,去掉了針對 ie 的 inherit, 只保留了 font-size 的 inherit hack. 因為其它 hack 經測試已失效。
  7. 增加了一些元素的默認樣式。

此外,對整體代碼的組織形式做了調整,按照元素的類別將代碼進行了分組。

如何使用

請記住:永遠不存在萬能解決方案,永遠沒有銀彈。

因此我的建議和 Eric 是一樣的:請根據具體需求,適量裁剪和修改後再使用

比如針對淘寶,可以在 reset.css 的基礎上,修改為 reset-taobao.css.

如果是個人博客,我個人喜歡的一個方案是:reset-blog.css.

相關測試頁面請查看:cssreset svn.
真實使用時,請用壓縮後的版本:reset-min.css.

對於 reset.css 本身,我們期待它能盡量多的適用於各種場景,但不期待它能解決所有問題。目前而言,reset.css 裡的默認樣式,是我和正淳等各位同事和朋友們實踐經驗的總結,算是“精挑細選”,但不期待能解決所有問題。

最後,期待你的參與和建議。如果這份 reset.css 能有幸在你的項目中得到使用,則非常期待你的反饋。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved