normalize與CSS Reset的區(qū)別:
Normalize.css只是一個(gè)很小的css文件骏庸,但它在磨人的HTML元素樣式上提供了跨瀏覽器的高度一致性绷蹲。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的汹族、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案飘弧∠景海總之笋妥,Normalize.css是一種CSS reset的替代方案。
Normalize.css 有下面這幾個(gè)目的:
- 保護(hù)有用的瀏覽器 樣式而不是去掉他們毡们。
- 一般化的樣式: 為大部分HTML元素提供迅皇。
- 修復(fù)瀏覽器自身的bug 并保證各瀏覽器的一致性。
- 優(yōu)化css可用性: 用一些小技巧衙熔。
- 解釋代碼: 用注釋和詳細(xì)的文檔來(lái)登颓。
注意: Normalize支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器,同時(shí)對(duì)HTML5元素红氯、排版框咙、列表、嵌入的內(nèi)容痢甘、表單和表哥都進(jìn)行了一般化扁耐。盡管這個(gè)項(xiàng)目基于一般化的原則,但我們還是在合適的地方使用了更實(shí)用的默認(rèn)值产阱。
Normalize vs Reset:
1. Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值
Reset通過(guò)為幾乎所有的元素施加默認(rèn)樣式,強(qiáng)行使得元素有相同的視覺(jué)效果块仆。相比之下构蹬,Normalize.css保持了許多磨人的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式悔据。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)庄敛,Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)符合。
2. Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見(jiàn)的桌面端與移動(dòng)端瀏覽器的bug科汗。這往往超出了Reset所能做到的范圍藻烤。關(guān)于這一點(diǎn),Normalize.css修復(fù)的問(wèn)題包含了HTML5元素的顯示設(shè)置头滔、預(yù)格式化文字的font-size問(wèn)題怖亭、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug坤检。
3. Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂
使用Reset最讓人困擾的地方莫過(guò)于在瀏覽器調(diào)試工具中大段大段的繼承鏈兴猩,在Normalize.css中就不會(huì)有這樣的問(wèn)題,因?yàn)樵谖覀兊臏?zhǔn)則中對(duì)多選擇器的使用是非常謹(jǐn)慎的早歇,我們僅會(huì)有目的地對(duì)目標(biāo)元素設(shè)置樣式倾芝。
4. Normalize.css 是模塊化的
這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分讨勤,這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到的部分(比如表單的一般化)晨另。
5. Normalize.css 擁有詳細(xì)的文檔
Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測(cè)試潭千。這個(gè)文件中擁有詳細(xì)的代碼說(shuō)明并在Github Wiki中有進(jìn)一步的說(shuō)明。這意味著你可以找到每一行代碼具體完成了什么工作借尿、為什么要寫(xiě)這句代碼刨晴、瀏覽器之間的差異,并且你可以更容易的進(jìn)行自己的測(cè)試垛玻。