normalize.css使用方法,normalize.css下载

来,让我们谈一谈 Normalize.css

Nov 18, 2014 - 浏览量:22,046次 | Normalize.css CSS

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

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter BootstrapHTML5 BoilerplateGOV.UKRdioCSS Tricks 以及许许多多其他框架、工具和网站上。

综述

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中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

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

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。

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

如何使用 normalize.css

首先,安装或从Github下载Normalize.css,接下来有两种主要途径去使用它。

  • 策略一:将normalize.css作为你自己项目的基础CSS,自定义样式值以满足设计师的需求。
  • 策略二:引入normalize.css源码并在此基础上构建,在必要的时候用你自己写的CSS覆盖默认值。

结语

无论从适用范畴还是实施上,Normalize.cssReset都有极大的不同。尝试一下这两种方法并看看到底哪种更适合你的开发偏好是非常值得的。这个项目在Github上以开源的形式开发。任何人都能够提交问题报告或者提交补丁。整个项目发展的过程对所有人都是可见的,而每一次改动的原因也都写在commit信息中,这些都是有迹可循的。

相关阅读

关于更多默认UA样式的详细信息:

本文的版权归作者 邹润阳 所有,采用 Attribution-NonCommercial 3.0 License。任何人可以进行转载、分享,但不可在未经允许的情况下用于商业用途;转载请注明出处。感谢配合!

时间: 2024-10-04 20:37:46

normalize.css使用方法,normalize.css下载的相关文章

jQuery,CSS:offset()方法,CSS scrollTop属性

offset() 返回偏移坐标对象,包括top,left两个Number属性,像素数值 $(selector).offset().top $(selector).offset().left 详细 scrollTop属性 设置文档从文档顶部开始卷起的像素值 scrollTop:10;

css添加方法

css添加方法 1.css添加方法--行内 ? ? <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Document</title></head><body>    <p style="color:red;">       天使投资    </p&

normalize.css使用方法

综述 Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式:为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化CSS可用性:用一些小技巧 解释代码:用注释和详细的文档来 Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素.排版.列表.嵌入的内容.表单和表格都进行了一般化.尽管这个项目基于一般化的原则,但我们还是在合适的

CSS_添加CSS文件方法,盒模型和定位

学习笔记整理,非原创. 添加css的方法 链接外部样式表 <link rel=stylesheet type=text/css href=style.css> Rel表示在页面中使用外部的样式表.type指文件的类型是样式表文件,href指文件的位置. 内部样式表 <style type=”text/css”> <!— //定义style --> </style> 导入外部 样式表 <style type=”text/css”> <!— @

HTML中引入CSS的方法

在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <style type="text/css"> ...此处写CSS样式 </

WordPress引入css/js方法总结

WordPress引入css/js方法很多,条件很多.如何全局加载,或仅在某些页面精准加载,什么时候需要先注册脚本再加载,本文希望找到最简单的方式,并给出探索更多方法的途径. 在前台加载css/js 用wp_enqueue_script()函数加载js,用wp_enqueue_style()加载css,加载资源的位置(action)只有一个——wp_enqueue_scripts. 用wp_enqueue_系列函数可以更好的处理脚本样式表的依赖关系,防止重复加载,以twentyfifteen主题

让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscroll改变top值是一个方法,但如果滚轮滚的快,会出现卡闪烁情况.而如高级浏览器如果也这样用,那显然有失大雅,除非JS中判断浏览器版本.但是在这里笔者要讲解的是使用CSS完成fixed效果. 千言万语不及实例一个: 以上是笔者在IETester下测试IE6的fixed,注意看滚动条.其中导航采用的是po

理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序

理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序 在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之外的效果. 大部分人,都会用自己的方式,对这个顺序死记硬背. 熟记顺序,无疑是写样式时最快捷的方法,牛人们的记忆方法也是五花八门. 我见过有酱婶的:lv的包包hao,这倒是实话. 比较奇葩的,我在baidu上输入lvha,竟然自动关联出鹿

豆瓣移动端风格的css命名方法与学习

在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他网站来说还是比较文艺清爽的,所以很值得去向他们团队学习,学习的地方很多,先来取名把. 在最外面的一个<div class="ck-root">.....</div>首先内容先用一个大的div盒子包起来, <div class="ck-root&quo