Normalize.css的施用(重置表)

正文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/

Normalize.css 只是一个好有点的CSS文件,但它们以默认的HTML元素样式上提供了超浏览器的高度一致性。相比叫人情的CSS resetNormalize.css举凡相同种植现代之、为HTML5预备的上乘替代方案。Normalize.css今昔既于用于Twitter
Bootstrap、HTML5
Boilerplate、GOV.UK、Rdio、CSS
Tricks 以及许许多多其它框架、工具和网站上。

  • Normalize.css
    项目地址
  • Normalize.css
    以GitHub上之源码

综述

Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花费了几百单小时来大力钻研不同浏览器的默认样式的反差,这个路终于变成了现这么。

咱创建normalize.css生下就几个目的:

  • 护得力之浏览器默认样式而非是截然失去丢她
  • 一般化的体裁:为大部分HTML元素提供
  • 修补浏览器自身的bug并包各浏览器的一致性
  • 优化CSS可用性:用有些略带技巧
  • 分解代码:用注释和详尽的文档来

Normalize.css支撑连手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的情、表单和表格都进行了一般化。尽管这类型基于一般化的规则,但我们或以适度的地方使用了重新实用的默认值。

Normalize vs Reset

知道Normalize.css和传统Reset的别是生有价之。

1. Normalize.css 保护了来价之默认值

Reset由此为几有的素施加默认样式,强行让元素来雷同之视觉效果。相比之下,Normalize.css保持了过多默认的浏览器样式。这便代表你不要再行为所有公共的排版元素还设置样式。当一个元素于不同之浏览器中生出差的默认值时,Normalize.css会晤力求让这些样式保持一致并尽可能和当代正式相抱。

2. Normalize.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. Normalize.css 不会见叫您的调节工具变的眼花缭乱

下Reset最让人劳的地方实际上在浏览器调试工具中大段大段的继承链,如下图所展示。在Normalize.css未遭不怕不见面产生诸如此类的题材,因为于咱们的守则遭到针对多选择器的以时杀小心的,我们就会有目的地对目标元素设置样式。

Bootstrap 1

4. Normalize.css 是模块化的

这路曾经让拆分为多单有关却又单独的局部,这令你可知生轻为要命懂地解如何要素让装置了特定的值。因此这能够吃您协调选择性地移除掉某些永远不会见用到部分(比如表单的一般化)。

5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而完美的超浏览器研究与测试。这个文件中具备详细的代码说明并以Github
Wiki遇有越的辨证。这代表你得搜索到各级一行代码具体做到了啊工作、为什么要描绘这句代码、浏览器中的距离,并且你得还易地展开友好的测试。

以此类型之靶子是赞助人们了解浏览器默认是安渲染元素的,同时也给众人非常易地亮怎么改善浏览器渲染。

怎Bootstrap使用 normalize.css

先是,安装或从Github下载Normalize.css,接下去有有限种植重大路径去用它。

  • 策略一:将normalize.css当你协调种的基本功CSS,自定义样式值为满足设计师的需要。
  • 策略二:引入normalize.css源码并当是基础及构建,在必要的时用而自己写的CSS覆盖默认值。

结语

不管由适用范围还是实行上Normalize.cssReset还发生特大的不比。尝试一下应声片栽艺术并探望到底哪种更切合你的开销偏好是非常值得的。这个路于Github上为开源的花样支付。任何人都能交给问题报还是提交补丁。整个项目发展的进程对富有人都是可见的,而诸一样不良反的案由吗还写于commit信息遭,这些都是有迹可循的。

 

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

相关文章