The sanitize.css package is a CSS library that provides consistent, cross-browser default styling for HTML elements. It's designed to normalize styles across different browsers, remove default margins, and apply a consistent box-sizing model. This helps in creating a more predictable styling baseline for web projects.

What are sanitize.css's main functionalities?

Normalize styles

This code ensures that every element on the page, including pseudo-elements, inherits the box-sizing property from the html element, which is set to border-box. This makes it easier to manage layouts as it includes padding and border in the element's total width and height.

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

Remove default margins

This code removes the default margins from common elements like body, headings, paragraphs, and others. It provides a clean slate for adding custom spacing without having to override browser defaults.

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

Set default font-family

This sets the default font family to sans-serif for the entire HTML document, ensuring a consistent typography baseline across different browsers.

html { font-family: sans-serif; }

Other packages similar to sanitize.css

Changelog

Source

1.1.0 (March 20, 2015)

Added: Form support
Updated: Normalization
Updated: Border assignment

Readme

Source

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 width works 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).

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

// overwrite defaults in sanitize.scss
$default-font-family: "Open Sans";
$default-text-rendering: optimizeSpeed;

import 'vendors/sanitize.scss';

$default-box-sizing: the default box-sizing is border-box.
$default-font-family: the default font family is sans-serif.
$default-text-rendering: the default text-rendering is optimizeLegibility.
$default-monospace-font-family: the default monospace font is monospace.
$default-selection-background-color: the default selection background color is #B3D4FC.
$default-small-font-size: the default small font size is 75%.

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.

These browsers currently include Android 4.3-4.4+, Chrome 39-40+, Firefox 34-35+, Internet Explorer 10-11+, iOS 7-8+, Safari 7-8+, Windows Phone 8.1+.

License

sanitize.css is dedicated to the public domain.

FAQs

What is sanitize.css?

Is sanitize.css popular?

Is sanitize.css well maintained?

Last updated on 21 Mar 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install