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版本为对象，所谓翻译只是将其中的注释简单翻译一下，方便查看源代码体验其精妙之处。（来源：姬小光）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370

/*! 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源代码赏析

本文标签：CSS Reset, CSS3, HTML5, Normalize.css 
©声明：本站原创文章采用 BY-NC-SA 创作共用协议，转载时请以链接形式标明本文地址；非原创（转载）文章版权归原作者所有。【查看版权声明】
©转载请注明来源： http://devework.com/normalize-css-a-better-css-reset.html