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

10,736
Normalize.css ——CSS Reset的友好替代品
  • 4.80 / 5 5
4.80分(10票)
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源代码赏析

喵~本文目前有2条留言,欢迎发表评论!

  1. 板凳也不错
    :

    是个好东西,我一直用reset,来试试这个咋样

    [回复]
  2. 传说中的沙发
    :

    都达到

    [回复]

打破沉默,我来发表评论鸟~