轻谈Normalize.css

Normalize.css 是 * ?

Normalize.css只是一个颇有点的CSS文件,但它在默认的HTML元素样式上提供了超过浏览器的高度一致性。相比叫传统的CSS
reset ,
Normalize.css是一样栽现代底、为HTML5预备的上品替代方案。Normalize.css现在就被用来Twitter
Bootstrap、HTML5
Boilerplate、GOV.UK、CSS
Tricks 以及大批外框架、工具及网站上。

  • Normalize.css 项目地址

  • Normalize.css
    于GitHub上的源码

Normalize.css到底有啊用

Normalize.css是如出一辙种植CSS
reset的代表方案。经过@necolas和@jon_neal花了几百只小时来全力钻研不同浏览器的默认样式的异样,这个类别终于变成了今天这么。

咱们创建normalize.css有下就几乎独目的:

  • 护卫中的浏览器默认样式而不是全然失去丢她
  • 一般化的体:为大部分HTML元素提供
  • 修复浏览器自身的bug并保管各浏览器的一致性
  • 优化CSS可用性:用有些有点技巧
  • 诠释代码:用注释和详尽的文档来

Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管此项目基于一般化的规格,但咱要以适用的地方使用了还实用的默认值。

怎么用 normalize.css

第一,安装或打Github下充斥Normalize.css,接下有星星点点种要途径去采用她。

  • 策一:将normalize.css作为你自己种之根基CSS,自定义样式值为满足设计师的要求。

  • 策二:引入normalize.css源码并当此基础及构建,在必要之下用你协调写的CSS覆盖默认值。

#### 问题: 那自己以link两个css的口舌,会无会见发冲突?

详见说:我利用Normalize.css是为像您所说的对准几乎所有的默认样式进行重置,让具有的浏览器上于无定义的体制浏览效果及平,那我再次link我要好的style.css是勿是吧得以于外的基本功及上自己的功力?

答:把Normalize.css里面的持有情节在自己之style.css的极其上面,那样使出冲突之口舌,写于后面的CSS设置默认是碰头挂掉写以前面的

normalize.css实实在在的价值优点

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

    Reset通过为几所有的素施加默认样式,强行让元素来同等的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。这就算代表你不用还为有着国有的排版元素还安样式。当一个因素于不同之浏览器中生出两样的默认值时,Normalize.css会力求为这些样式保持一致并尽可能和现时代专业相适合。

  2. Normalize.css 修复了浏览器的bug

    它们修复了普遍的桌面端和倒端浏览器的bug。这频繁超过了Reset所能到位的层面。关于这一点,Normalize.css修复的问题暗含了HTML5元素的展示设置、预格式化文字的font-size问题、在IE9中SVG的溢出起、许多起于各级浏览器与操作系统被的和表单相关的bug。

    可以看以下这个例子,看看对于HTML5中新出现的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 不会见于你的调试工具变的眼花缭乱

    采用Reset最给人口劳的地方实际上在浏览器调试工具中大段大段的继承链,如下图所显示。在Normalize.css中就非会见来这样的题目,因为当我们的守则遭到对多选择器的以时格外小心谨慎之,我们就会发生目的地对目标元素设置样式。
    图片 1

  4. Normalize.css 是模块化的

    这个项目已经让拆分为多个有关却同时独自的一部分,这使你能挺易吧杀明白地领略怎么样因素让设置了一定的值。因此这会叫你协调选择性地移除掉某些永远不会见用到有些(比如表单的一般化)。

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

    Normalize.css的代码基于详细而周的跳浏览器研究暨测试。这个文件被持有详细的代码说明并于Github
    Wiki中有更进一步的求证。这意味你可查找到各一行代码具体做到了什么工作、为什么要描绘这词代码、浏览器之间的差异,并且你可重爱地拓展好之测试。

    这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的,同时也让人们很容易地明白如何改进浏览器渲染。
    

## 结语
不论是由适用范围还是实行上,Normalize.css与Reset都发生巨大的两样。尝试一下马上有限种艺术并看望到底哪种更契合您的开支偏好是生值得的。这个类型于Github上因开源之形式支付。任何人都能够交给问题报要提交补丁。整个项目提高的历程对有人数都是可见的,而各一样差变动的由吗都勾于commit信息遭,这些还是有迹可循的。

相关文章