335 lines
6.5 KiB
Markdown
335 lines
6.5 KiB
Markdown
# sanitize.css [<img src="https://csstools.github.io/sanitize.css/logo.svg" alt="sanitize" width="90" height="90" align="right">][sanitize.css]
|
|
|
|
[sanitize.css] is a CSS library that provides consistent, cross-browser
|
|
default styling of HTML elements alongside useful defaults.
|
|
|
|
It is developed alongside [normalize.css], which means every normalization
|
|
is included, and every normalization and opinion are clearly marked and
|
|
documented.
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
|
|
```
|
|
|
|
### 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" />
|
|
```
|
|
|
|
### Measure
|
|
|
|
A separate stylesheet that applies a comfortable measure to the page.
|
|
|
|
```html
|
|
<link href="https://unpkg.com/sanitize.css/measure.css" rel="stylesheet" />
|
|
```
|
|
|
|
### Install
|
|
|
|
```sh
|
|
npm install --save sanitize.css
|
|
```
|
|
|
|
#### Webpack Usage
|
|
|
|
Import [sanitize.css] in CSS:
|
|
|
|
```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:
|
|
|
|
```js
|
|
module.exports = {
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.css$/,
|
|
use: [ 'style-loader', 'css-loader' ]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
## What does it do?
|
|
|
|
* Normalizes styles for a wide range of elements.
|
|
* Corrects bugs and common browser inconsistencies.
|
|
* Provides common, useful defaults.
|
|
* Explains what code does using detailed comments.
|
|
|
|
## Features
|
|
|
|
##### Box sizing defaults to border-box
|
|
|
|
```css
|
|
*, ::before, ::after {
|
|
box-sizing: border-box;
|
|
}
|
|
```
|
|
|
|
##### Backgrounds do not repeat by default
|
|
|
|
```css
|
|
*, ::before, ::after {
|
|
background-repeat: no-repeat;
|
|
}
|
|
```
|
|
|
|
##### Pseudo-elements inherit text decoration and vertical alignment
|
|
|
|
```css
|
|
::before,
|
|
::after {
|
|
text-decoration: inherit;
|
|
vertical-align: inherit;
|
|
}
|
|
```
|
|
|
|
##### Cursors only change to hint non-obvious interfaces
|
|
|
|
```css
|
|
html {
|
|
cursor: default;
|
|
}
|
|
```
|
|
|
|
##### Text has a comfortable line height in all browsers
|
|
|
|
```css
|
|
html {
|
|
line-height: 1.5;
|
|
}
|
|
```
|
|
|
|
##### Tabs appear the same on the web as in a typical editor
|
|
|
|
```css
|
|
html {
|
|
tab-size: 4;
|
|
}
|
|
```
|
|
|
|
##### Words break to prevent overflow
|
|
|
|
```css
|
|
html {
|
|
word-break: break-all;
|
|
}
|
|
```
|
|
|
|
##### Documents do not use a margin for outer padding
|
|
|
|
```css
|
|
body {
|
|
margin: 0;
|
|
}
|
|
```
|
|
|
|
##### Navigation lists do not include a marker style
|
|
|
|
```css
|
|
nav ol, nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
```
|
|
|
|
##### Media elements align to the text center of other content
|
|
|
|
```css
|
|
audio, canvas, iframe, img, svg, video {
|
|
vertical-align: middle;
|
|
}
|
|
```
|
|
|
|
##### SVGs fallback to the current text color
|
|
|
|
```css
|
|
svg:not([fill]) {
|
|
fill: currentColor;
|
|
}
|
|
```
|
|
|
|
##### Tables do not include additional border spacing
|
|
|
|
```css
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
```
|
|
|
|
##### Textareas only resize vertically by default
|
|
|
|
```css
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
```
|
|
|
|
##### Single taps are dispatched immediately on clickable elements
|
|
|
|
```css
|
|
a, area, button, input, label, select, summary, textarea, [tabindex] {
|
|
-ms-touch-action: manipulation;
|
|
touch-action: manipulation;
|
|
}
|
|
```
|
|
|
|
##### ARIA roles include visual cursor hints
|
|
|
|
```css
|
|
[aria-busy="true"] {
|
|
cursor: progress;
|
|
}
|
|
|
|
[aria-controls] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[aria-disabled="true"], [disabled] {
|
|
cursor: default;
|
|
}
|
|
```
|
|
|
|
##### Visually hidden content remains accessible
|
|
|
|
```css
|
|
[aria-hidden="false"][hidden] {
|
|
display: initial;
|
|
}
|
|
|
|
[aria-hidden="false"][hidden]:not(:focus) {
|
|
clip: rect(0, 0, 0, 0);
|
|
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
|
|
and documenting changes. normalize.css styles adhere to css specifications.
|
|
sanitize.css styles adhere to common developer expectations and preferences.
|
|
[reset.css] unstyles all elements. Both sanitize.css and normalize.css are
|
|
maintained in sync.
|
|
|
|
## Browser support
|
|
|
|
* Chrome (last 3)
|
|
* Edge (last 3)
|
|
* Firefox (last 3)
|
|
* Firefox ESR
|
|
* Opera (last 3)
|
|
* Safari (last 3)
|
|
* iOS Safari (last 2)
|
|
* Internet Explorer 9+
|
|
|
|
## Contributing
|
|
|
|
Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the
|
|
contribution process easy and effective for everyone involved.
|
|
|
|
## Acknowledgements
|
|
|
|
sanitize.css is a project by [Jonathan Neal](https://github.com/jonathantneal),
|
|
built upon normalize.css, a project by
|
|
[Jonathan Neal](https://github.com/jonathantneal),
|
|
co-created with [Nicolas Gallagher](https://github.com/necolas).
|
|
|
|
[normalize.css]: https://github.com/csstools/normalize.css
|
|
[reset.css]: http://meyerweb.com/eric/tools/css/reset/
|
|
[sanitize.css]: https://github.com/csstools/sanitize.css
|