@@ -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
1820A 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
3230A 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
5454Import [ 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
6262Alternatively, import [ sanitize.css] in JS:
6363
6464``` js
6565import ' sanitize.css' ;
66- import ' sanitize.css/typography.css' ;
6766import ' sanitize.css/forms.css' ;
67+ import ' sanitize.css/typography.css' ;
6868```
6969
7070In ` 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
247267minimal, 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
268332html {
@@ -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
288352code , 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
322367Please read the [ contribution guidelines] ( CONTRIBUTING.md ) in order to make the
0 commit comments