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.