Skip to content

Commit a592ee1

Browse files
jonathantnealjonathantneal
committed
9.0.0
1 parent f5381ef commit a592ee1

6 files changed

Lines changed: 222 additions & 151 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
# Changes to sanitize.css
22

3+
### 9.0.0 (May 16, 2019)
4+
5+
- Removed: Opinionated removal of text shadow on text selections due to bugs in
6+
High Contrast mode.
7+
- Removed: Opinionated removal of repeating backgrounds in all browsers due to
8+
form control unstyling.
9+
- Removed: Opinionated interface typography in all browsers, which is moved to
10+
forms.css and typography.css.
11+
- Changed: Visually hidden content now uses some less aggressive selectors.
12+
- Added: Opinionated interface typography in all browsers via typography.css.
13+
- Added: Opinionated standards-like form styling in all browsers via forms.css.
14+
- Added: Opinionated removal of the grey highlight when tapping links in iOS.
15+
316
### 8.0.1 (May 12, 2019)
417

518
- Fixed: Typo of `browers` typo to `browsers`

‎README.md‎

Lines changed: 95 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,50 @@
33
[sanitize.css] is a CSS library that provides consistent, cross-browser
44
default styling of HTML elements alongside useful defaults.
55

6-
## How to get it
6+
It is developed alongside [normalize.css], which means every normalization
7+
is included, and every normalization and opinion are clearly marked and
8+
documented.
79

8-
**NPM**
10+
## Usage
911

10-
```sh
11-
npm install --save sanitize.css
12+
```html
13+
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
1214
```
1315

14-
**Download**
16+
A separate stylesheet normalizes typography using system interface fonts.
1517

16-
See https://csstools.github.io/sanitize.css/latest/sanitize.css
18+
```html
19+
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
20+
```
1721

18-
**CDN**
22+
A separate stylesheet normalizes forms using minimal, standards-like styling.
1923

20-
see https://cdnjs.com/libraries/10up-sanitize.css
24+
```html
25+
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
26+
```
2127

22-
### Usage in npm and webpack
28+
### Install
29+
30+
```sh
31+
npm install --save sanitize.css
32+
```
33+
34+
#### Webpack Usage
2335

2436
Import [sanitize.css] in CSS:
2537

2638
```css
27-
@import '~sanitize.css';
39+
@import 'sanitize.css';
40+
@import 'sanitize.css/typography.css';
41+
@import 'sanitize.css/forms.css';
2842
```
2943

3044
Alternatively, import [sanitize.css] in JS:
3145

3246
```js
3347
import 'sanitize.css';
48+
import 'sanitize.css/typography.css';
49+
import 'sanitize.css/forms.css';
3450
```
3551

3652
In `webpack.config.js`, be sure to use the appropriate loaders:
@@ -91,23 +107,11 @@ html {
91107
}
92108
```
93109

94-
##### The default font is the system ui font
110+
##### Text has a comfortable line height in all browsers
95111

96112
```css
97113
html {
98-
font-family:
99-
system-ui,
100-
/* macOS 10.11-10.12 */ -apple-system,
101-
/* Windows 6+ */ Segoe UI,
102-
/* Android 4+ */ Roboto,
103-
/* Ubuntu 10.10+ */ Ubuntu,
104-
/* Gnome 3+ */ Cantarell,
105-
/* KDE Plasma 5+ */ Noto Sans,
106-
/* fallback */ sans-serif,
107-
/* macOS emoji */ "Apple Color Emoji",
108-
/* Windows emoji */ "Segoe UI Emoji",
109-
/* Windows emoji */ "Segoe UI Symbol",
110-
/* Linux emoji */ "Noto Color Emoji";
114+
line-height: 1.5;
111115
}
112116
```
113117

@@ -140,32 +144,7 @@ body {
140144
```css
141145
nav ol, nav ul {
142146
list-style: none;
143-
}
144-
```
145-
146-
##### Pre-formatted and code-formatted text uses the monospace system ui font
147-
148-
```css
149-
code, kbd, pre, samp {
150-
font-family:
151-
/* macOS 10.10+ */ Menlo,
152-
/* Windows 6+ */ Consolas,
153-
/* Android 4+ */ Roboto Mono,
154-
/* Ubuntu 10.10+ */ Ubuntu Monospace,
155-
/* KDE Plasma 5+ */ Noto Mono,
156-
/* KDE Plasma 4+ */ Oxygen Mono,
157-
/* Linux/OpenOffice fallback */ Liberation Mono,
158-
/* fallback */ monospace;
159-
}
160-
```
161-
162-
##### Text selections do not include text shadows
163-
164-
```css
165-
::selection {
166-
background-color: #b3d4fc;
167-
color: #000;
168-
text-shadow: none;
147+
padding: 0;
169148
}
170149
```
171150

@@ -193,16 +172,6 @@ table {
193172
}
194173
```
195174

196-
##### Form controls are easily style-able
197-
198-
```css
199-
button, input, select, textarea {
200-
font-family: inherit;
201-
font-size: inherit;
202-
line-height: inherit;
203-
}
204-
```
205-
206175
##### Textareas only resize vertically by default
207176

208177
```css
@@ -239,13 +208,78 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
239208
##### Visually hidden content remains accessible
240209

241210
```css
211+
[aria-hidden="false"][hidden] {
212+
display: initial;
213+
}
214+
242215
[aria-hidden="false"][hidden]:not(:focus) {
243216
clip: rect(0, 0, 0, 0);
244-
display: inherit;
245217
position: absolute;
246218
}
247219
```
248220

221+
### Typography
222+
223+
[sanitize.css] includes a separate stylesheet for normalizing typography using
224+
system interface fonts.
225+
226+
### Forms
227+
228+
[sanitize.css] includes a separate stylesheet for normalizing forms using
229+
minimal, standards-like styling.
230+
231+
**Browser**
232+
233+
```html
234+
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
235+
```
236+
237+
**Download**
238+
239+
See https://csstools.github.io/sanitize.css/latest/typography.css
240+
241+
**CDN**
242+
243+
see https://cdnjs.com/libraries/10up-sanitize.css/typography.css
244+
245+
#### Typography Features
246+
247+
##### The default font is the system ui font
248+
249+
```css
250+
html {
251+
font-family:
252+
system-ui,
253+
/* macOS 10.11-10.12 */ -apple-system,
254+
/* Windows 6+ */ Segoe UI,
255+
/* Android 4+ */ Roboto,
256+
/* Ubuntu 10.10+ */ Ubuntu,
257+
/* Gnome 3+ */ Cantarell,
258+
/* KDE Plasma 5+ */ Noto Sans,
259+
/* fallback */ sans-serif,
260+
/* macOS emoji */ "Apple Color Emoji",
261+
/* Windows emoji */ "Segoe UI Emoji",
262+
/* Windows emoji */ "Segoe UI Symbol",
263+
/* Linux emoji */ "Noto Color Emoji";
264+
}
265+
```
266+
267+
##### Pre-formatted and code-formatted text uses the monospace system ui font
268+
269+
```css
270+
code, kbd, pre, samp {
271+
font-family:
272+
/* macOS 10.10+ */ Menlo,
273+
/* Windows 6+ */ Consolas,
274+
/* Android 4+ */ Roboto Mono,
275+
/* Ubuntu 10.10+ */ Ubuntu Monospace,
276+
/* KDE Plasma 5+ */ Noto Mono,
277+
/* KDE Plasma 4+ */ Oxygen Mono,
278+
/* Linux/OpenOffice fallback */ Liberation Mono,
279+
/* fallback */ monospace;
280+
}
281+
```
282+
249283
## Differences
250284

251285
[normalize.css] and [sanitize.css] correct browser bugs while carefully testing

‎forms.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* 1. Use standards-like styling in all browsers (opinionated).
3+
* 2. Inherit typography styling in all browsers (opinionated).
4+
*/
5+
6+
button,
7+
input,
8+
select,
9+
textarea {
10+
background-color: transparent; /* 1 */
11+
border: 0 solid; /* 1 */
12+
border-radius: 0.25em; /* 1 */
13+
box-shadow: inset 0 0 0 1px WindowFrame; /* 1 */
14+
color: inherit; /* 1 */
15+
font-family: inherit; /* 2 */
16+
font-size: inherit; /* 2 */
17+
line-height: inherit; /* 2 */
18+
padding: 0.25em 0.375em; /* 1 */
19+
}

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sanitize.css",
3-
"version": "8.0.1",
3+
"version": "9.0.0",
44
"description": "A best-practices CSS foundation",
55
"author": "Jonathan Neal <[email protected]>",
66
"contributors": [
@@ -14,11 +14,13 @@
1414
"main": "sanitize.css",
1515
"style": "sanitize.css",
1616
"files": [
17-
"sanitize.css"
17+
"forms.css",
18+
"sanitize.css",
19+
"typography.css"
1820
],
1921
"scripts": {
2022
"prepublishOnly": "npm test",
21-
"test": "stylelint sanitize.css"
23+
"test": "stylelint forms.css sanitize.css typography.css"
2224
},
2325
"devDependencies": {
2426
"stylelint": "^10.0.1",

0 commit comments

Comments
 (0)