Bootstrap【Normalize.css】介绍,作用,使用方法

介绍


 

 Normalize.css
是一个颇有点之CSS文件(V5.0.0版本大小8KB),但它于默认的HTML元素样式上提供了超越浏览器的高度一致性。相比于人情的CSS resetNormalize.css凡是同一种植现代之、为HTML5备的甲替代方案。

  • Normalize.css
    项目地址
  • Normalize.css
    在GitHub上之源码
  • 由Bootstrap
    2开始让用于重置样式

 

作用&优点


 

  • 保存有用之浏览器默认样式若未是如有的初始化代码一样去其
  • 规范化大部分HTML元素
  • 更正浏览器自身之bug并包各级浏览器的一致性
  • 故有些略技巧优化CSS可用性
  • 用注释和详尽的文档来释疑代码

 

Normalize.css VS
传统初始化代码(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丁发生更加的证实。这意味着你得搜索到各个一行代码具体做到了啊工作、为什么要描绘就词代码、浏览器之间的出入,并且你可以重新易于地开展协调之测试。

这个路之目标是支援人们了解浏览器默认是何许渲染元素的,同时为为人们特别轻地领略什么改进浏览器渲染。

 

支撑之浏览器


 

  • Chrome (last two)
  • Edge (last two)
  • Firefox (last two)
  • Firefox ESR
  • Internet Explorer 8+
  • Opera (last two)
  • Safari 6+

Normalize.css v1
提供有旧版浏览器支持 (IE
6+, Safari 4+), 但是一度不再积极开发了。

* *

用法


 

 从下载Normalize.css,或者使用CDN,直接link到html文档中
或者 import到html文档/css文档中,

1.将normalize.css作团结种之基本功CSS,自定义样式值为满足设计师的急需。

2.引入normalize.css源码并当斯基础及构建,在必要的当儿将Normalize.css引入的职位位于自己写的css文件前覆盖默认值。

 

总结


 

援知乎gNahZ
tuNlAw的一个答就是是:

CSS Reset 是革命党,CSS Reset
里最激进那一边提倡不管而小子有因此没有因此,通通给我打消了那套行头,凭什么而
body 出生就是通过同环抱 margin,凭什么您姓 h 的于人家吃得胖,凭什么你 ul
戴一胳膊珠子。于是 *{margin:0;}
等等运动,把人家都拍扁了。看似是众生平当了,实则是浪费了资源以占不至便宜,有求于人家之时段还得贱贱地让加回去,实在要每户的默认样式了怎么惩罚?人家锅都抛炉子里烧了,自己看正在办吧。

Normalize.css
是改良派。他们发起,各个要素都出夫在的道理,简单粗暴地一视同仁凡是糟糕的。body
那同样环绕确实压了页面的生存空间,那便改成少。士农工商,谁发哪个之意向,给她们制定个正经,确保他们当其余浏览器里都关乎好温馨之体力劳动。

作者:gNahZ tuNlAw
链接:https://www.zhihu.com/question/20094066/answer/25004727
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

v5.0.0 源码解读


 

见Nirvana-zsy的其余一样篇博客

相关文章