marcustisater/sanitize.css

Render elements consistently. Style with best practices.

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.