Normalize.css的使用及下载
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset
,Normalize.css
是一种现代的、为HTML5准备的优质替代方案。Normalize.css
现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
Normalize.css
是一种CSS reset
的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异,这个项目终于变成了现在这样。
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
类型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
中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。
5. Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。
这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的,同时也让人们很容易地明白如何改进浏览器渲染。
如何使用 normalize.css
首先,安装或从Github下载Normalize.css,接下来有两种主要途径去使用它。
策略一:将
normalize.css
作为你自己项目的基础CSS,自定义样式值以满足设计师的需求。策略二:引入
normalize.css
源码并在此基础上构建,在必要的时候用你自己写的CSS覆盖默认值。
结语
无论从适用范畴还是实施上,Normalize.css
与Reset
都有极大的不同。尝试一下这两种方法并看看到底哪种更适合你的开发偏好是非常值得的。这个项目在Github上以开源的形式开发。任何人都能够提交问题报告或者提交补丁。整个项目发展的过程对所有人都是可见的,而每一次改动的原因也都写在commit信息中,这些都是有迹可循的。
原文链接:http://www.colotu.com/html/gcs/24.html
Normalize.css的使用及下载的更多相关文章
- normalize.css入门和下载
CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ...
- [转载]来,让我们谈一谈Normalize.css
来源 : http://segmentfault.com/a/1190000002239676 ---------------------------------------------------- ...
- Normalize.css – 现代 Web 开发必备的 CSS resets
Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的 ...
- Normalize.css的使用(重置表)
本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在 ...
- 来,让我们谈一谈Normalize.css
本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormal ...
- Normalize.css:优化重置CSS默认属性
Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...
- Normalize.css介绍,作用,使用方法
介绍 Normalize.css 是一个很小的CSS文件(V5.0.0版本大小8KB),但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.c ...
- [转]浅谈Normalize.css
原文地址:https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相 ...
- CSS之Normalize.css的使用(重置表)
本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在 ...
随机推荐
- 在 Linux 上使用 Jexus + Mono 建立 Asp.Net 网站.
godaddy 买了个net空间,一点也不好用. 几个G的数据, 上传数据只有几kb , 想用 ssh 登录上去用 wget 下载,也不行 windows的主机貌似没有 ssh 功能... 后来实在忍 ...
- xamarin开发UWP元素的初始化设置顺序
在开发xamarin的UWP平台不可避免的遇到一下坑,现记录下来,希望对后面踩坑有帮助. 一.listview的分组问题:当我们使用listview的IsGroupingEnabled=true时,如 ...
- 常用的Webpack配置
官方文档: http://webpack.github.io/docs/ 1. 安装python2. 安装node.js msi3. npm自动打包在最新的node.js安装包里 被封的包用国内镜像下 ...
- java终端获取输入
上一篇博客已经介绍了System.in这个输入流这次谈谈java如何获取终端(控制台)的输入 (1)BufferedReader JDK 1.4 及以下的版本中要想从控制台中输入数据只有一种办法,即使 ...
- 06.GitHub实战系列~6.过滤器过滤掉的文件如何上传
比如我想发布一个软件版本供普通人下载: Git库建立了VS的过滤规则后 dll 和 exe 是自动过滤的,这时候我们得加参数(看图)git add xxx -f
- SQL Server-分页方式、ISNULL与COALESCE性能分析(八)
前言 上一节我们讲解了数据类型以及字符串中几个需要注意的地方,这节我们继续讲讲字符串行数同时也讲其他内容和穿插的内容,简短的内容,深入的讲解,Always to review the basics. ...
- 从零开始编写自己的C#框架(15)——Web层后端登陆功能
对于一个后端管理系统,最重要内容之一的就是登陆页了,无论是安全验证.用户在线记录.相关日志记录.单用户或多用户使用帐号控制等,都是在这个页面进行处理的. 1.在解决方案中创建一个Web项目,并将它设置 ...
- angular2系列教程(三)components
今天,我们要讲的是angualr2的components. 例子
- AFNetworking 3.0 源码解读(三)之 AFURLRequestSerialization
这篇就讲到了跟请求相关的类了 关于AFNetworking 3.0 源码解读 的文章篇幅都会很长,因为不仅仅要把代码进行详细的的解释,还会大概讲解和代码相关的知识点. 上半篇: URI编码的知识 关于 ...
- YYModel 源码解读 总结
在使用swfit写代码的过程中,使用了下oc写的字典转模型,发现有些属性转不成功,就萌生了阅读源码的想法. 其实一直都知道Runtime机制,但并没有系统的学习,可能是因为平时的使用比较少,无意间在g ...