成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

來，讓我們談一談Normalize.css

_Zhao / 1081人閱讀

摘要：相比于傳統(tǒng)的，是一種現(xiàn)代的為準(zhǔn)備的優(yōu)質(zhì)替代方案。保護(hù)了有價(jià)值的默認(rèn)值通過為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)，會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。

  
本文譯自 http://nicolasgallagher.com/about-normalize-css/

  最初發(fā)布于我的博客：http://jerryzou.com/posts/aboutNormalizeCss/

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)過@necolas和@jon_neal花了幾百個(gè)小時(shí)來努力研究不同瀏覽器的默認(rèn)樣式的差異，這個(gè)項(xiàng)目終于變成了現(xiàn)在這樣。

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

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

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

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

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

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

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通過為幾乎所有的元素施加默認(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ù)的問題包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問題、在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最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會(huì)有這樣的問題，因?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ì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測(cè)試。

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

如何使用 normalize.css

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

策略一：將normalize.css作為你自己項(xiàng)目的基礎(chǔ)CSS，自定義樣式值以滿足設(shè)計(jì)師的需求。

策略二：引入normalize.css源碼并在此基礎(chǔ)上構(gòu)建，在必要的時(shí)候用你自己寫的CSS覆蓋默認(rèn)值。

結(jié)語

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

相關(guān)閱讀

關(guān)于更多默認(rèn)UA樣式的詳細(xì)信息：

WHATWG suggestions for rendering HTML documents

Internet Explorer User Agent Style Sheets

CSS2.1 User Agent Style Sheet Defaults

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

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

相關(guān)文章

  • 談一談Vuex

    摘要：是什么官方文檔說道是一個(gè)專為應(yīng)用程序開發(fā)的狀態(tài)管理模式。觸發(fā)之別名篇觸發(fā)之對(duì)象展開運(yùn)算符篇觸發(fā)之對(duì)象展開運(yùn)算符別名篇先引用官方文檔的說法類似于，不同在于提交的是，而不是直接變更狀態(tài)。 Vuex是什么 官方文檔說道：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化 什么是狀態(tài)管理模式...

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

  • 簡(jiǎn)單談一談Java內(nèi)部類的使用原因

    摘要：密碼備份文件我們來看其測(cè)試運(yùn)行結(jié)果密碼備份文件這樣做的好處之一就是，我們可以在這個(gè)方法中增加一些判斷語句，起到數(shù)據(jù)安全的作用。 使用內(nèi)部類的原因 學(xué)習(xí)總得知其所以然，前面的一篇文章中我有提到過關(guān)于java內(nèi)部類的幾種用法以及一些示例，但是不明白內(nèi)部類具體可以做什么，顯然學(xué)習(xí)起來很渺茫，今天的文章簡(jiǎn)單說一說使用內(nèi)部類的幾個(gè)原因，為了可讀性更好，示例都極大的簡(jiǎn)化了，希望能給初學(xué)者一些幫助 ...

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

  • 談一談JVM垃圾回收

    摘要：這個(gè)算法看似不錯(cuò)而且簡(jiǎn)單，不過存在這一個(gè)致命傷當(dāng)兩個(gè)對(duì)象互相引用的時(shí)候，就永遠(yuǎn)不會(huì)被回收于是引用計(jì)數(shù)算法就永遠(yuǎn)回收不了這兩個(gè)對(duì)象，下面介紹另一種算法。 前言 ? 如果要問Java與其他編程語言最大的不同是什么，我第一個(gè)想到的一定就是Java所運(yùn)行的JVM所自帶的自動(dòng)垃圾回收機(jī)制，以下是我學(xué)習(xí)JVM垃圾回收機(jī)制整理的筆記，希望能對(duì)讀者有一些幫助。 哪些內(nèi)存需要回收？what？ ? ...

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

  • 談一談javascript面向?qū)ο?/b>

    摘要：從今天起我們開始討論的面向?qū)ο竺嫦驅(qū)ο蟾拍罾斫饷嫦驅(qū)ο笳Z言有個(gè)標(biāo)志它們都具有類的概念，通過類可以創(chuàng)建任意多個(gè)具有相同屬性和方法的對(duì)象。 從今天起我們開始討論javascript的面向?qū)ο?面向?qū)ο蟾拍罾斫?面向?qū)ο笳Z言有個(gè)標(biāo)志=>它們都具有類的概念，通過類可以創(chuàng)建任意多個(gè)具有相同屬性和方法的對(duì)象。面向?qū)ο笥腥筇匦? 封裝 繼承 多態(tài) 但JS中對(duì)象與純面向?qū)ο笳Z言中的對(duì)象是不同的 J...

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

  • 談一談云服務(wù)器和主機(jī)建站配置要求 - 搭建網(wǎng)站需要的主機(jī)配置方案-老部落

    摘要：老蔣經(jīng)?？吹接芯W(wǎng)友詢問搭建網(wǎng)站的時(shí)候主機(jī)和云服務(wù)器到底如何選擇及建站要求建站要求。第二機(jī)房選擇定位云服務(wù)器或者主機(jī)商的機(jī)房還是有很多的。當(dāng)然，前者是需要備案的，后者亞洲機(jī)房不要備案。配置要求，我們還需要根據(jù)系統(tǒng)或者項(xiàng)目來決定。 老蔣經(jīng)?？吹接芯W(wǎng)友詢問搭建網(wǎng)站的時(shí)候主機(jī)和云服務(wù)器到底如何選擇及建站要求。比如對(duì)于主機(jī)商的選擇、主機(jī)機(jī)房，以及配置要求等。確實(shí)，我們?cè)诳吹礁鱾€(gè)云...

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

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

0條評(píng)論

閱讀需要支付1元查看
<