Use HTML Living Standard sectioning

mfalconi · Jul 6, 2016 · bbcf62d · bbcf62d
1 parent 0dc4df6
commit bbcf62d
Showing 1 changed file with 118 additions and 72 deletions.
diff --git a/normalize.css b/normalize.css
@@ -6,13 +6,19 @@
  * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
  */
 
+/* Document
+   ========================================================================== */
+
 html {
   font-family: sans-serif; /* 1 */
   line-height: 1.15; /* 2 */
   -ms-text-size-adjust: 100%; /* 3 */
   -webkit-text-size-adjust: 100%; /* 3 */
 }
 
+/* Sections
+   ========================================================================== */
+
 /**
  * Remove the margin in all browsers (opinionated).
  */
@@ -21,69 +27,73 @@ body {
   margin: 0;
 }
 
-/* HTML5 display definitions
-   ========================================================================== */
-
 /**
  * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
  */
 
 article,
 aside,
-details, /* 1 */
-figcaption,
-figure,
 footer,
 header,
-main, /* 2 */
-menu,
 nav,
-section,
-summary { /* 1 */
+section {
   display: block;
 }
 
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
 /**
  * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
  */
 
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
 }
 
 /**
- * Add the correct display in iOS 4-7.
+ * Add the correct margin in IE 8.
  */
 
-audio:not([controls]) {
-  display: none;
-  height: 0;
+figure {
+  margin: 1em 40px;
 }
 
 /**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
  */
 
-progress {
-  vertical-align: baseline;
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
 /**
- * Add the correct display in IE 10-.
- * 1. Add the correct display in IE.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-template, /* 1 */
-[hidden] {
-  display: none;
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
-/* Links
+/* Text-level semantics
    ========================================================================== */
 
 /**
@@ -106,9 +116,6 @@ a:hover {
   outline-width: 0;
 }
 
-/* Text-level semantics
-   ========================================================================== */
-
 /**
  * 1. Remove the bottom border in Firefox 39-.
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
@@ -139,21 +146,23 @@ strong {
 }
 
 /**
- * Add the correct font style in Android 4.3-.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-dfn {
-  font-style: italic;
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
+ * Add the correct font style in Android 4.3-.
  */
 
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+dfn {
+  font-style: italic;
 }
 
 /**
@@ -198,54 +207,37 @@ sup {
    ========================================================================== */
 
 /**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
+ * Add the correct display in IE 9-.
  */
 
-svg:not(:root) {
-  overflow: hidden;
+audio,
+video {
+  display: inline-block;
 }
 
-/* Grouping content
-   ========================================================================== */
-
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * Add the correct display in iOS 4-7.
  */
 
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+audio:not([controls]) {
+  display: none;
+  height: 0;
 }
 
 /**
- * Add the correct margin in IE 8.
+ * Remove the border on images inside links in IE 10-.
  */
 
-figure {
-  margin: 1em 40px;
+img {
+  border-style: none;
 }
 
 /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
+ * Hide the overflow in IE.
  */
 
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
+svg:not(:root) {
+  overflow: hidden;
 }
 
 /* Forms
@@ -355,6 +347,16 @@ legend {
   white-space: normal; /* 1 */
 }
 
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
 /**
  * Remove the default vertical scrollbar in IE.
  */
@@ -411,3 +413,47 @@ textarea {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu,
+summary { /* 1 */
+  display: block;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}