Bootstrap诺玛lize.css的利用(重置表)

本文译自诺玛lize.css官网: http://nicolasgallagher.com/about-normalize-css/

诺玛lize.css 只是一个很小的CSS文件,但它在默许的HTML元素样式上提供了跨浏览器的惊人一致性。相比较于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的上品替代方案。Normalize.css明天已经被用于Twitter
Bootstrap
HTML5
Boilerplate
Bootstrap,、GOV.UKRdioCSS
Tricks
 以及巨大其余框架、工具和网站上。

综述

Normalize.css是一种CSS reset的替代方案。经过@necolas@jon_neal花了几百个时辰来努力钻研不相同浏览器的默认样式的距离,这么些类型终于成为了今日如此。

大家创立normalize.css有上边那多少个目标:

  • 保安得力的浏览器默许样式而不是一点一滴去掉它们
  • 一般化的样式:为绝一大半HTML元素提供
  • 修补浏览器自身的bug并保险各浏览器的一致性
  • 优化CSS可用性:用部分小技巧
  • 释疑代码:用注释和详细的文档来

Normalize.css协助包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进展了一般化。固然那个类型基于一般化的规则,但大家如故在适度的地点采用了更实用的默许值。

Normalize vs Reset

知道Normalize.css和传统Reset的分别是万分有价值的。

1. 诺玛lize.css 爱抚了有价值的默许值

Reset因而为大概所有的元素施加默许样式,强行使得元素有一样的视觉效果。相比较之下,Normalize.css保持了无数默许的浏览器样式。那就表示你不要再为所有国有的排版元素重新安装样式。当一个因素在区其余浏览器中有两样的默许值时,Normalize.css会力求让那一个样式保持一致并尽量与当代正式相适合。

2. 诺玛lize.css 修复了浏览器的bug

它修复了广泛的桌面端和移动端浏览器的bug。那往往超越了Reset所能做到的层面。关于这点,Normalize.css修复的难点暗含了HTML5元素的突显设置、预格式化文字的font-size难点、在IE9中SVG的溢出、许多并发在各浏览器和操作系统中的与表单相关的bug。

可以看以下这些例子,看看对于HTML5中新辈出的input类型searchNormalize.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. 诺玛lize.css 不会让您的调试工具变的混杂

动用Reset最令人干扰的地点莫过于在浏览器调试工具中大段大段的继承链,如下图所示。在Normalize.css中就不会有那样的题材,因为在咱们的守则中对多选取器的施用时那么些小心的,我们仅会有目的地对目标元素设置样式。

Bootstrap 1

4. 诺玛lize.css 是模块化的

本条项目已经被拆分为多少个相关却又单独的一部分,那使得你可见很不难也很精晓地明白怎样因素被安装了一定的值。由此那能让您协调选用性地移除掉某些永远不会用到有些(比如表单的一般化)。

5. 诺玛lize.css 拥有详细的文档

诺玛lize.css的代码基于详细而完善的跨浏览器商量与测试。这几个文件中颇具详细的代码表明并在Github
Wiki
中有更进一步的表明。那意味你可以找到每一行代码具体做到了怎样工作、为何要写那句代码、浏览器之间的差别,并且你可以更易于地举行和谐的测试。

这几个类其余对象是支援人们明白浏览器默许是哪些渲染元素的,同时也让芸芸众生很简单地精通如何革新浏览器渲染。

怎么样运用 normalize.css

第一,安装或从Github下载Normalize.css,接下去有二种首要途径去行使它。

  • 策略一:将normalize.css用作你自己项目标基础CSS,自定义样式值以知足设计师的需要。
  • 策略二:引入normalize.css源码并在此基础上营造,在要求的时候用你协调写的CSS覆盖默许值。

结语

甭管从适用范围仍旧履行上Normalize.cssReset都有高大的例外。尝试一下那二种办法并看望究竟哪一种更合乎你的付出偏好是丰盛值得的。那些系列在Github上以开源的格局支付。任哪个人都可以交给难点报告依然提交补丁。整个项目升高的历程对所有人都是可见的,而每三回变动的原故也都写在commit信息中,那一个都是有迹可循的。

 

转发地址:http://jerryzou.com/posts/aboutNormalizeCss/

相关文章