9.0.0

csstools · May 17, 2019 · a592ee1 · a592ee1
1 parent f5381ef
commit a592ee1
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 151 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changes to sanitize.css
 
+### 9.0.0 (May 16, 2019)
+
+- Removed: Opinionated removal of text shadow on text selections due to bugs in
+  High Contrast mode.
+- Removed: Opinionated removal of repeating backgrounds in all browsers due to
+  form control unstyling.
+- Removed: Opinionated interface typography in all browsers, which is moved to
+  forms.css and typography.css.
+- Changed: Visually hidden content now uses some less aggressive selectors.
+- Added: Opinionated interface typography in all browsers via typography.css.
+- Added: Opinionated standards-like form styling in all browsers via forms.css.
+- Added: Opinionated removal of the grey highlight when tapping links in iOS.
+
 ### 8.0.1 (May 12, 2019)
 
 - Fixed: Typo of `browers` typo to `browsers`

diff --git a/README.md b/README.md
@@ -3,34 +3,50 @@
 [sanitize.css] is a CSS library that provides consistent, cross-browser
 default styling of HTML elements alongside useful defaults.
 
-## How to get it
+It is developed alongside [normalize.css], which means every normalization
+is included, and every normalization and opinion are clearly marked and
+documented.
 
-**NPM**
+## Usage
 
-```sh
-npm install --save sanitize.css
+```html
+<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
 ```
 
-**Download**
+A separate stylesheet normalizes typography using system interface fonts.
 
-See https://csstools.github.io/sanitize.css/latest/sanitize.css
+```html
+<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
+```
 
-**CDN**
+A separate stylesheet normalizes forms using minimal, standards-like styling.
 
-see https://cdnjs.com/libraries/10up-sanitize.css
+```html
+<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
+```
 
-### Usage in npm and webpack
+### Install
+
+```sh
+npm install --save sanitize.css
+```
+
+#### Webpack Usage
 
 Import [sanitize.css] in CSS:
 
 ```css
-@import '~sanitize.css';
+@import 'sanitize.css';
+@import 'sanitize.css/typography.css';
+@import 'sanitize.css/forms.css';
 ```
 
 Alternatively, import [sanitize.css] in JS:
 
 ```js
 import 'sanitize.css';
+import 'sanitize.css/typography.css';
+import 'sanitize.css/forms.css';
 ```
 
 In `webpack.config.js`, be sure to use the appropriate loaders:
@@ -91,23 +107,11 @@ html {
 }
 ```
 
-##### The default font is the system ui font
+##### Text has a comfortable line height in all browsers
 
 ```css
 html {
-  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 5+ */ Noto Sans,
-    /* fallback */ sans-serif,
-    /* macOS emoji */ "Apple Color Emoji",
-    /* Windows emoji */ "Segoe UI Emoji",
-    /* Windows emoji */ "Segoe UI Symbol",
-    /* Linux emoji */ "Noto Color Emoji";
+  line-height: 1.5;
 }
 ```
 
@@ -140,32 +144,7 @@ body {
 ```css
 nav ol, nav ul {
   list-style: none;
-}
-```
-
-##### Pre-formatted and code-formatted text uses the monospace system ui font
-
-```css
-code, kbd, pre, samp {
-  font-family:
-    /* macOS 10.10+ */ Menlo,
-    /* Windows 6+ */ Consolas,
-    /* Android 4+ */ Roboto Mono,
-    /* Ubuntu 10.10+ */ Ubuntu Monospace,
-    /* KDE Plasma 5+ */ Noto Mono,
-    /* KDE Plasma 4+ */ Oxygen Mono,
-    /* Linux/OpenOffice fallback */ Liberation Mono,
-    /* fallback */ monospace;
-}
-```
-
-##### Text selections do not include text shadows
-
-```css
-::selection {
-  background-color: #b3d4fc;
-  color: #000;
-  text-shadow: none;
+  padding: 0;
 }
 ```
 
@@ -193,16 +172,6 @@ table {
 }
 ```
 
-##### Form controls are easily style-able
-
-```css
-button, input, select, textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-```
-
 ##### Textareas only resize vertically by default
 
 ```css
@@ -239,13 +208,78 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
 ##### Visually hidden content remains accessible
 
 ```css
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
 [aria-hidden="false"][hidden]:not(:focus) {
   clip: rect(0, 0, 0, 0);
-  display: inherit;
   position: absolute;
 }
 ```
 
+### Typography
+
+[sanitize.css] includes a separate stylesheet for normalizing typography using
+system interface fonts.
+
+### Forms
+
+[sanitize.css] includes a separate stylesheet for normalizing forms using
+minimal, standards-like styling.
+
+**Browser**
+
+```html
+<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
+```
+
+**Download**
+
+See https://csstools.github.io/sanitize.css/latest/typography.css
+
+**CDN**
+
+see https://cdnjs.com/libraries/10up-sanitize.css/typography.css
+
+#### Typography Features
+
+##### The default font is the system ui font
+
+```css
+html {
+  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 5+ */ Noto Sans,
+    /* fallback */ sans-serif,
+    /* macOS emoji */ "Apple Color Emoji",
+    /* Windows emoji */ "Segoe UI Emoji",
+    /* Windows emoji */ "Segoe UI Symbol",
+    /* Linux emoji */ "Noto Color Emoji";
+}
+```
+
+##### Pre-formatted and code-formatted text uses the monospace system ui font
+
+```css
+code, kbd, pre, samp {
+  font-family:
+    /* macOS 10.10+ */ Menlo,
+    /* Windows 6+ */ Consolas,
+    /* Android 4+ */ Roboto Mono,
+    /* Ubuntu 10.10+ */ Ubuntu Monospace,
+    /* KDE Plasma 5+ */ Noto Mono,
+    /* KDE Plasma 4+ */ Oxygen Mono,
+    /* Linux/OpenOffice fallback */ Liberation Mono,
+    /* fallback */ monospace;
+}
+```
+
 ## Differences
 
 [normalize.css] and [sanitize.css] correct browser bugs while carefully testing

diff --git a/forms.css b/forms.css
@@ -0,0 +1,19 @@
+/**
+ * 1. Use standards-like styling in all browsers (opinionated).
+ * 2. Inherit typography styling 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 */
+  color: inherit; /* 1 */
+  font-family: inherit; /* 2 */
+  font-size: inherit; /* 2 */
+  line-height: inherit; /* 2 */
+  padding: 0.25em 0.375em; /* 1 */
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sanitize.css",
-  "version": "8.0.1",
+  "version": "9.0.0",
   "description": "A best-practices CSS foundation",
   "author": "Jonathan Neal <[email protected]>",
   "contributors": [
@@ -14,11 +14,13 @@
   "main": "sanitize.css",
   "style": "sanitize.css",
   "files": [
-    "sanitize.css"
+    "forms.css",
+    "sanitize.css",
+    "typography.css"
   ],
   "scripts": {
     "prepublishOnly": "npm test",
-    "test": "stylelint sanitize.css"
+    "test": "stylelint forms.css sanitize.css typography.css"
   },
   "devDependencies": {
     "stylelint": "^10.0.1",