轻谈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信息被,这些还是有迹可循的。

相关文章