sanitize.css

Render elements consistently. Style with best practices.

Installation

Bower

bower install --save sanitize-css

NPM

npm install sanitize.css

Sass

@import 'vendors/sanitize.scss';

CSS

@import url(vendors/sanitize.css);

Highlights

CSS inheritance is universal so that styles are easier to control (code).
The box model is more intuitive with border-box (reference) (reference) (code).
Smaller font-sizes display consistently across browsers (reference) (code).
Monospace fonts render consistently (reference) (code).
Border styles work as expected (reference) (code).
Text selections containing a drop shadow remain legible (reference) (code).
Content may be hidden from the screen but not screenreaders (reference) (reference) (code).

Differences

Sanitize.css styles browsers to render elements more consistently with developer expectations and preferences. Normalize.css styles browsers to render elements more consistently with each other. Reset.css unstyles every element. Each one has its own advantages.

In Sanitize.css, CSS inheritance is assigned universally so that styles cascade naturally and consistently. Wherever possible, the box model operates more intuitively. Every normalization and opinionated default is carefully documented, and most are configurable from Sass.

Options

To give you even more control, sanitize.scss allows you to define your own defaults for box-sizing, font family, text rendering, selection, etc. - all without over-declaring them later.

// overwrite defaults in sanitize.scss
$root-font-family: "Open Sans", sans-serif;
$root-text-rendering: optimizeSpeed;

import 'vendors/sanitize.scss';

$root-box-sizing: the default box-sizing is border-box.
$root-cursor: the default cursor is default.
$root-font-family: the default font family is sans-serif.
$root-font-size: the default font size 100%.
$root-line-height: the default line height is 1.5.
$root-text-rendering: the default text-rendering is optimizeLegibility.
$html-background-color: the default background color is #FFFFFF.
$html-color: the default text color is #000000.
$anchor-text-decoration: the default anchor text decoration is none.
$form-element-background-color: the default form background color is transparent.
$media-element-vertical-align: the default vertical alignment for media elements is middle.
$monospace-font-family: the default font for code elements is monospace.
$nav-list-style: the default list style for navigation lists is none.
$selection-background-color: the default selection background color is #B3D4FC.
$selection-text-shadow: the default selection shadow is none.
$small-font-size: the default font size for small elements is 75%.
$table-border-collapse: the default border collapse for tables is collapse.
$table-border-spacing: the default border spacing for tables is 0.
$textarea-resize: the default resize for textarea’s is vertical.

Support

At present, we support the current and previous major releases of popular web browsers. When a new version is released, we begin supporting that version and stop supporting the third most recent version. Many older browsers happen to be remain supported using the same CSS without additional needs.

Currently tested and supported browsers include Android 4.3-4.4+, Chrome 39-45+, Edge 12+, Firefox 34-40+, Internet Explorer 9-11, iOS 7-8+, Safari 7-9+, Windows Phone 8.1+.

License

sanitize.css is dedicated to the public domain.