時間過得真快,離 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 的差異點:
background: transparent
)此外,對整體代碼的組織形式做了調整,按照元素的類別將代碼進行了分組。
請記住:永遠不存在萬能解決方案,永遠沒有銀彈。
因此我的建議和 Eric 是一樣的:請根據具體需求,適量裁剪和修改後再使用。
比如針對淘寶,可以在 reset.CSS 的基礎上,修改為 reset-taobao.CSS.
如果是個人博客,我個人喜歡的一個方案是:reset-blog.CSS.
相關測試頁面請查看:CSSreset svn.
真實使用時,請用壓縮後的版本:reset-min.CSS.
對於 reset.CSS 本身,我們期待它能盡量多的適用於各種場景,但不期待它能解決所有問題。目前而言,reset.CSS 裡的默認樣式,是我和正淳等各位同事和朋友們實踐經驗的總結,算是“精挑細選”,但不期待能解決所有問題。
最後,期待你的參與和建議。如果這份 reset.CSS 能有幸在你的項目中得到使用,則非常期待你的反饋。