7.0.0

Author: jonathantneal

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changes to sanitize.css
 
+### 7.0.0 (August 22, 2018)
+
+- Use the default user interface font in all browsers (opinionated).
+- Use the default monospace user interface font in all browsers (opinionated).
+- Use a 4-space tab width in all browsers (opinionated).
+- Fix correction of cursor style of increment and decrement buttons
+  in Safari, not Chrome.
+- Correct the text style of placeholders in Chrome, Edge, and Safari.
+- Remove unnecessary form control margin normalizations in Firefox.
+- Remove opinionated fieldset padding in all browsers.
+- Remove `::-moz-focus-inner` and `:-moz-focusring` normalizations
+  fixed in Firefox 53
+  https://bugzilla.mozilla.org/show_bug.cgi?id=140562
+
 ### 6.0.0 (June 24, 2018)
 
 - Added: `word-break: break-word` to `html`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanitize.css",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "A best-practices CSS foundation",
   "author": "Jonathan Neal <[email protected]>",
   "contributors": [
@@ -21,7 +21,7 @@
     "test": "stylelint sanitize.css"
   },
   "devDependencies": {
-    "stylelint": "^9.3.0",
+    "stylelint": "^9.5.0",
     "stylelint-config-standard": "^18.2.0"
   },
   "stylelint": {

sanitize.css

@@ -27,19 +27,36 @@
 }
 
 /**
- * 1. Correct the line height in all browsers.
- * 2. Add the default cursor in all browsers (opinionated).
- * 3. Prevent adjustments of font size after orientation changes in
+ * 1. Use the default user interface font in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Use the default cursor in all browsers (opinionated).
+ * 4. Use a 4-space tab width in all browsers (opinionated).
+ * 5. Prevent adjustments of font size after orientation changes in
  *    IE on Windows Phone and in iOS.
- * 4. Breaks words to prevent overflow in all browsers (opinionated).
+ * 6. Breaks words to prevent overflow in all browsers (opinionated).
  */
 
 html {
-  line-height: 1.15; /* 1 */
-  cursor: default; /* 2 */
-  -ms-text-size-adjust: 100%; /* 3 */
-  -webkit-text-size-adjust: 100%; /* 3 */
-  word-break: break-word; /* 4 */
+  font-family:
+    system-ui,
+    /* macOS 10.11-10.12 */ -apple-system,
+    /* Windows 6+ */ Segoe UI,
+    /* Android 4+ */ Roboto,
+    /* Ubuntu 10.10+ */ Ubuntu,
+    /* Gnome 3+ */ Cantarell,
+    /* KDE Plasma 4+ */ Oxygen,
+    /* fallback */ sans-serif,
+    /* macOS emoji */ "Apple Color Emoji",
+    /* Windows emoji */ "Segoe UI Emoji",
+    /* Windows emoji */ "Segoe UI Symbol",
+    /* Linux emoji */ "Noto Color Emoji"; /* 1 */
+
+  line-height: 1.15; /* 2 */
+  cursor: default; /* 3 */
+  tab-size: 4; /* 4 */
+  -ms-text-size-adjust: 100%; /* 5 */
+  -webkit-text-size-adjust: 100%; /* 5 */
+  word-break: break-word; /* 6 */
 }
 
 /* Sections
@@ -67,12 +84,11 @@ h1 {
  * ========================================================================== */
 
 /**
- * 1. Add the correct box sizing in Firefox.
+ * 1. Add the correct sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
 
 hr {
-  box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
   overflow: visible; /* 2 */
 }
@@ -95,12 +111,21 @@ nav ul {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 1. Use the default monospace user interface font
+ *    in all browsers (opinionated).
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
+  font-family:
+    /* macOS 10.10+ */ Menlo,
+    /* Windows 6+ */ Consolas,
+    /* Android 4+ */ Roboto Mono,
+    /* Ubuntu 10.10+ */ Ubuntu Monospace,
+    /* KDE Plasma 4+ */ Oxygen Mono,
+    /* Linux/OpenOffice fallback */ Liberation Mono,
+    /* fallback */ monospace; /* 1 */
+
   font-size: 1em; /* 2 */
 }
 
@@ -134,14 +159,23 @@ strong {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 1. Use the default monospace user interface font
+ *    in all browsers (opinionated).
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family:
+    /* macOS 10.10+ */ Menlo,
+    /* Windows 6+ */ Consolas,
+    /* Android 4+ */ Roboto Mono,
+    /* Ubuntu 10.10+ */ Ubuntu Monospace,
+    /* KDE Plasma 4+ */ Oxygen Mono,
+    /* Linux/OpenOffice fallback */ Liberation Mono,
+    /* fallback */ monospace; /* 1 */
+
   font-size: 1em; /* 2 */
 }
 
@@ -244,14 +278,12 @@ table {
  * ========================================================================== */
 
 /**
- * Remove the margin in Firefox and Safari.
+ * Remove the margin in Safari.
  */
 
 button,
 input,
-optgroup,
-select,
-textarea {
+select {
   margin: 0;
 }
 
@@ -289,26 +321,6 @@ button,
   -webkit-appearance: button;
 }
 
-/**
- * Restore the focus styles unset by the previous rule in Firefox.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
 /**
  * Correct the padding in Firefox.
  */
@@ -328,16 +340,12 @@ input {
 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
  */
 
 legend {
-  box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
   display: table; /* 1 */
   max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
   white-space: normal; /* 1 */
 }
 
@@ -360,28 +368,28 @@ select {
 }
 
 /**
- * 1. Remove the default vertical scrollbar in IE.
- * 2. Change the resize direction on textareas in all browsers (opinionated).
+ * 1. Remove the margin in Firefox and Safari.
+ * 2. Remove the default vertical scrollbar in IE.
+ * 3. Change the resize direction on textareas in all browsers (opinionated).
  */
 
 textarea {
-  overflow: auto; /* 1 */
-  resize: vertical; /* 2 */
+  margin: 0; /* 1 */
+  overflow: auto; /* 2 */
+  resize: vertical; /* 3 */
 }
 
 /**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
+ * Remove the padding in IE 10-.
  */
 
 [type="checkbox"],
 [type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
+  padding: 0;
 }
 
 /**
- * Correct the cursor style of increment and decrement buttons in Chrome.
+ * Correct the cursor style of increment and decrement buttons in Safari.
  */
 
 ::-webkit-inner-spin-button,
@@ -399,6 +407,15 @@ textarea {
   outline-offset: -2px; /* 2 */
 }
 
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
 /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
@@ -485,7 +502,8 @@ template {
  * ========================================================================== */
 
 /*
- * 1. Remove the tapping delay on clickable elements in all browsers (opinionated).
+ * 1. Remove the tapping delay on clickable elements
+      in all browsers (opinionated).
  * 2. Remove the tapping delay in IE 10.
  */