2013年3月17日 星期日

不 reset, normalize 總行吧 ! Bootstrap 的現身說法

大家好 又到了 CSS Storia 時間
這是繼上一篇 CSS Reset 那是甚麼? why & why not? 的後續
讓我們繼續探討 CSS Reset 的何去何從

大名鼎鼎 的 CSS framework:Bootstrap
在升級到 2.0 時宣布
將拋棄 CSS Reset 改採 Normalize 的方式
以下是它的官方新聞稿 (誤 = =)
Reset via Normalize
With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.
但至少從 2007 年開始到現在
為解決各瀏覽器 CSS 或是 標籤 樣貌的差異
CSS Reset 幾乎佔據每年最佳解決方案

除了不斷更新外
也有許多 CSS 大神的加持
ex:YUI, Blueprint...

那為甚麼 Bootstrap 不跟進呢?
就讓我們來探討 Normalize 是甚麼吧~~






打開我在上一篇留下的伏筆連結
http://necolas.github.com/normalize.css/

Normalize.css v2.1.0 的 CSS 可以分成了七個部分
  1. 未支援 HTML5 標籤相關處理 (HTML5 display definitions)
  2. 基本的部分 (Base)
  3. 連結 (Links)
  4. 修正不同瀏覽器顯示差異 (Typography)
  5. 用於嵌入的標籤 (Embedded content)
  6. 表單 (Form)
  7. 表格 (Tables)

以下簡單說明各部位的用途
CSS 的部分可能會因太長而被重新排版或截掉
閱讀時請參照原檔案一起看
看完後你會覺得怎麼都是在處理 IE


=================================================
1. 未支援 HTML5 標籤相關處理 HTML5 display definitions
=================================================

大家都知道目前 HTML5 的開發尚未完成
但已有瀏覽器實作了部分功能
但那些不支援瀏覽器遇到 HTML5 標籤時該怎麼辦呢 
ex: IE 7 8 9 (就是俗稱的舊版 IE 啦)

因為這些標籤的顯示模式 (display)
有些是 區塊 (block) 有些是 單行區塊 (inline-block)
在排版中 顯示模式 (display)不正確會有很大的問題

因此 Normalize.css 首先定義這些標籤的 顯示模式 (display)
article, aside, details, figcaption, figure, footer, header,
hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}...

讓這些標籤顯示上不會出錯


====================================================================
   2. 基本的部分 (Base)
====================================================================
這部分非常簡單
通常都是因為各個瀏覽器不一樣
因此乾脆先讓他回復基本面

例如把 <body> 的 外邊距 歸 0
目前的瀏覽器一般都是 8px,但 ie 6 7 不一樣
因為大部分人歸 0比較多,所以乾脆設 0 還比較好控制
html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

body {
    margin: 0;
}


====================================================================
   3. 連結 (Links)
====================================================================

這部分主要是在連結的物件上的 focus 光暈上













但為甚麼要作呢?以上圖為例
因為在 OSX 上 WebKit 的連結 focus  光暈預設是藍色的
而在 Windows 上是橘色的
因為各家 OS 處理方式已變成一種使用者習慣
也因此 normalize.css 只定邊框的樣式而沒有定它的顏色
a:focus {
    outline: thin dotted;
}

a:active, a:hover {
    outline: 0;
}

====================================================================
   4. 修正不同瀏覽器顯示差異 (Typography)
====================================================================
這部分最長
看起來比較像 CSS reset 但又有所不同
也是 normalize.css 的理念所在

這邊挑個出來解釋

下面 CSS 定義的那四個標籤的意義都跟程式碼或終端機輸出有關
因此統一用等寬字體 monospace 也是理所當然的吧
code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

但是一般的 css reset 怎麼作呢?
以 Eric Meyer's Reset CSS v2.0 來解釋
code, kbd, pre, samp {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

大家可以看到 Eric Meyer 的就複雜多了
實際上除了這四個標籤外  它同時還將其他標籤套用這個屬性
ex: html, body, div, span, applet, object, iframe ...etc

這樣寫會有怎樣的問題呢?
問題點在於 有些標籤的意義代表段落 ex: <p> <pre> 
因此 包含 外邊距 (margin) 也很正常
但 reset 一下去
所有標籤都變成同一個樣子

我知道你可能會說:「預設外邊距的長度又不是我要的
我也同意  事實上我也常常歸零
但是為什麼不在那個樣式作就好了
還得先 reset 一次  之後發現可能還是要  又覆寫一次呢?
也就是上篇所提到的
Overriding the overridden
reset 的屬性越多  這問題就越嚴重就變成了
Going nuts
保留住標籤的意義便是 normalize 與 reset 最大的不同:
Preserve useful browser defaults
這一段其餘的部分差不多都是統一各瀏覽器樣式預設值
有時間的話建議大家好好研究這段


====================================================================
   5. 用於嵌入的標籤 (Embedded content)
====================================================================

這邊還好  主要在解超連結圖片時
IE 那莫名其妙加了個邊框的事情
img {
    border: 0;
}

看到這裡我其實一開始有點疑惑
為甚麼不是
a img {
    border: 0;
}

而是直接對 img 下手
想過就簡單  原來 img 預設樣式就沒 border 屬性
你如果要有 border 本來就得自己加上去
所以直接指定 img 而非 a img 其實也不會造成問題

====================================================================
   6. 表單 (Form)
====================================================================
主要加強各個標籤的預設樣式
舉例來說
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

<input> type 為 button, reset, submit 都是給人點的按鈕
游標為 手行 (pointer) 也是正常的吧
這一段其餘的部分也差不多都是統一各瀏覽器樣式預設值
因此就不細談了

====================================================================
   7. 表格 (Tables)
====================================================================
這部分可能是 css reset 與 normalize 唯一相同的地方
現在處理表格框線 或留白 (padding) 幾乎都是在 <td> 上
因此 <table> 的預設樣式反而是種累贅
所以要消除掉 表格的雙線外框與表格間多餘的 spacing
table {
    border-collapse: collapse;
    border-spacing: 0;
}


以上大概是簡單的剖析
謝謝大家看完


=============== 我是時代演進分隔線 ===============

畢竟 CSS 不是程式
寫法說實話就是一堆流派上的差異
其實並沒有好或不好  只有在當下適不適合
reset 也好 normalize 也罷
重點是你要知道它在寫甚麼

就像前文所說的那樣
今天可能所有專家都覺得已經有最佳解的問題
在技術的演進之下  明天開始出現別的聲音
甚至在未來全盤推翻掉的可能性也都存在

使用第三方 framework 就像是雙面刃
或許當下很方便  (能快速交差才是王道對吧)

但寫的人要清楚知道它為什麼這樣作
可能會埋伏怎樣的問題

有時候不是樣式漂不漂亮的問題
而是這個屬性會不會讓你糗了
搞懂這些 framework 加樣式的原因後
CSS 才能寫的簡單又快速


=============== 我是上面分隔線裡藏玄機分隔線 ===============

又是一篇深度文,感謝大家收看  回到主線劇情


敬請期待下期的 CSS 的故事: inline-block 來一個殺一個 來兩個殺一對

沒有留言:

張貼留言