列舉幾條經常使用的CSS reset,是否瞭解normalize.css

Normalize.css只是一個很小的css文件,但它在磨人的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset,Normalize.css是一種現代的、爲HTML5準備的優質替代方案。總之,Normalize.css是一種CSS reset的替代方案。css

咱們創造normalize.css有下面這幾個目的:瀏覽器

保護有用的瀏覽器樣式而不是去掉他們。模塊化

通常化的樣式:爲大部分HTML元素提供。工具

修復瀏覽器自身的bug並保證各瀏覽器的一致性。測試

優化css可用性:用一些小技巧。優化

解釋代碼:用註釋和詳細的文檔來。操作系統

注意:Normalize支持包括手機瀏覽器在內的超多瀏覽器,同時對HTML5元素、排版、列表、嵌入的內容、表單和表哥都進行了通常化。儘管這個項目基於通常化的原則,但咱們仍是在合適的地方使用了更實用的默認值。調試

Normalize vs Resetorm

  1. Normalize.css 保護了有價值的默認值

Reset經過爲幾乎全部的元素施加默認樣式,強行使得元素有相同的視覺效果。相比之下,Normalize.css保持了許多磨人的瀏覽器樣式。這就意味着你不用再爲全部公共的排版元素從新設置樣式。當一個元素在不一樣的瀏覽器中有不一樣的默認值時,Normalize.css會力求讓這些樣式保持一致並儘量與現代標準符合。繼承

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

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

  1. Normalize.css 不會讓你的調試工具變的雜亂

使用Reset最讓人困擾的地方莫過於在瀏覽器調試工具中大段大段的繼承鏈,在Normalize.css中就不會有這樣的問題,由於在咱們的準則中對多選擇器的使用是很是謹慎的,咱們僅會有目的地對目標元素設置樣式。

  1. Normalize.css 是模塊化的

這個項目已經被拆分爲多個相關卻又獨立的部分,這使得你可以很容易也很清楚地知道哪些元素被設置了特定的值。所以這能讓你本身選擇性地移除掉某些永遠不會用到的部分(好比表單的通常化)。

  1. Normalize.css 擁有詳細的文檔

Normalize.css的代碼基於詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明並在Github Wiki中有進一步的說明。這意味着你能夠找到每一行代碼具體完成了什麼工做、爲何要寫這句代碼、瀏覽器之間的差別,而且你能夠更容易的進行本身的測試

相關文章
相關標籤/搜索