1. 程式人生 > >normalize.css使用方法

normalize.css使用方法

Normalize.css 只是一個很小的CSS檔案,但它在預設的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset, Normalize.css是一種現代的、為HTML5準備的優質替代方案。Normalize.css現在已經被用於Twitter Bootstrap以及許許多多其他框架、工具和網站上。

Normalize.css是一種CSS reset 的替代方案。經過@necolas和@jon_neal花了幾百個小時來努力研究不同瀏覽器的預設樣式的差異,這個專案終於變成了現在這樣。

創造normalize.css有下面這幾個目的:

  • 保護有用的瀏覽器預設樣式而不是完全去掉它們
  • 一般化的樣式:為大部分HTML元素提供
  • 修復瀏覽器自身的bug並保證各瀏覽器的一致性
  • 優化CSS可用性:用一些小技巧
  • 解釋程式碼:用註釋和詳細的文件來

Normalize.css支援包括手機瀏覽器在內的超多瀏覽器,同時對Html5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。儘管這個專案基於一般化的原則,還是在合適的地方使用了更實用的預設值。

Normalize vs Reset


1.Normalize.css 保護了有價值的預設值

Reset通過為幾乎所有的元素施加預設樣式,強行使得元素有相同的視覺效果。相比之下,Normalize.css保持了許多預設的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設定樣式。當一個元素在不同的瀏覽器中有不同的預設值時,Normalize.css會力求讓這些樣式保持一致並儘可能與現代標準相符合。

2.Normalize.css 修復了瀏覽器的bug

它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的範疇。關於這一點,Normalize.css修復的問題包含了HTML5元素的顯示設定、預格式化文字的font-size問題、在IE9中SVG的溢位、許多出現在各瀏覽器和作業系統中的與表單相關的bug。

3.Normalize.css 不會讓你的除錯工具變的雜亂

使用Reset最讓人困擾的地方莫過於在瀏覽器除錯工具中大段大段的繼承鏈,如下圖所示。在Normalize.css中就不會有這樣的問題,因為在我們的準則中對多選擇器的使用時非常謹慎的,我們僅會有目的地對目標元素設定樣式。

4.Normalize.css 是模組化的

這個專案已經被拆分為多個相關卻又獨立的部分,這使得你能夠很容易也很清楚地知道哪些元素被設定了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分(比如表單的一般化)

5.Normalize.css 擁有詳細的文件

Normalize.css的程式碼基於詳細而全面的跨瀏覽器研究與測試。這個檔案中擁有詳細的程式碼說明並在Github Wiki中有進一步的說明。這意味著你可以找到每一行程式碼具體完成了什麼工作、為什麼要寫這句程式碼、瀏覽器之間的差異,並且你可以更容易地進行自己的測試。

這個專案的目標是幫助人們瞭解瀏覽器預設是如何渲染元素的,同時也讓人們很容易地明白如何改進瀏覽器渲染。

如何使用 normalize.css


首先,安裝或從Github下載Normalize.css,接下來有兩種主要途徑去使用它。

策略一:將normalize.css作為你自己專案的基礎CSS,自定義樣式值以滿足設計師的需求。

策略二:引入normalize.css原始碼並在此基礎上構建,在必要的時候用你自己寫的CSS覆蓋預設