關於CSS Reset那些事(3):架構CSS基礎庫

發表於2015-08-03

前言

上一章節我們對Normalize.css原始碼進行解析,但是由於其程式碼過長導致不宜瀏覽,所以表單Forms,表格Table部分內容放在此章節介紹。本章節會完成所有原始碼翻譯整理,最終會整理出Normalize-zh.css中文版本並開源至Github供大家交流使用。

回顧:關於CSS Reset 那些事(二)之 Normalize.css 原始碼解讀

Normalize-zh.css 出爐

Normalize-zh.css是根據對Normalize.css的原始碼分析後,經過學習與整理,將原始碼中的英文註釋文件翻譯為中文版本,方便國內的開發者學習和使用,我深知此版本一定有很多不足,希望能得到大家的理解和支援,同樣也很願意和大家一起完善。

現已將原始碼開源至Github

專案地址:https://github.com/Alsiso/normalize-zh

Normalize 原始碼解讀 (2)

上章節對 html與body元素,HTML5元素,連結,語義化文字,內嵌元素,群組元素 等原始碼內容已經做了解析,這章節繼續完成表單Forms,表格Table部分。

原始碼地址:https://github.com/necolas/normalize.css/blob/master/normalize.css

原始碼版本:v3.0.3

表單 Forms

  1. 修正所有瀏覽器中顏色不繼承的問題
  2. 修正所有瀏覽器中字型不繼承的問題
  3. 修正 Firefox 3+, Safari5 和 Chrome 中外邊距不同的問題

有一些瀏覽器會把form表單中的一些元素 textarea,text,button,select 中的字型和字型顏色預設會設定成使用者的字型或者是瀏覽器的字型,並不會從父元素繼承,所以這裡重置了這些元素的預設樣式。

    • 統一 IE 8/9/10/11 overflow屬性為visible

在 IE 8/9/10/11裡的button預設的overflow是hidden,這裡統一為visible

    • 統一各瀏覽器text-transform不會繼承的問題

    1. 避免 Android 4.0.* 中的 WebKit bug ,該bug會破壞原生的audio和video的控制器
  • 更正 iOS 中無法設定可點選的input的問題
  • 統一其他型別的input的游標樣式

這裡將可點選的按鈕,統一設定滑鼠樣式為pointer,提高了可用性

  • 重置按鈕禁用時游標樣式

  • 移除 Firefox 4+ 的內邊距

  • 統一設定行高為normal

Firefox瀏覽器會預設設定input[type=”button”]的行高為normal !important,這裡統一樣式

    1. 修正 IE 8/9 box-sizing 被設定為content-box的問題
  • 移除 IE 8/9 中多餘的內邊距

    • 修正 Chrome 中 input [type="number"] 在特定高度和 font-size 時,下面一個箭頭游標變成cursor: text 效果

 

    1. 修正 Safari 5 和 Chrome 中appearance被設定為searchfield的問題
  • 修正 Safari 5 和 Chrome 中box-sizing被設定為border-box的問題

searchfield是CSS3的屬性,它可以讓一個div元素看上去像任何元素,但是瀏覽器支援性並不好,

    • 移除原生預設樣式,統一search的輸入框樣式

 

  • 定義一致的邊框、外邊距和內邊距

  1. 修正 IE 6-9 中顏色不能繼承的問題
  2. 重置內邊距

  • 移除 IE8-11 中預設的垂直滾動條

    • 統一設定optgroup元素font-weight始終為bold

表格 Tables

總結

經過兩個章節對Normalize.css的原始碼進行了學習,清晰的瞭解了它的工作原理,作為傳統CSS Reset替代者,它當之無愧,為大家提供一套很完整的跨瀏覽器解決方案。

不過,你是否會有和我一樣的需求,比如開發一個小站,或者一個PC端的系統時,也許只需要一些簡單的基礎模組,比如我只想要簡單的樣式重置,統一各瀏覽器的效果就好,並不需要HTML5以及CSS3的一些問題修復。

那麼下一章,我們來介紹,如果制定屬於自己的 CSS基礎程式碼庫?

相關文章