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.0.0 (11 6, 2012)

Updated: Moved from normalize.css to sanitize.css

Normalize.css had and still has opinionated, developer-centric styles. For example, sub and sup elements are styled to not impact the line height of text, and table, th, and td omit all spacing. As Nicolas pushed Normalize.css into maturity, future preferences like these no longer had a place in the project. Almost a year later, Sanitize was officially branded. Where Normalize.css conservatively follows user agent consensus and results in more pre-styled elements, Sanitize.css liberally follows developer consensus and results in more unstyled elements.

Readme

Source

sanitize.css

Render elements consistently. Style with best practices.

Sass usage

import 'vendors/sanitize.scss';

Download sanitize.scss

CSS usage

import 'vendors/sanitize.css';

Download 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+.

FAQs

What is sanitize.css?

Is sanitize.css popular?

Is sanitize.css well maintained?

Last updated on 17 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