关于CSS Reset 那些事（一）之历史演变与Normalize.css

前言

近期在翻阅陈旧的历史资料，整理之前饱受争议的CSS Reset问题，不过好像十多年过去，现在大家统一了口径，纷纷推荐使用Normalize.css，包括Bootstrap都进行了内置使用，可见它的认可程度之高。

由于文章涉及内容较多，会分为章节进行介绍：

第一章，
整理CSS Reset历史的演变痕迹，从第一份CSS Reset的诞生，到提出No CSS Reset的思想，再到国产CSS Reset 1.0版本的骄傲诞生；最终时过境迁，CSS Reset被Normalize.css所替代;
随后开始认识Normalize.css，了解它都做了那些事情，诉说与CSS Reset的区别，突出优势，告诉你为什么要使用它。

第二章，
由于Normalize.css只提供了英文文档，没有提供对应的中文版本，所以从这章开始对其源码进行翻译整理与解读，本章包含 html与body，HTML5元素，链接，语义化文本标签，内嵌元素，群组元素等内容解读。

第三章，
继续来介绍源码中的表单和表格部分，并且整理一份normalize-zh.css中文注释的版本上传至Github，供大家参考使用，敬请期待

CSS Reset 历史回顾

第一份 CSS Reset

为什么会有CSS Reset的存在呢？那是因为早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。关于浏览器的默认样式请点击查阅！

根据玉伯的文章中透漏，最早的一份CSS Reset来自Tantek 的undohtml.css，从URL中的日期可以看出时间是2004年，Tantek根据自身需要对于一些标签进行了简单的重置，源码如下：

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

核心代码与作用

随后加入到CSS Reset的行列的大牛越来越多，比如业界领袖 YUI团队以及Eric Meyer把这份代码内容变的更加充实，但是不难发现代码的核心部分还是对样式进行重置，在此可以结论出早期的CSS Reset的作用就是清除所有浏览器默认样式，让它一切归零！

* { margin:0; padding:0 }

不过在此之后一段时间内，有人开始批判这种暴力清零的CSS Reset方式，随后部分前端开发者们也传来一些争议声音，比如：

*{ margin:0; padding:0; }会带来性能问题
使用通配符存在隐性问题
过渡的标签重置等于画蛇添足
过渡的标签重置导致语言元素失效

注：由于都是一些陈旧的老问题，就不提供出处了，再此不过多讨论，感兴趣Google~

No CSS Reset 思想

其实面对于争议问题，国外的大牛Jonathan Snook是第一个提出No CSS Reset思想，其核心是Less is more，少即是多，不再提倡使用暴力归零的方法。

后来玉伯也在《Reset CSS研究》文章中阐述说明，其实 Eric Meyer 并不期望大家下载他的 CSS Reset 后直接就拿去用，而是应该按照自己的需求，适量裁剪和修改后再进行使用。

后来YUI更新了CSS Reset，还配套了 cssfonts.css 和 cssbase.css。cssreset.css只负责清除默认样式,而cssfonts.css和 cssbase.css 则负责将一些元素的默认样式再重设回来，这样就消除了之前的争议，这一方案迅速被大家接受了，又开始愉快的拷贝使用起来。

YUI 提供的cssfonts.css

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*//*** Percents could work for IE, but for backCompat purposes, we are using keywords.* x-small is for IE6/7 quirks mode.*/
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small; /* for IE */*font:x-small; /* for IE in quirks mode */
}/*** Nudge down to get to 13px equivalent for these form elements*/
select,
input,
button,
textarea {font:99% arial,helvetica,clean,sans-serif;
}/*** To help tables remember to inherit*/
table {font-size:inherit;font:100%;
}/*** Bump up IE to get to 13px equivalent for these fixed-width elements*/
pre,
code,
kbd,
samp,
tt {font-family:monospace;*font-size:108%;line-height:100%;
}/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssfonts { display: none; }

国产 CSS Reset

上面展现的是YUI最新版本V3.18.1，但是很尴尬的发现，YUI 提供的 cssfonts.css 和 cssbase.css 只考虑了西欧文字，对汉字的支持却不多，这就导致中国很多用户只使用了cssreset.css，而没有使用其他两个。

据说nake和adiaos两大运动品牌到天朝后，有些运动科技会缩水，但是万万没想到，万能的代码到了天朝也是会缩水的。

于是乎，有些大牛不甘心，不仅仅厌倦了国内抄来抄去的CSS Reset现状，也受够了YUI只考虑西欧洲字体，不考虑汉字的缺陷，大厂们就开始摸索制定属于自己的CSS Reset，比如2009年阿里Kissy框架 (源码连接已失效，主页留纪念) 的第一份CSS Reset：

/* KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*//* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */margin: 0;padding: 0;
}/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie *//*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//* 重置列表元素 */
ul, ol { list-style: none; }/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */border-bottom: 1px dotted;cursor: help;
}q:before, q:after { content: ''; }/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}/* 重置表格元素 */
table {border-collapse: collapse;border-spacing: 0;
}/* 重置 hr */
hr {border: none;height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

这应该是国内的第一份CSS Reset，是玉伯和另外一位前辈完成的，向他们致敬，记得玉伯在写完第一版本后，在总结文章的结尾还是千叮咛，万嘱咐说：

请记住：永远不存在万能解决方案，永远没有银弹。
因此我的建议和 Eric 是一样的：请根据具体需求，适量裁剪和修改后再使用。

替代品 Normalize.css

再把历史拉回到今天，时过迁境，中国的前端职位越发的火热，开发者们也变得更为专业，CSS Reset 泛滥使用逐渐淡出的前端的视野，被取而代之就是Normalize.css，关于对CSS Reset 与 Normalize.css的区别？可以引用知乎上张小核桃的一个回答：

CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。

Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。

下面开始对Normalize.css进行简单的介绍，关于两者的差异区别可以看问答平台：
使用normalize.css遇到的问题？
Normalize.css 和 Reset CSS 有什么本质区别没？

Normalize.css 简单介绍

关于对Github的介绍，这里引用咀嚼之味针对官方介绍翻译的的中文版本。

简要概述

Normalize.css 是@necolas和@jon_neal 两位大牛花了几百个小时来研究不同浏览器的默认样式的差异而得出的结晶，感谢前辈们的贡献。

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

目前Normalize.css 已经成为了CSS Reset的替代方案是无可争议的事情了。国内著名的AliceUI，AmazeUI 框架都是基于或者借鉴Normalize.css进行的制定化版本。

可以从这里下载：
Github：https://github.com/necolas/normalize.css/