Normalize.css ——CSS Reset的友好替代品

最近才第一次接触这个Normalize.css,之前Jeff 都是采用CSS Reset的,但如今发现现在流行这个Normalize.css 了。自己也查阅了不少资料去了解,现在权当是笔记放在这里吧。

Normalize.css 简介

官方网站:http://necolas.github.io/normalize.css/

浏览器支持情况:Chrome, Firefox, Opera, Safari 6+, IE 8+

Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。

它能做什么

  • 保留有用的默认值,这个区别于其他的CSS resets
  • 标准化大范围的HTML elements的样式
  • 纠正bugs,使浏览器具体通用性
  • 通过一些巧妙的改进来增强可用性
  • 用具体的说明来讲解代码的用处

Normalize.css 与 CSS Reset 有什么区别?

reset 的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。例如 yui3 reset 中的一段: ol, ul {list-style: none} h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal} normalize 的理念则是尽量保留浏览器的默认样式,不进行太多的重置。 ——来源:segmentfault

Normalize 相对「平和」,注重通用的方案,重置掉该重置的样式,保留有用的 user agent 样式,同时进行一些 bug 的修复,这点是 reset 所缺乏的。 Reset 相对「暴力」,不管你有没有用,统统重置成一样的效果,且影响的范围很大,讲求跨浏览器的一致性。 Normalize 给我的感觉就是不讲求样式一致,而讲求通用性和可维护性。 这点可以从详细的注释和模块化的结构体现出来。 ——来源:知乎

个人感觉是HTML5、CSS3 时代的CSS Reset。

Normalize.css 源码中文注释

中文注释以2.0.1版本为对象,所谓翻译只是将其中的注释简单翻译一下,方便查看源代码体验其精妙之处。(来源:姬小光

/*! normalize.css v2.0.1 | MIT License | [git][4].io/normalize */   /* ========================================================================== HTML5 display definitions ========================================================================== */   /* * 更正IE 8/9中未定义的‘block’元素显示。 */   article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }   /* * 更正IE 8/9中未定义的‘inline-block’元素显示 */   audio, canvas, video { display: inline-block; }   /* * 防止现代浏览器将没有controls属性的的‘audio’元素显示出来 * 移除 iOS 5 设备中多余的高度 */   audio:not([controls]) { display: none; height: 0; }   /* * 校正IE 8/9中‘hidden’属性不起作用的问题 */   [hidden] { display: none; }   /* ========================================================================== 基本 ========================================================================== */   /* * 1. 将默认字体设置为 sans-serif * 2. 在不禁止用户缩放的情况下避免iOS设备方向调整后自动校正字体大小 */   html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ }   /* * 移除缺省的外边距 */   body { margin: 0; }   /* ========================================================================== Links ========================================================================== */   /* * 校正‘outline’在Chrome和其他浏览器间的不一致 */   a:focus { outline: thin dotted; }   /* * 增强在所有浏览器中聚焦和鼠标悬停时的可读性 */   a:active, a:hover { outline: 0; }   /* ========================================================================== 排版 ========================================================================== */   /* * 校正 Firefox 4+,Safari 5 和 Chrome 中‘section’和‘article’内的‘h1’字体大小 */   h1 { font-size: 2em; }   /* * 校正IE 8/9, Safari 5 和 Chrome中样式不呈现的问题 */   abbr[title] { border-bottom: 1px dotted; }   /* * 校正 Firefox 4+, Safari 5 和 Chrome 中‘bolder’的样式 */   b, strong { font-weight: bold; }   /* * 校正 Safari 5 和 Chrome 中样式不呈现的问题 */   dfn { font-style: italic; }   /* * 校正 IE 8/9 中样式不呈现的问题 */   mark { background: #ff0; color: #000; }   /* * 更正 Safari 5 和 Chrome 中奇怪的字体设置 */   code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }   /* * 增强所有浏览器中预格式化文本的可读性 */   pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }   /* * 设置一致的引用类型 */   q { quotes: "\201C" "\201D" "\2018" "\2019"; }   /* * 校正所有浏览器中易变且不一致的字体大小 */   small { font-size: 80%; }   /* * 防止所有浏览器中的‘sub’和‘sup’影响到行高(line-height) */   sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }   sup { top: -0.5em; }   sub { bottom: -0.25em; }   /* ========================================================================== 嵌入内容 ========================================================================== */   /* * 移除在 IE 8/9 中嵌入到‘a’元素时的边框 */   img { border: 0; }   /* * 更正 IE 9 中奇怪的‘overflow’表现 */   svg:not(:root) { overflow: hidden; }   /* ========================================================================== Figures ========================================================================== */   /* * 更正 IE 8/9 和 Safari 5 中外边距不展示的问题 */   figure { margin: 0; }   /* ========================================================================== 表单 ========================================================================== */   /* * 定义一致的边框、外边距和内边距 */   fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }   /* * 1. 更正 IE 8/9 中颜色不继承的问题 * 2. 移除内边距确保人们在将fieldset设置为0时不会大跌眼镜 */   legend { border: 0; /* 1 */ padding: 0; /* 2 */ }   /* * 1. 更正所有浏览器中字体不继承的问题 * 2. 更正所有浏览器中字号不继承的问题 * 3. 更正 Firefox 4+, Safari 5 和 Chrome 中外边距不同的问题 */   button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ }   /* * 更正 Firefox 4+ 用户代理样式表(UA stylesheet)中在‘input’上 * 设置‘line-height’时使用‘!important’的问题 */   button, input { line-height: normal; }   /* * 1. 避免 Android 4.0.* 中的 WebKit bug ,该bug会破坏原生的‘audio * 和‘video’控制器 * 2. 更正 iOS 中无法设置可点击的‘input’的问题 * 3. 增强图片类型以及其他类型的‘input’中指针的可用性以及样式的一致性 */   button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }   /* * 重置disabled元素的默认指针样式 */   button[disabled], input[disabled] { cursor: default; }   /* * 1. 调整 IE 8/9 box sizing 被设置为 ‘content-box’ 的问题 * 2. 移除 IE 8/9 中多余的内边距 */   input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }   /* * 1. 校正 Safari 5 和 Chrome 中 ‘appearance’ 被设置为 ‘searchfield’ 的问题 * 2. 校正 Safari 5 和 Chrome 中 ‘box-sizing’ 被设置为 `‘border-box’ 的问题 * (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; }   /* * 移除 OS X 中 Safari 5 和 Chrome 内部的内边距以及搜索框的取消按钮 */   input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }   /* * 移除 Firefox 4+ 内部的内边距 */   button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }   /* * 1. 移除 IE 8/9 中默认的垂直滚动条 * 2. 增强所有浏览器中的对对齐以及可读性 */   textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ }   /* ========================================================================== 表格 ========================================================================== */   /* * 移除单元格间大部分的间距 */   table { border-collapse: collapse; border-spacing: 0; }

扩展阅读:

Normalize.css源代码赏析

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏yang0range

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被...

60920
来自专栏前端黑板报

居中“魔法”总结

作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因...

264100
来自专栏互联网开发者交流社区

css多浏览常见问题

10730
来自专栏编程

CSS布局之垂直居中一

CSS中的水平居中是非常容易实现的,比如对于行内元素,将它的父级元素设置text-align为center既可。 ? 对于块级元素,设置它的margin:aut...

20570
来自专栏三十课

【收藏】这么多WEB组件(CSS),攒一个网站够了吧?

总是喜欢简单又精致的东西,美的不繁复也不张扬。这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?

451140
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

12640
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

235100
来自专栏青玉伏案

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1、<html>和</html> 标签限定了文档的开始和结束点。 属性: (1)  dir: 文本的显示方向...

27050
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

16510
来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

433110

扫码关注云+社区

领取腾讯云代金券