sanitize.css

Render elements consistently. Follow best practices.

NPM

npm install --save-dev sanitize.css

Bower

bower install --save sanitize-css

sanitize.css corrects broken and missing styles in all browsers so that elements always render consistently. Next, it adds new default styles based on modern best practices. Finally, it exposes opinionated defaults as governable variables.

*,
::before,
::after {
	box-sizing: inherit;
}

:root {
	box-sizing: var(--root-box-sizing, border-box);
}

Each new default is easily configurable with variables available in your favorite CSS, Less, Sass, SCSS, and Stylus flavors.

@import url("node_modules/sanitize.css/sanitize.css");

/* overwrite defaults in sanitize.css */
:root {
	--root-box-sizing: border-box;
	--root-font-family: "Open Sans", sans-serif;
	--root-color: #333;
}

@import "node_modules/sanitize.css/sanitize.less";

// overwrite defaults in sanitize.less
@root-box-sizing: border-box;
@root-font-family: sans-serif;
@root-color: #333333;

// overwrite defaults in sanitize.sass
$root-box-sizing: border-box
$root-font-family: "Open Sans", sans-serif
$root-color: #333333

import "node_modules/sanitize.css/sanitize.scss"

// overwrite defaults in sanitize.scss
$root-box-sizing: border-box;
$root-font-family: "Open Sans", sans-serif;
$root-color: #333333;

import "node_modules/sanitize.css/sanitize.scss";

// overwrite defaults in sanitize.styl
root-box-sizing = border-box;
root-font-family = "Open Sans", sans-serif
root-color = #333333

@import "node_modules/sanitize.css/sanitize.styl"

Variables

`root-background-color`

Controls the page background color (default: #ffffff)

`root-box-sizing`

Controls the page box model inherited by all elements (default: border-box)

`root-color`

Controls the page text color inherited by all elements (default: #ffffff)

`root-cursor`

Controls the default page cursor (default: default)

`root-font-family`

Controls the page font inherited by all elements (default: sans-serif)

`root-font-size`

Controls the page text size inherited by all elements (default: 100%)

`root-line-height`

Controls the page text line height inherited by all elements (default: 1.5)

`background-repeat`

Controls how background images are repeated on all elements (default: no-repeat)

`form-element-background-color`

Controls the background color of form controls (button, input, select, textarea) (default: transparent)

`form-element-color`

Controls the text color of form controls (button, input, select, textarea) (default: inherit)

`form-element-min-height`

Controls the minimum height of form controls (button, [type="button"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="reset"], [type="search"], [type="submit"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea) (default: 1.5em)

`media-element-vertical-align`

Controls the vertical align of media elements (audio, canvas, iframe, img, svg, video) (default: middle)

`monospace-font-family`

Controls the font used by markup elements (code, kbd, pre, samp) (default: monospace)

`nav-list-style`

Controls the list style for navigation lists (nav ol, nav ul) (default: none)

`selection-background-color`

Controls the background color of selected text (default: #b3d4fc)

`selection-color`

Controls the text color of selected text (default: #ffffff)

`selection-text-shadow`

Controls the text shadow of selected text (default: none)

`small-font-size`

Controls the text size of small elements (default: 75%)

`table-border-collapse`

Controls how borders collapse within table elements (default: collapse)

`table-border-spacing`

Controls the distance between borders within table elements (default: 0)

`textarea-resize`

Controls the resizability of textarea elements (default: vertical)

Differences

sanitize.css styles elements more consistently with developers’ expectations and preferences. normalize.css styles elements more consistently between browsers. reset.css unstyles every element. Both sanitize.css and normalize.css are maintained in sync, and both projects correct browser bugs while carefully testing and documenting every change.

Support

At present, sanitize.css supports the current and previous major releases of common web browsers. When a new version is released, we begin supporting that newer version and stop supporting the third version back. Additionally, many older browsers remain supported without supplementary CSS.

Currently tested and supported browsers include Android 4.3-4.4+, Chrome 47-48+, Edge 12-13+, Firefox 43-44+, Internet Explorer 10-11, iOS 7-8+, Opera 34-35+, Safari 8-9+, and Windows Phone 8.1+.

Additionally tested and supported browsers (requiring no supplementary CSS) include Internet Explorer 9 and Safari 7.

License

sanitize.css is dedicated to the public domain.

patlegris / sanitize.css