想必寫網頁的工程師都會有種困擾
Chrome, Firefox, Safari, Internet Explore ...
它們幹嘛不討論一下 CSS 和 HTML 標籤該長怎麼樣
每家都不同是要 目屎郎 喔
因為瀏覽器的勾心鬥角 策略結盟 阿哩阿雜的問題一堆
也因此這是不可能達成的問題
問題依由在 Bug 怎麼辦？
也因此有人提出 css reset 的想法
甚麼叫做 css reset？可以吃嗎？
實際上它不能吃 言而總之就是：
每家瀏覽器的標籤預設樣式都不同，所以先統一樣式再說
也因此 CSS 大神們便開始了可歌可泣的測試與撰寫工作
常看到的 CSS reset 有幾種
- Eric Meyer： http://meyerweb.com/eric/tools/css/reset/
- Yahoo YUI：http://developer.yahoo.com/yui/reset/
- Normalize：http://necolas.github.com/normalize.css/
當然還有很多 各家理念也都有點不同
你也可以寫自己要的 ( 也有第三方元件本身就包含 reset ex：CKEditor)
但內容不外乎都是這樣
以 YUI 3.8.1 為例
html{color:#000; background:#FFF;}
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;}
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;}....
因為太長了
所以我只擷取前面並做了些排版
大家可以發現
開頭先把所有 HTML 標籤的 margin:0; padding:0; 歸零
然後開始是各組標籤的個別處理.....
如此一來各個瀏覽器不一致的問題就解決啦
真是可喜可賀啊
但你有沒有想過
標籤之所以會長那樣
那是因為那是它的功能使然
瀏覽器雖然基本樣式定義略有不同
但也只是解讀上的問題 標籤的功能還是對的
你今天一旦作了 reset
那個標籤就會變得跟預設不同
甚至是每個標籤都長的一樣
ex:<p> 少了外邊距 (margin) 那跟 <div> 有甚麼不同
既然如此你為甚麼不乾脆換一個適合標籤不就好了
就好像鞋子穿不下
不換大一點的 非要撐到爆才可以嗎
也因此說實話我比較排斥 reset
舉一個我遇到的實際問題
著名的 WYSIWYG 編輯器 CKEditor 中的 reset
.cke_reset_all, .cke_reset_all * {
margin: 0; padding: 0;
border: 0;
background: transparent;
text-decoration: none;
width: auto; height: auto;
vertical-align: baseline;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
border-collapse: collapse;
font:normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
color: #000;
text-align: left;
white-space: nowrap;
cursor: auto;
}
這段 CSS 出了甚麼問題呢？
那其實是在一個漆黑的晚上
我正在刻一個關於插入程式碼的插件 (plugin)
程式碼的樣子就該要是等寬字體才好閱讀碼 (無疑的)
說到可編輯又要等寬字體的標籤 當然非 <textarea> 莫屬啦
而且 <textarea> 預設字體 font-family: monospace; 就是等寬
我加上 <textarea> 後
試寫了幾段程式 但可怕的事發生了
居然沒等寬 我開始懷疑我的記憶 難道我記錯了嗎
原來不是 問題出在 reset 上
它把字體都 reset 了 = =
font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
沒辦法拿掉這行 很多東西會出問題 (生氣 >< )
所以只好再寫一段覆蓋掉 reset
有一個 css 前輩寫的一篇文章 我覺得很貼切
Overriding the overridden
把 reset 覆蓋的樣式再覆蓋掉 超蠢不是嗎
感謝星爺
都不要討論校能和其他問題
光這個我就覺得有很大的理由不使用 reset
寧可多寫一點 至少清楚掌握各個 style 的樣子
說實話目前的 css framework 大多都有 reset 的部分
但我相信只要對 HTML 標籤夠孰悉
不特易作 reset 也可以讓瀏覽器乖乖聽話的 ( 全部給我坐下 )
=============== 我是暴怒分隔線 ===============
本文附上 history of css resets 歷史故事
沒有留言:
張貼留言