亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS進(jìn)階篇--Normalize.css的使用（重置表）

dack / 3123人閱讀

摘要：相比于傳統(tǒng)的，是一種現(xiàn)代的為準(zhǔn)備的優(yōu)質(zhì)替代方案。保護(hù)了有價(jià)值的默認(rèn)值通過(guò)為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。任何人都能夠提交問(wèn)題報(bào)告或者提交補(bǔ)丁。

本文譯自Normalize.css官網(wǎng): http://nicolasgallagher.com/a...

Normalize.css 只是一個(gè)很小的CSS文件，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上。

Normalize.css 項(xiàng)目地址
Normalize.css 在GitHub上的源碼

綜述

Normalize.css是一種CSS reset的替代方案。經(jīng)過(guò)@necolas和@jon_neal花了幾百個(gè)小時(shí)來(lái)努力研究不同瀏覽器的默認(rèn)樣式的差異，這個(gè)項(xiàng)目終于變成了現(xiàn)在這樣。

我們創(chuàng)造normalize.css有下面這幾個(gè)目的：

保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們

一般化的樣式：為大部分HTML元素提供

修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性

優(yōu)化CSS可用性：用一些小技巧

解釋代碼：用注釋和詳細(xì)的文檔來(lái)

**Normalize.css支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時(shí)對(duì)HTML5元素、排版、列表、嵌入的內(nèi)容、表單和表格都進(jìn)行了一般化。盡管這個(gè)項(xiàng)目基于一般化的原則，但我們還是在合適的地方使用了更實(shí)用的默認(rèn)值。**

Normalize vs Reset

知道Normalize.css和傳統(tǒng)Reset的區(qū)別是非常有價(jià)值的。

1. Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值
Reset通過(guò)為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認(rèn)的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)，Normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。

2. Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見的桌面端和移動(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。

可以看以下這個(gè)例子，看看對(duì)于HTML5中新出現(xiàn)的input類型search，Normalize.css是如何保證跨瀏覽器的一致性的。

 /* 1. Addresses appearance set to searchfield in S5, Chrome
 /* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}
 /* Removes inner padding and search cancel button in S5, Chrome on OS X
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

3. Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂
使用Reset最讓人困擾的地方莫過(guò)于在瀏覽器調(diào)試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會(huì)有這樣的問(wèn)題，因?yàn)樵谖覀兊臏?zhǔn)則中對(duì)多選擇器的使用時(shí)非常謹(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ō)明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測(cè)試。

這個(gè)項(xiàng)目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的，同時(shí)也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。

如何使用 normalize.css

首先，安裝或從Github下載Normalize.css，接下來(lái)有兩種主要途徑去使用它。

策略一：將normalize.css作為你自己項(xiàng)目的基礎(chǔ)CSS，自定義樣式值以滿足設(shè)計(jì)師的需求。
策略二：引入normalize.css源碼并在此基礎(chǔ)上構(gòu)建，在必要的時(shí)候用你自己寫的CSS覆蓋默認(rèn)值。

結(jié)語(yǔ)

無(wú)論從適用范疇還是實(shí)施上，Normalize.css與Reset都有極大的不同。嘗試一下這兩種方法并看看到底哪種更適合你的開發(fā)偏好是非常值得的。這個(gè)項(xiàng)目在Github上以開源的形式開發(fā)。任何人都能夠提交問(wèn)題報(bào)告或者提交補(bǔ)丁。整個(gè)項(xiàng)目發(fā)展的過(guò)程對(duì)所有人都是可見的，而每一次改動(dòng)的原因也都寫在commit信息中，這些都是有跡可循的。

轉(zhuǎn)載地址：http://jerryzou.com/posts/abo...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111137.html

相關(guān)文章

  • CSS基礎(chǔ)篇--css reset重置樣式有那么重要嗎？

    摘要：在以前寫代碼的時(shí)候，一般都會(huì)在里添加重置樣式，其內(nèi)容如下但是最近在網(wǎng)上看了看網(wǎng)絡(luò)文章，也感覺有些重置是沒有用的。當(dāng)然重置的優(yōu)點(diǎn)，缺點(diǎn)都不說(shuō)了，估計(jì)心里都非常有數(shù)的，還是要根據(jù)實(shí)際項(xiàng)目來(lái)。后來(lái)主管給我推薦了一款替代重置的替代方案，那就是用。 在以前寫html代碼的時(shí)候，一般都會(huì)在head里添加重置樣式reset.css，其內(nèi)容如下： @charset utf-8; html, body,...

    rockswang 評(píng)論0 收藏0

  • 關(guān)于CSS Reset 那些事（一）之 歷史演變與Normalize.css

    摘要：下面開始對(duì)進(jìn)行簡(jiǎn)單的介紹，關(guān)于兩者的差異區(qū)別可以看問(wèn)答平臺(tái)使用遇到的問(wèn)題和有什么本質(zhì)區(qū)別沒簡(jiǎn)單介紹關(guān)于對(duì)的介紹，這里引用咀嚼之味針對(duì)官方介紹翻譯的的中文版本。目前已經(jīng)成為了的替代方案是無(wú)可爭(zhēng)議的事情了。 前言 近期在翻閱陳舊的歷史資料，整理之前飽受爭(zhēng)議的CSS Reset問(wèn)題，不過(guò)好像十多年過(guò)去，現(xiàn)在大家統(tǒng)一了口徑，紛紛推薦使用Normalize.css，包括Bootstrap都進(jìn)行...

    idealcn 評(píng)論0 收藏0

  • 關(guān)于CSS Reset 那些事（一）之 歷史演變與Normalize.css

    摘要：下面開始對(duì)進(jìn)行簡(jiǎn)單的介紹，關(guān)于兩者的差異區(qū)別可以看問(wèn)答平臺(tái)使用遇到的問(wèn)題和有什么本質(zhì)區(qū)別沒簡(jiǎn)單介紹關(guān)于對(duì)的介紹，這里引用咀嚼之味針對(duì)官方介紹翻譯的的中文版本。目前已經(jīng)成為了的替代方案是無(wú)可爭(zhēng)議的事情了。 前言 近期在翻閱陳舊的歷史資料，整理之前飽受爭(zhēng)議的CSS Reset問(wèn)題，不過(guò)好像十多年過(guò)去，現(xiàn)在大家統(tǒng)一了口徑，紛紛推薦使用Normalize.css，包括Bootstrap都進(jìn)行...

    calx 評(píng)論0 收藏0

  • 知識(shí)整理之CSS篇

    摘要：如對(duì)知識(shí)點(diǎn)感興趣，可移步至知識(shí)整理之篇就是針對(duì)不同的瀏覽器或不同版本瀏覽器寫特定的樣式達(dá)到讓瀏覽器兼容的過(guò)程。對(duì)于偽元素的定義偽元素在中創(chuàng)建了一些抽象元素，這些對(duì)象不存在與常文檔流中。隱藏元素的幾種方法該屬性隱藏元素，單元素在文檔流中仍占據(jù) CSS篇主要從CSS兼容、CSS3新特性、CSS選擇器、高頻屬性、高頻布局、高頻知識(shí)點(diǎn)、性能優(yōu)化等方面進(jìn)行歸納。如對(duì)HTML知識(shí)點(diǎn)感興趣，可移步至...

    ermaoL 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<