Skip to content

Commit 5bd695f

Browse files
committed
Update README.md documentation
1 parent 7fe817c commit 5bd695f

1 file changed

Lines changed: 94 additions & 49 deletions

File tree

README.md

Lines changed: 94 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -13,58 +13,58 @@ documented.
1313
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
1414
```
1515

16-
### Forms
16+
[Learn more about `sanitize.css`](#features).
17+
18+
#### Forms CSS
1719

1820
A separate stylesheet that normalizes form controls without side effects.
1921

2022
```html
2123
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
2224
```
2325

24-
A separate stylesheet that sizes form controls without affecting native styles.
25-
26-
```html
27-
<link href="https://unpkg.com/sanitize.css/formsize.css" rel="stylesheet" />
28-
```
26+
[Learn more about `forms.css`](#typography).
2927

30-
### Typography
28+
#### Typography CSS
3129

3230
A separate stylesheet that normalizes typography using system interface fonts.
3331

3432
```html
3533
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
3634
```
3735

38-
### Page
36+
[Learn more about `typography.css`](#typography).
37+
38+
#### Page CSS
3939

40-
A separate stylesheet that applies a comfortable measure to the page.
40+
A separate stylesheet that applies a comfortable measure to plain documents.
4141

4242
```html
4343
<link href="https://unpkg.com/sanitize.css/page.css" rel="stylesheet" />
4444
```
4545

46-
### Install
46+
## Install
4747

4848
```sh
49-
npm install --save sanitize.css
49+
npm install sanitize.css --save
5050
```
5151

5252
#### Webpack Usage
5353

5454
Import [sanitize.css] in CSS:
5555

5656
```css
57-
@import 'sanitize.css';
58-
@import 'sanitize.css/typography.css';
59-
@import 'sanitize.css/forms.css';
57+
@import '~sanitize.css';
58+
@import '~sanitize.css/forms.css';
59+
@import '~sanitize.css/typography.css';
6060
```
6161

6262
Alternatively, import [sanitize.css] in JS:
6363

6464
```js
6565
import 'sanitize.css';
66-
import 'sanitize.css/typography.css';
6766
import 'sanitize.css/forms.css';
67+
import 'sanitize.css/typography.css';
6868
```
6969

7070
In `webpack.config.js`, be sure to use the appropriate loaders:
@@ -82,13 +82,36 @@ module.exports = {
8282
}
8383
```
8484

85+
**Download**
86+
87+
See https://csstools.github.io/sanitize.css/latest/sanitize.css
88+
8589
## What does it do?
8690

8791
* Normalizes styles for a wide range of elements.
8892
* Corrects bugs and common browser inconsistencies.
8993
* Provides common, useful defaults.
9094
* Explains what code does using detailed comments.
9195

96+
## Browser support
97+
98+
* Chrome (last 3)
99+
* Edge (last 3)
100+
* Firefox (last 3)
101+
* Firefox ESR
102+
* Opera (last 3)
103+
* Safari (last 3)
104+
* iOS Safari (last 2)
105+
* Internet Explorer 9+
106+
107+
## Differences
108+
109+
[normalize.css] and [sanitize.css] correct browser bugs while carefully testing
110+
and documenting changes. normalize.css styles adhere to css specifications.
111+
sanitize.css styles adhere to common developer expectations and preferences.
112+
[reset.css] unstyles all elements. Both sanitize.css and normalize.css are
113+
maintained in sync.
114+
92115
## Features
93116

94117
##### Box sizing defaults to border-box
@@ -236,33 +259,74 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
236259
}
237260
```
238261

239-
### Typography
240-
241-
[sanitize.css] includes a separate stylesheet for normalizing typography using
242-
system interface fonts.
262+
---
243263

244-
### Forms
264+
## Forms
245265

246266
[sanitize.css] includes a separate stylesheet for normalizing forms using
247267
minimal, standards-like styling.
248268

249-
**Browser**
250-
251269
```html
252-
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
270+
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
271+
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />
253272
```
254273

255-
**Download**
274+
### Forms Features
256275

257-
See https://csstools.github.io/sanitize.css/latest/typography.css
276+
##### Form controls appear visually consistent and restyle consistently
258277

259-
**CDN**
278+
```css
279+
button, input, select, textarea {
280+
background-color: transparent;
281+
border: 1px solid WindowFrame;
282+
color: inherit;
283+
font: inherit;
284+
letter-spacing: inherit;
285+
padding: 0.25em 0.375em;
286+
}
287+
```
260288

261-
see https://cdnjs.com/libraries/10up-sanitize.css/typography.css
289+
##### Expandable select controls appear visually consistent
262290

263-
#### Typography Features
291+
```css
292+
select {
293+
-moz-appearance: none;
294+
-webkit-appearance: none;
295+
background: no-repeat right center / 1em;
296+
border-radius: 0;
297+
padding-right: 1em;
298+
}
299+
300+
select:not([multiple]):not([size]) {
301+
background-image: 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");
302+
}
303+
304+
::-ms-expand {
305+
display: none;
306+
}
307+
```
308+
309+
##### Placeholders appear visually consistent in Internet Explorer
310+
311+
```css
312+
:-ms-input-placeholder {
313+
color: rgba(0, 0, 0, 0.54);
314+
}
315+
```
316+
317+
## Typography
318+
319+
[sanitize.css] includes a separate stylesheet for normalizing typography using
320+
system interface fonts.
321+
322+
```html
323+
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
324+
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />
325+
```
264326

265-
##### The default font is the system ui font
327+
### Typography Features
328+
329+
##### Typography uses the default system font
266330

267331
```css
268332
html {
@@ -282,7 +346,7 @@ html {
282346
}
283347
```
284348

285-
##### Pre-formatted and code-formatted text uses the monospace system ui font
349+
##### Pre-formatted and code-formatted text uses the monospace system font
286350

287351
```css
288352
code, kbd, pre, samp {
@@ -298,25 +362,6 @@ code, kbd, pre, samp {
298362
}
299363
```
300364

301-
## Differences
302-
303-
[normalize.css] and [sanitize.css] correct browser bugs while carefully testing
304-
and documenting changes. normalize.css styles adhere to css specifications.
305-
sanitize.css styles adhere to common developer expectations and preferences.
306-
[reset.css] unstyles all elements. Both sanitize.css and normalize.css are
307-
maintained in sync.
308-
309-
## Browser support
310-
311-
* Chrome (last 3)
312-
* Edge (last 3)
313-
* Firefox (last 3)
314-
* Firefox ESR
315-
* Opera (last 3)
316-
* Safari (last 3)
317-
* iOS Safari (last 2)
318-
* Internet Explorer 9+
319-
320365
## Contributing
321366

322367
Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the

0 commit comments

Comments
 (0)