fruzepro / sanitize.css

Render elements consistently. Style with best practices.

sanitize.css

The best-practices CSS foundation.

sanitize.css is a CSS library that corrects broken and missing styles in all browsers, preserving useful defaults rather than unstyling everything. It’s developed alongside normalize.css, so every normalization includes the browsers or browser versions being targeted, and every opinionated change is marked and documented.

NPM

npm install --save sanitize.css

Bower

bower install --save sanitize-css

CDN

cdnjs

Features

Backgrounds should not repeat by default

* {
	background-repeat: no-repeat;
}

Box sizing should be inherited and default to border-box

* {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

Cursor should only change to hint non-obvious interfaces

html {
	cursor: default;
}

Regular text should be sans serif with a comfortable line height

html {
	font-family: sans-serif
	line-height: 1.5;
}

Documents should not use a margin for outer padding

body {
	margin: 0;
}

Navigation lists should not include a marker style

nav ol, nav ul {
	list-style: none;
}

Text selections should not include text shadows

::selection {
	text-shadow: none;
}

Media elements should align to the text center of other content

audio, canvas, iframe, img, svg, video {
	vertical-align: middle;
}

SVGs should fallback to their surrounding text color

svg {
	fill: currentColor;
}

Outlines are redundant on hovered links

:hover {
	outline-width: 0;
}

Tables should not include additional border spacing

table {
	border-collapse: collapse;
	border-spacing: 0;
}

Form controls should be fully style-able

button, input, select, textarea {
	background-color: transparent;
	border-style: none;
	color: inherit;
	font-size: 1em;
}

Textarea should only resize vertically by default

textarea {
	resize: vertical;
}

ARIA roles should include visual cursor hints

[aria-busy="true"] {
	cursor: progress;
}

[aria-controls] {
	cursor: pointer;
}

[aria-disabled] {
	cursor: default;
}

Single taps should be dispatched immediately on clickable elements

a, area, button, input, label, select, textarea, [tabindex] {
	-ms-touch-action: manipulation; /* 1 */
	touch-action: manipulation;
}

Visually hidden content should remain accessible

[hidden][aria-hidden="false"] {
	clip: rect(0, 0, 0, 0);
	display: inherit;
	position: absolute;
}

[hidden][aria-hidden="false"]:focus {
	clip: auto;
}

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 popular 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 in the latest release include Android 4.3-4.4+, Chrome 50-51+, Edge 12-13+, Firefox 46-47+, Internet Explorer 10-11, iOS 7-8+, Opera 37-38+, Safari 8-9+, and Windows Phone 8.1+.

Additionally tested and supported browsers (requiring little supplementary CSS) include Internet Explorer 9 and Safari 7.

License

sanitize.css is dedicated to the public domain.