0
# normalize.css
1
2
normalize.css is a modern alternative to CSS resets that preserves useful browser defaults while normalizing styles for cross-browser consistency. Unlike traditional CSS resets that remove all styling, normalize.css corrects bugs and browser inconsistencies, provides useful defaults, and includes detailed comments explaining what each rule accomplishes.
3
4
## Package Information
5
6
- **Package Name**: normalize.css
7
- **Package Type**: npm
8
- **Language**: CSS
9
- **Installation**: `npm install --save normalize.css`
10
- **CDN**: https://yarnpkg.com/en/package/normalize.css
11
- **Download**: https://necolas.github.io/normalize.css/latest/normalize.css
12
- **Size**: ~6KB
13
- **Dependencies**: None (standalone CSS)
14
15
## Core Imports
16
17
**HTML Link Tag:**
18
```html
19
<link rel="stylesheet" href="normalize.css">
20
```
21
22
**CSS Import:**
23
```css
24
@import "normalize.css";
25
```
26
27
**ES6 Module (with bundler):**
28
```javascript
29
import 'normalize.css';
30
```
31
32
**CommonJS (with bundler):**
33
```javascript
34
require('normalize.css');
35
```
36
37
## Basic Usage
38
39
**Direct HTML inclusion:**
40
```html
41
<!DOCTYPE html>
42
<html>
43
<head>
44
<link rel="stylesheet" href="normalize.css">
45
<link rel="stylesheet" href="styles.css">
46
</head>
47
<body>
48
<!-- Your HTML content will now have normalized cross-browser styles -->
49
<h1>Consistent heading across browsers</h1>
50
<form>
51
<input type="text" placeholder="Normalized form input">
52
<button type="submit">Normalized button</button>
53
</form>
54
</body>
55
</html>
56
```
57
58
**Direct download usage:**
59
```html
60
<!DOCTYPE html>
61
<html>
62
<head>
63
<!-- Download normalize.css and include locally -->
64
<link rel="stylesheet" href="normalize.css">
65
<link rel="stylesheet" href="styles.css">
66
</head>
67
<body>
68
<!-- Your normalized content -->
69
</body>
70
</html>
71
```
72
73
**Integration with build tools:**
74
```javascript
75
// webpack.config.js or similar
76
import 'normalize.css';
77
import './app.css'; // Your application styles
78
```
79
80
## Browser Support
81
82
- Chrome (all versions)
83
- Edge (all versions)
84
- Firefox ESR+
85
- Internet Explorer 10+
86
- Safari 8+
87
- Opera (all versions)
88
89
## Capabilities
90
91
### HTML Root Element
92
93
Sets consistent line-height and prevents iOS font size adjustments on orientation change.
94
95
```css { .api }
96
html {
97
line-height: 1.15; /* 1. Correct the line height in all browsers */
98
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS */
99
}
100
```
101
102
### Body Element
103
104
Removes the default margin in all browsers.
105
106
```css { .api }
107
body {
108
margin: 0;
109
}
110
```
111
112
### Main Element
113
114
Renders the `main` element consistently in IE.
115
116
```css { .api }
117
main {
118
display: block;
119
}
120
```
121
122
### H1 Element
123
124
Corrects the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari.
125
126
```css { .api }
127
h1 {
128
font-size: 2em;
129
margin: 0.67em 0;
130
}
131
```
132
133
### HR Element
134
135
Adds correct box sizing in Firefox and shows overflow in Edge and IE.
136
137
```css { .api }
138
hr {
139
box-sizing: content-box; /* 1. Add the correct box sizing in Firefox */
140
height: 0; /* 1 */
141
overflow: visible; /* 2. Show the overflow in Edge and IE */
142
}
143
```
144
145
### Pre Element
146
147
Corrects the inheritance and scaling of font size in all browsers.
148
149
```css { .api }
150
pre {
151
font-family: monospace, monospace; /* 1. Correct the inheritance and scaling of font size in all browsers */
152
font-size: 1em; /* 2. Correct the odd `em` font sizing in all browsers */
153
}
154
```
155
156
### Anchor Element
157
158
Removes the gray background on active links in IE 10.
159
160
```css { .api }
161
a {
162
background-color: transparent;
163
}
164
```
165
166
### Abbreviation Element
167
168
Removes the bottom border in Chrome 57- and adds correct text decoration in Chrome, Edge, IE, Opera, and Safari.
169
170
```css { .api }
171
abbr[title] {
172
border-bottom: none; /* 1. Remove the bottom border in Chrome 57- */
173
text-decoration: underline; /* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
174
text-decoration: underline dotted; /* 2 */
175
}
176
```
177
178
### Bold and Strong Elements
179
180
Adds the correct font weight in Chrome, Edge, and Safari.
181
182
```css { .api }
183
b,
184
strong {
185
font-weight: bolder;
186
}
187
```
188
189
### Code, Kbd, Samp Elements
190
191
Corrects the inheritance and scaling of font size in all browsers.
192
193
```css { .api }
194
code,
195
kbd,
196
samp {
197
font-family: monospace, monospace; /* 1. Correct the inheritance and scaling of font size in all browsers */
198
font-size: 1em; /* 2. Correct the odd `em` font sizing in all browsers */
199
}
200
```
201
202
### Small Element
203
204
Adds the correct font size in all browsers.
205
206
```css { .api }
207
small {
208
font-size: 80%;
209
}
210
```
211
212
### Sub and Sup Elements
213
214
Prevents `sub` and `sup` elements from affecting the line height in all browsers.
215
216
```css { .api }
217
sub,
218
sup {
219
font-size: 75%;
220
line-height: 0;
221
position: relative;
222
vertical-align: baseline;
223
}
224
```
225
226
### Sub Element
227
228
Positions subscript text correctly.
229
230
```css { .api }
231
sub {
232
bottom: -0.25em;
233
}
234
```
235
236
### Sup Element
237
238
Positions superscript text correctly.
239
240
```css { .api }
241
sup {
242
top: -0.5em;
243
}
244
```
245
246
### Image Element
247
248
Removes the border on images inside links in IE 10.
249
250
```css { .api }
251
img {
252
border-style: none;
253
}
254
```
255
256
### Form Control Elements
257
258
Changes the font styles in all browsers and removes the margin in Firefox and Safari.
259
260
```css { .api }
261
button,
262
input,
263
optgroup,
264
select,
265
textarea {
266
font-family: inherit; /* 1. Change the font styles in all browsers */
267
font-size: 100%; /* 1 */
268
line-height: 1.15; /* 1 */
269
margin: 0; /* 2. Remove the margin in Firefox and Safari */
270
}
271
```
272
273
### Button and Input Elements
274
275
Shows the overflow in IE and Edge.
276
277
```css { .api }
278
button,
279
input {
280
overflow: visible;
281
}
282
```
283
284
### Button and Select Elements
285
286
Removes the inheritance of text transform in Edge, Firefox, and IE.
287
288
```css { .api }
289
button,
290
select {
291
text-transform: none;
292
}
293
```
294
295
### Clickable Button Types
296
297
Corrects the inability to style clickable types in iOS and Safari.
298
299
```css { .api }
300
button,
301
[type="button"],
302
[type="reset"],
303
[type="submit"] {
304
-webkit-appearance: button;
305
}
306
```
307
308
### Button Focus Inner
309
310
Removes the inner border and padding in Firefox.
311
312
```css { .api }
313
button::-moz-focus-inner,
314
[type="button"]::-moz-focus-inner,
315
[type="reset"]::-moz-focus-inner,
316
[type="submit"]::-moz-focus-inner {
317
border-style: none;
318
padding: 0;
319
}
320
```
321
322
### Button Focus Ring
323
324
Restores the focus styles unset by the previous rule.
325
326
```css { .api }
327
button:-moz-focusring,
328
[type="button"]:-moz-focusring,
329
[type="reset"]:-moz-focusring,
330
[type="submit"]:-moz-focusring {
331
outline: 1px dotted ButtonText;
332
}
333
```
334
335
### Fieldset Element
336
337
Corrects the padding in Firefox.
338
339
```css { .api }
340
fieldset {
341
padding: 0.35em 0.75em 0.625em;
342
}
343
```
344
345
### Legend Element
346
347
Corrects the text wrapping in Edge and IE, color inheritance from `fieldset` elements in IE, and removes the padding.
348
349
```css { .api }
350
legend {
351
box-sizing: border-box; /* 1. Correct the text wrapping in Edge and IE */
352
color: inherit; /* 2. Correct the color inheritance from `fieldset` elements in IE */
353
display: table; /* 1 */
354
max-width: 100%; /* 1 */
355
padding: 0; /* 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers */
356
white-space: normal; /* 1 */
357
}
358
```
359
360
### Progress Element
361
362
Adds the correct vertical alignment in Chrome, Firefox, and Opera.
363
364
```css { .api }
365
progress {
366
vertical-align: baseline;
367
}
368
```
369
370
### Textarea Element
371
372
Removes the default vertical scrollbar in IE 10+.
373
374
```css { .api }
375
textarea {
376
overflow: auto;
377
}
378
```
379
380
### Checkbox and Radio Elements
381
382
Adds the correct box sizing in IE 10 and removes the padding in IE 10.
383
384
```css { .api }
385
[type="checkbox"],
386
[type="radio"] {
387
box-sizing: border-box; /* 1. Add the correct box sizing in IE 10 */
388
padding: 0; /* 2. Remove the padding in IE 10 */
389
}
390
```
391
392
### Number Input Spin Buttons
393
394
Corrects the cursor style of increment and decrement buttons in Chrome.
395
396
```css { .api }
397
[type="number"]::-webkit-inner-spin-button,
398
[type="number"]::-webkit-outer-spin-button {
399
height: auto;
400
}
401
```
402
403
### Search Input
404
405
Corrects the odd appearance in Chrome and Safari and the outline style in Safari.
406
407
```css { .api }
408
[type="search"] {
409
-webkit-appearance: textfield; /* 1. Correct the odd appearance in Chrome and Safari */
410
outline-offset: -2px; /* 2. Correct the outline style in Safari */
411
}
412
```
413
414
### Search Input Decoration
415
416
Removes the inner padding in Chrome and Safari on macOS.
417
418
```css { .api }
419
[type="search"]::-webkit-search-decoration {
420
-webkit-appearance: none;
421
}
422
```
423
424
### File Upload Button
425
426
Corrects the inability to style clickable types in iOS and Safari and changes font properties to `inherit` in Safari.
427
428
```css { .api }
429
::-webkit-file-upload-button {
430
-webkit-appearance: button; /* 1. Correct the inability to style clickable types in iOS and Safari */
431
font: inherit; /* 2. Change font properties to `inherit` in Safari */
432
}
433
```
434
435
### Details Element
436
437
Adds the correct display in Edge, IE 10+, and Firefox.
438
439
```css { .api }
440
details {
441
display: block;
442
}
443
```
444
445
### Summary Element
446
447
Adds the correct display in all browsers.
448
449
```css { .api }
450
summary {
451
display: list-item;
452
}
453
```
454
455
### Template Element
456
457
Adds the correct display in IE 10+.
458
459
```css { .api }
460
template {
461
display: none;
462
}
463
```
464
465
### Hidden Attribute
466
467
Adds the correct display in IE 10.
468
469
```css { .api }
470
[hidden] {
471
display: none;
472
}
473
```
474
475
## Key Benefits
476
477
- **Preserves Useful Defaults**: Unlike CSS resets, keeps helpful browser defaults
478
- **Cross-Browser Consistency**: Eliminates rendering differences between browsers
479
- **Bug Fixes**: Corrects known browser bugs and inconsistencies
480
- **Detailed Documentation**: Every rule includes comments explaining its purpose
481
- **Small Size**: Only ~6KB of CSS, much smaller than full CSS frameworks
482
- **Zero Dependencies**: Pure CSS with no external dependencies
483
- **Wide Browser Support**: Works with all modern browsers and IE10+
484
485
## Integration Patterns
486
487
**With CSS Frameworks:**
488
```html
489
<!-- Load normalize.css first, then your framework -->
490
<link rel="stylesheet" href="normalize.css">
491
<link rel="stylesheet" href="bootstrap.css">
492
<link rel="stylesheet" href="custom.css">
493
```
494
495
**With CSS-in-JS:**
496
```javascript
497
import 'normalize.css';
498
import styled from 'styled-components';
499
500
const App = styled.div`
501
/* Your styles build on normalized base */
502
font-family: 'Helvetica', sans-serif;
503
`;
504
```
505
506
**Build Tool Integration:**
507
```javascript
508
// Import in your main CSS/SCSS file
509
@import 'normalize.css';
510
511
// Your application styles
512
body {
513
font-family: 'Arial', sans-serif;
514
}
515
```
516
517
## Extended Details and Known Issues
518
519
Additional technical details and explanations of the more complex parts of normalize.css.
520
521
### `pre, code, kbd, samp` Font Family
522
523
The `font-family: monospace, monospace` hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of `monospace` is intentional and addresses browser inconsistencies in font inheritance.
524
525
### `sub, sup` Elements
526
527
Normally, using `sub` or `sup` affects the line-box height of text in all browsers. The normalize.css rules prevent these elements from affecting line height while maintaining proper positioning.
528
529
### `select` Element Styling
530
531
By default, Chrome on OS X and Safari on OS X allow very limited styling of `select`, unless a border property is set. The default font weight on `optgroup` elements cannot safely be changed in Chrome on OSX and Safari on OS X.
532
533
### `[type="checkbox"]` and `[type="radio"]` Styling
534
535
It is recommended that you do not style checkbox and radio inputs as Firefox's implementation does not respect box-sizing, padding, or width properties consistently.
536
537
### `[type="number"]` Input Behavior
538
539
Certain font size values applied to number inputs cause the cursor style of the decrement button to change from `default` to `text`, which can be confusing for users.
540
541
### `[type="search"]` Input Limitations
542
543
The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In Chrome and Safari on Windows you can't control `border` properly. It will apply `border-width` but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying `-webkit-appearance: textfield` addresses these issues without removing the benefits of search inputs (e.g. showing past searches).
544
545
## Contributing
546
547
Please read the [contribution guidelines](https://github.com/necolas/normalize.css/blob/master/CONTRIBUTING.md) in order to make the contribution process easy and effective for everyone involved.
548
549
## Resources
550
551
- **npm package**: https://www.npmjs.com/package/normalize.css
552
- **GitHub repository**: https://github.com/necolas/normalize.css
553
- **License**: MIT (see [LICENSE.md](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
554
- **Changelog**: [CHANGELOG.md](https://github.com/necolas/normalize.css/blob/master/CHANGELOG.md)
555
- **Community chat**: https://gitter.im/necolas/normalize.css