66 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
77 */
88
9+ /* Document
10+ ========================================================================== */
11+
912html {
1013 font-family : sans-serif; /* 1 */
1114 line-height : 1.15 ; /* 2 */
1215 -ms-text-size-adjust : 100% ; /* 3 */
1316 -webkit-text-size-adjust : 100% ; /* 3 */
1417}
1518
19+ /* Sections
20+ ========================================================================== */
21+
1622/**
1723 * Remove the margin in all browsers (opinionated).
1824 */
@@ -21,69 +27,73 @@ body {
2127 margin : 0 ;
2228}
2329
24- /* HTML5 display definitions
25- ========================================================================== */
26-
2730/**
2831 * Add the correct display in IE 9-.
29- * 1. Add the correct display in Edge, IE, and Firefox.
30- * 2. Add the correct display in IE.
3132 */
3233
3334article ,
3435aside ,
35- details , /* 1 */
36- figcaption ,
37- figure ,
3836footer ,
3937header ,
40- main , /* 2 */
41- menu ,
4238nav ,
43- section ,
44- summary { /* 1 */
39+ section {
4540 display : block;
4641}
4742
43+ /**
44+ * Correct the font size and margin on `h1` elements within `section` and
45+ * `article` contexts in Chrome, Firefox, and Safari.
46+ */
47+
48+ h1 {
49+ font-size : 2em ;
50+ margin : 0.67em 0 ;
51+ }
52+
53+ /* Grouping content
54+ ========================================================================== */
55+
4856/**
4957 * Add the correct display in IE 9-.
58+ * 1. Add the correct display in IE.
5059 */
5160
52- audio ,
53- canvas ,
54- progress ,
55- video {
56- display : inline-block;
61+ figcaption ,
62+ figure ,
63+ main { /* 1 */
64+ display : block;
5765}
5866
5967/**
60- * Add the correct display in iOS 4-7 .
68+ * Add the correct margin in IE 8 .
6169 */
6270
63- audio : not ([controls ]) {
64- display : none;
65- height : 0 ;
71+ figure {
72+ margin : 1em 40px ;
6673}
6774
6875/**
69- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
76+ * 1. Add the correct box sizing in Firefox.
77+ * 2. Show the overflow in Edge and IE.
7078 */
7179
72- progress {
73- vertical-align : baseline;
80+ hr {
81+ box-sizing : content-box; /* 1 */
82+ height : 0 ; /* 1 */
83+ overflow : visible; /* 2 */
7484}
7585
7686/**
77- * Add the correct display in IE 10- .
78- * 1. Add the correct display in IE .
87+ * 1. Correct the inheritance and scaling of font size in all browsers .
88+ * 2. Correct the odd `em` font sizing in all browsers .
7989 */
8090
81- template , /* 1 */
82- [ hidden ] {
83- display : none;
91+ pre {
92+ font-family : monospace , monospace; /* 1 */
93+ font-size : 1 em ; /* 2 */
8494}
8595
86- /* Links
96+ /* Text-level semantics
8797 ========================================================================== */
8898
8999/**
@@ -106,9 +116,6 @@ a:hover {
106116 outline-width : 0 ;
107117}
108118
109- /* Text-level semantics
110- ========================================================================== */
111-
112119/**
113120 * 1. Remove the bottom border in Firefox 39-.
114121 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
@@ -139,21 +146,23 @@ strong {
139146}
140147
141148/**
142- * Add the correct font style in Android 4.3-.
149+ * 1. Correct the inheritance and scaling of font size in all browsers.
150+ * 2. Correct the odd `em` font sizing in all browsers.
143151 */
144152
145- dfn {
146- font-style : italic;
153+ code ,
154+ kbd ,
155+ samp {
156+ font-family : monospace, monospace; /* 1 */
157+ font-size : 1em ; /* 2 */
147158}
148159
149160/**
150- * Correct the font size and margin on `h1` elements within `section` and
151- * `article` contexts in Chrome, Firefox, and Safari.
161+ * Add the correct font style in Android 4.3-.
152162 */
153163
154- h1 {
155- font-size : 2em ;
156- margin : 0.67em 0 ;
164+ dfn {
165+ font-style : italic;
157166}
158167
159168/**
@@ -198,54 +207,37 @@ sup {
198207 ========================================================================== */
199208
200209/**
201- * Remove the border on images inside links in IE 10-.
202- */
203-
204- img {
205- border-style : none;
206- }
207-
208- /**
209- * Hide the overflow in IE.
210+ * Add the correct display in IE 9-.
210211 */
211212
212- svg : not (: root ) {
213- overflow : hidden;
213+ audio ,
214+ video {
215+ display : inline-block;
214216}
215217
216- /* Grouping content
217- ========================================================================== */
218-
219218/**
220- * 1. Correct the inheritance and scaling of font size in all browsers.
221- * 2. Correct the odd `em` font sizing in all browsers.
219+ * Add the correct display in iOS 4-7.
222220 */
223221
224- code ,
225- kbd ,
226- pre ,
227- samp {
228- font-family : monospace, monospace; /* 1 */
229- font-size : 1em ; /* 2 */
222+ audio : not ([controls ]) {
223+ display : none;
224+ height : 0 ;
230225}
231226
232227/**
233- * Add the correct margin in IE 8 .
228+ * Remove the border on images inside links in IE 10- .
234229 */
235230
236- figure {
237- margin : 1 em 40 px ;
231+ img {
232+ border-style : none ;
238233}
239234
240235/**
241- * 1. Add the correct box sizing in Firefox.
242- * 2. Show the overflow in Edge and IE.
236+ * Hide the overflow in IE.
243237 */
244238
245- hr {
246- box-sizing : content-box; /* 1 */
247- height : 0 ; /* 1 */
248- overflow : visible; /* 2 */
239+ svg : not (: root ) {
240+ overflow : hidden;
249241}
250242
251243/* Forms
@@ -355,6 +347,16 @@ legend {
355347 white-space : normal; /* 1 */
356348}
357349
350+ /**
351+ * 1. Add the correct display in IE 9-.
352+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
353+ */
354+
355+ progress {
356+ display : inline-block; /* 1 */
357+ vertical-align : baseline; /* 2 */
358+ }
359+
358360/**
359361 * Remove the default vertical scrollbar in IE.
360362 */
@@ -411,3 +413,54 @@ textarea {
411413 -webkit-appearance : button; /* 1 */
412414 font : inherit; /* 2 */
413415}
416+
417+ /* Interactive
418+ ========================================================================== */
419+
420+ /*
421+ * Add the correct display in IE 9-.
422+ * 1. Add the correct display in Edge, IE, and Firefox.
423+ */
424+
425+ details , /* 1 */
426+ menu {
427+ display : block;
428+ }
429+
430+ /*
431+ * Add the correct display in all browsers.
432+ */
433+
434+ summary {
435+ display : list-item;
436+ }
437+
438+ /* Scripting
439+ ========================================================================== */
440+
441+ /**
442+ * Add the correct display in IE 9-.
443+ */
444+
445+ canvas {
446+ display : inline-block;
447+ }
448+
449+ /**
450+ * Add the correct display in IE.
451+ */
452+
453+ template {
454+ display : none;
455+ }
456+
457+ /* Hidden
458+ ========================================================================== */
459+
460+ /**
461+ * Add the correct display in IE 10-.
462+ */
463+
464+ [hidden ] {
465+ display : none;
466+ }
0 commit comments