# sanitize.css [

][sanitize.css] [sanitize.css] is a CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults. **sanitize.css** is developed alongside [normalize.css], which means every normalization is included, and every normalization and opinion are clearly marked and documented. **sanitize.css** wraps styles in zero-specificity selectors using `:where()`. ## Usage ```html ``` [Learn more about `sanitize.css`](#features). #### Forms CSS A separate stylesheet that normalizes form controls without side effects. ```html ``` [Learn more about `forms.css`](#forms). #### Assets CSS A separate stylesheet that applies a comfortable measure to plain documents. ```html ``` [Learn more about `assets.css`](#assets). #### Typography CSS A separate stylesheet that normalizes typography using system interface fonts. ```html ``` [Learn more about `typography.css`](#typography). #### Reduce Motion CSS A separate stylesheet for restricting motion when the user has requested this at system level. ```html ``` [Learn more about `reduce-motion.css`](#reduce-motion). #### System-UI A separate stylesheet that adds support for using `system-ui` in Firefox. ```html ``` #### UI-Monospace A separate stylesheet that adds support for using `ui-monospace` in Chrome, Edge, and Firefox. ```html ``` ## Install ```sh npm install sanitize.css --save ``` #### Webpack Usage Import [sanitize.css] in CSS: ```css @import '~sanitize.css'; @import '~sanitize.css/forms.css'; @import '~sanitize.css/typography.css'; ``` Alternatively, import [sanitize.css] in JS: ```js import 'sanitize.css'; import 'sanitize.css/forms.css'; import 'sanitize.css/typography.css'; ``` In `webpack.config.js`, be sure to use the appropriate loaders: ```js module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } } ``` **Download** See https://csstools.github.io/sanitize.css/latest/sanitize.css ## What does it do? * Normalizes styles for a wide range of elements. * Corrects bugs and common browser inconsistencies. * Provides common, useful defaults. * Explains what code does using detailed comments. ## Browser support * Chrome (last 2) * Edge (last 2) * Firefox (last 2) * Firefox ESR * Opera (last 2) * Safari (last 2) * iOS Safari (last 2) * Internet Explorer 9+ ## Differences [normalize.css] and [sanitize.css] correct browser bugs while carefully testing and documenting changes. normalize.css styles adhere to css specifications. sanitize.css styles adhere to common developer expectations and preferences. [reset.css] unstyles all elements. Both sanitize.css and normalize.css are maintained in sync. ## Features ##### Box sizing defaults to border-box ```css *, ::before, ::after { box-sizing: border-box; } ``` ##### Backgrounds do not repeat by default ```css *, ::before, ::after { background-repeat: no-repeat; } ``` ##### Pseudo-elements inherit text decoration and vertical alignment ```css ::before, ::after { text-decoration: inherit; vertical-align: inherit; } ``` ##### Cursors only change to hint non-obvious interfaces ```css html { cursor: default; } ``` ##### Text has a comfortable line height in all browsers ```css html { line-height: 1.5; } ``` ##### Tabs appear the same on the web as in a typical editor ```css html { tab-size: 4; } ``` ##### Words break to prevent overflow ```css html { word-break: break-all; } ``` ##### Documents do not use a margin for outer padding ```css body { margin: 0; } ``` ##### Navigation lists do not include a marker style ```css nav ol, nav ul { list-style: none; padding: 0; } ``` ##### Media elements align to the text center of other content ```css audio, canvas, iframe, img, svg, video { vertical-align: middle; } ``` ##### SVGs fallback to the current text color ```css svg:not([fill]) { fill: currentColor; } ``` ##### Tables do not include additional border spacing ```css table { border-collapse: collapse; } ``` ##### Textareas only resize vertically by default ```css textarea { resize: vertical; } ``` ##### Single taps are dispatched immediately on clickable elements ```css a, area, button, input, label, select, summary, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; } ``` ##### ARIA roles include visual cursor hints ```css [aria-busy="true"] { cursor: progress; } [aria-controls] { cursor: pointer; } [aria-disabled="true"], [disabled] { cursor: default; } ``` ##### Visually hidden content remains accessible ```css [aria-hidden="false"][hidden] { display: initial; } [aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; } ``` --- ## Forms [sanitize.css] includes a separate stylesheet for normalizing forms using minimal, standards-like styling. ```html ``` ### Forms Features ##### Form controls appear visually consistent and restyle consistently ```css button, input, select, textarea { background-color: transparent; border: 1px solid WindowFrame; color: inherit; font: inherit; letter-spacing: inherit; padding: 0.25em 0.375em; } [type="color"], [type="range"] { border-width: 0; padding: 0; } ``` ##### Expandable select controls appear visually consistent ```css select { -moz-appearance: none; -webkit-appearance: none; background: no-repeat right center / 1em; border-radius: 0; padding-right: 1em; } select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E"); } ::-ms-expand { display: none; } ``` ##### Placeholders appear visually consistent in Internet Explorer ```css :-ms-input-placeholder { color: rgba(0, 0, 0, 0.54); } ``` ## Assets [sanitize.css] includes a separate stylesheet for normalizing restricting the size of assets in all browsers. ```html ``` ### Assets Features ##### Assets use a comfortable measure in all browsers ```css iframe, img, input, select, textarea { height: auto; max-width: 100%; } ``` ## Typography [sanitize.css] includes a separate stylesheet for normalizing typography using system interface fonts. ```html ``` ### Typography Features ##### Typography uses the default system font ```css html { font-family: system-ui, /* macOS 10.11-10.12 */ -apple-system, /* Windows 6+ */ Segoe UI, /* Android 4+ */ Roboto, /* Ubuntu 10.10+ */ Ubuntu, /* Gnome 3+ */ Cantarell, /* KDE Plasma 5+ */ Noto Sans, /* fallback */ sans-serif, /* macOS emoji */ "Apple Color Emoji", /* Windows emoji */ "Segoe UI Emoji", /* Windows emoji */ "Segoe UI Symbol", /* Linux emoji */ "Noto Color Emoji"; } ``` ##### Pre-formatted and code-formatted text uses the monospace system font ```css code, kbd, pre, samp { font-family: /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas, /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace, /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono, /* Linux/OpenOffice fallback */ Liberation Mono, /* fallback */ monospace; } ``` ## Reduce Motion [sanitize.css] includes a separate stylesheet for restricting motion when the user has requested this at a system level. ```html ``` ### Reduce Motion Features ##### Animations, scrolling effects, and transitions are reduced in all browsers ```css @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: 0s !important; } } ``` ## Contributing Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the contribution process easy and effective for everyone involved. ## Acknowledgements sanitize.css is a project by [Jonathan Neal](https://github.com/jonathantneal), built upon normalize.css, a project by [Jonathan Neal](https://github.com/jonathantneal), co-created with [Nicolas Gallagher](https://github.com/necolas). [normalize.css]: https://github.com/csstools/normalize.css [reset.css]: http://meyerweb.com/eric/tools/css/reset/ [sanitize.css]: https://github.com/csstools/sanitize.css

	Stars	Issues	Version	Updated	Created
normalize.css	51,895	73	8.0.1	6 years ago	12 years ago
reset.css	11	0	2.0.2	9 years ago	9 years ago
sanitize.css	5,167	16	13.0.0	3 years ago	9 years ago
styled-normalize	447	7	8.1.1	3 months ago	7 years ago

normalize.css vs reset.css vs sanitize.css vs styled-normalize

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past