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的外一样篇博客

相关文章