10.0.0

Author: jonathantneal

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changes to sanitize.css
 
+### 10.0.0 (June 3, 2019)
+
+- Added: Opinionated page measure via `page.css`.
+- Added: Opinionated `border` normalization on form controls to match UA.
+- Added: Opinionated `font` and `letter-spacing` as `inherit` on form controls.
+- Added: Opinionated normalization of select controls.
+- Added: Opinionated normalization of placeholders in Internet Explorer.
+- Added: Opinionated `border` removal on iframes in all browsers.
+- Removed: Opinionated `border-radius` on form controls.
+- Removed: Opinionated `box-shadow` on form controls to match UA expectations.
+- Fixed: `Edge` comments without `Chrome` are are changed to `Edge 18-`.
+- Fixed: `Chrome` comments without `Edge` have `Edge` added.
+- Fixed: Nested list `dl` normalizations split.
+- Fixed: Logical `margin-block` normalization changed to `margin`.
+- Fixed: Used consistent quotes around typefaces in `typography.css`.
+
+> These fixes were brought in from normalize.css v10.1.0.
+
 ### 9.0.0 (May 16, 2019)
 
 - Removed: Opinionated removal of text shadow on text selections due to bugs in
@@ -29,27 +47,25 @@
 
 ### 7.0.2 (September 4, 2018)
 
-- Restore form control margin normalizations in Firefox
-- Re-order a few rules (opinionated)
+- Fixed: Restored form control margin normalizations in Firefox
+- Updated: Ordering of a few rules (opinionated)
 
 ### 7.0.1 (August 25, 2018)
 
-- Support the 4-space tab width in Firefox (opinionated)
-- Update documentation
+- Added: Support the 4-space tab width in Firefox (opinionated)
 
 ### 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
+- Added: System font in all browsers (opinionated)
+- Added: System monospace user interface font in all browsers (opinionated)
+- Added: 4-space tab width in all browsers (opinionated)
+- Removed: Unnecessary form control margin normalizations in Firefox
+- Removed: Opinionated fieldset padding in all browsers
+- Removed: Normalzations for `::-moz-focus-inner` and `:-moz-focusring` fixed
+  in Firefox 53 (https://bugzilla.mozilla.org/show_bug.cgi?id=140562)
+- Fixed: Correction of cursor style of increment and decrement buttons in
+  Safari, not Chrome
+- Fixed: Text style of placeholders in Chrome, Edge, and Safari
 
 ### 6.0.0 (June 24, 2018)
 
@@ -79,8 +95,7 @@
 - Added: Documentation for each opinionated feature
 - Added: Universal `background-repeat: no-repeat`
 - Removed: Reset of universal `margin` and `padding`
-- Removed: Inheritance of `font-size` on elements
-           (form control elements still have it)
+- Removed: Inheritance of `font-size` on elements (form controls still have it)
 - Removed: Pre-compiled files that used variables
 - Updated: `abbr[title]` styled using `border-bottom` over `text-decoration`
 - Updated: Tests and linting
@@ -166,7 +181,7 @@ accurately indicate your changes coming from your files.
 - Added: `font-style` inheritance
 - Updated: Support for the latest **Firefox**
 - Removed: Redundant inheritance in ::before and ::after
-- Removed: redundant cursor inheritance in anchor and form elements
+- Removed: redundant cursor inheritance in anchor and form controls
 
 ### 1.1.0 (March 20, 2015)
 

README.md

@@ -13,16 +13,34 @@ documented.
 <link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
 ```
 
-A separate stylesheet normalizes typography using system interface fonts.
+### Forms
+
+A separate stylesheet that normalizes form controls without side effects.
+
+```html
+<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
+```
+
+A separate stylesheet that sizes form controls without affecting native styles.
+
+```html
+<link href="https://unpkg.com/sanitize.css/formsize.css" rel="stylesheet" />
+```
+
+### Typography
+
+A separate stylesheet that normalizes typography using system interface fonts.
 
 ```html
 <link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
 ```
 
-A separate stylesheet normalizes forms using minimal, standards-like styling.
+### Measure
+
+A separate stylesheet that applies a comfortable measure to the page.
 
 ```html
-<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
+<link href="https://unpkg.com/sanitize.css/measure.css" rel="stylesheet" />
 ```
 
 ### Install

forms.css

@@ -1,20 +1,44 @@
 /**
- * 1. Use standards-like styling in all browsers (opinionated).
- * 2. Inherit typography styling in all browsers (opinionated).
+ * 1. Change the inconsistent appearance in all browsers (opinionated).
+ * 2. Add typography inheritance in all browsers (opinionated).
  */
 
 button,
 input,
 select,
 textarea {
   background-color: transparent; /* 1 */
-  border: 0 solid; /* 1 */
-  border-radius: 0.25em; /* 1 */
-  box-shadow: inset 0 0 0 1px WindowFrame; /* 1 */
+  border: 1px solid WindowFrame; /* 1 */
   color: inherit; /* 1 */
-  font-family: inherit; /* 2 */
-  font-size: inherit; /* 2 */
-  line-height: inherit; /* 2 */
+  font: inherit; /* 2 */
   letter-spacing: inherit; /* 2 */
   padding: 0.25em 0.375em; /* 1 */
 }
+
+/**
+ * Change the inconsistent appearance in all browsers (opinionated).
+ */
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
+  border-radius: 0;
+  padding-right: 1em;
+}
+
+/**
+ * Change the inconsistent appearance in IE (opinionated).
+ */
+
+::-ms-expand {
+  display: none;
+}
+
+/**
+ * Correct the inconsistent appearance in IE (opinionated).
+ */
+
+:-ms-input-placeholder {
+  color: rgba(0, 0, 0, 0.54);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanitize.css",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "A best-practices CSS foundation",
   "author": "Jonathan Neal <[email protected]>",
   "contributors": [
@@ -15,12 +15,13 @@
   "style": "sanitize.css",
   "files": [
     "forms.css",
+    "page.css",
     "sanitize.css",
     "typography.css"
   ],
   "scripts": {
     "prepublishOnly": "npm test",
-    "test": "stylelint forms.css sanitize.css typography.css"
+    "test": "stylelint *.css"
   },
   "devDependencies": {
     "stylelint": "^10.0.1",

page.css

@@ -0,0 +1,26 @@
+/**
+ * Use a comfortable measure in all browsers (opinionated).
+ */
+
+html {
+  padding: 1em;
+}
+
+@media (min-width: 34em) {
+  html {
+    padding: 1em calc(50% - 16em);
+  }
+}
+
+/**
+ * Restrict sizing to the page width in all browsers (opinionated).
+ */
+
+iframe,
+img,
+input,
+select,
+textarea {
+  height: auto;
+  max-width: 100%;
+}

sanitize.css

@@ -56,7 +56,7 @@ body {
 
 /**
  * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
+ * `article` contexts in Chrome, Edge, Firefox, and Safari.
  */
 
 h1 {
@@ -68,25 +68,31 @@ h1 {
  * ========================================================================== */
 
 /**
- * Remove the margin on nested lists in Chrome and Safari.
+ * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
  */
 
 dl dl,
 dl ol,
 dl ul,
 ol dl,
+ul dl {
+  margin: 0;
+}
+
+/**
+ * Remove the margin on nested lists in Edge 18- and IE.
+ */
+
 ol ol,
 ol ul,
-ul dl,
 ul ol,
 ul ul {
-  margin-block-start: 0;
-  margin-block-end: 0;
+  margin: 0;
 }
 
 /**
  * 1. Add the correct sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
+ * 2. Show the overflow in Edge 18- and IE.
  */
 
 hr {
@@ -134,7 +140,7 @@ a {
 }
 
 /**
- * Add the correct text decoration in Edge, IE, Opera, and Safari.
+ * Add the correct text decoration in Edge 18-, IE, and Safari.
  */
 
 abbr[title] {
@@ -205,6 +211,14 @@ audio:not([controls]) {
   height: 0;
 }
 
+/**
+ * Remove the border on iframes in all browsers (opinionated).
+ */
+
+iframe {
+  border-style: none;
+}
+
 /**
  * Remove the border on images within links in IE 10-.
  */
@@ -255,7 +269,7 @@ select {
 
 /**
  * 1. Show the overflow in IE.
- * 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
  */
 
 button {
@@ -275,23 +289,25 @@ button,
 }
 
 /**
- * Correct the padding in Firefox.
+ * 1. Change the inconsistent appearance in all browsers (opinionated).
+ * 2. Correct the padding in Firefox.
  */
 
 fieldset {
-  padding: 0.35em 0.75em 0.625em;
+  border: 1px solid #a0a0a0; /* 1 */
+  padding: 0.35em 0.75em 0.625em; /* 2 */
 }
 
 /**
- * Show the overflow in Edge and IE.
+ * Show the overflow in Edge 18- and IE.
  */
 
 input {
   overflow: visible;
 }
 
 /**
- * 1. Correct the text wrapping in Edge and IE.
+ * 1. Correct the text wrapping in Edge 18- and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  */
 
@@ -303,8 +319,8 @@ legend {
 }
 
 /**
- * 1. Add the correct display in Edge and IE.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 1. Add the correct display in Edge 18- and IE.
+ * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
  */
 
 progress {
@@ -342,7 +358,7 @@ textarea {
 }
 
 /**
- * 1. Correct the odd appearance in Chrome and Safari.
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
  * 2. Correct the outline style in Safari.
  */
 
@@ -370,7 +386,7 @@ textarea {
 }
 
 /**
- * Remove the inner padding in Chrome and Safari on macOS.
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
  */
 
 ::-webkit-search-decoration {
@@ -416,15 +432,15 @@ textarea {
  * ========================================================================== */
 
 /*
- * Add the correct display in Edge and IE.
+ * Add the correct display in Edge 18- and IE.
  */
 
 details {
   display: block;
 }
 
 /*
- * Add the correct styles in Edge, IE, and Safari.
+ * Add the correct styles in Edge 18-, IE, and Safari.
  */
 
 dialog {