# normalize.css > A modern alternative to CSS resets [![npm][npm-image]][npm-url] [![license][license-image]][license-url] [![changelog][changelog-image]][changelog-url] [![gitter][gitter-image]][gitter-url] --- ## Setting Up * CDN available [here](https://yarnpkg.com/en/package/normalize.css) * Download normalize.css [here](https://necolas.github.io/normalize.css/latest/normalize.css) * Using npm: ```sh npm install --save normalize.css ``` --- ## What Does It Do? * Preserves useful defaults, unlike many CSS resets. * Normalizes styles for a wide range of elements. * Corrects bugs and common browser inconsistencies. * Improves usability with subtle modifications. * Explains what code does using detailed comments. --- ## Browser Support * Chrome * Edge * Firefox ESR+ * Internet Explorer 10+ * Safari 8+ * Opera --- ## Extended Details and Known Issues Additional detail and explanation of the esoteric parts of normalize.css: ### `pre, code, kbd, samp` * The `font-family: monospace, monospace` hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of `monospace` is intentional [(Source)](https://en.wikipedia.org/wiki/User:Davidgothberg/Test59). ### `sub, sup` * Normally, using `sub` or `sup` affects the line-box height of text in all browsers [(Source)](https://gist.github.com/413930). ### `select` * By default, Chrome on OS X and Safari on OS X allow very limited styling of `select`, unless a border property is set. The default font weight on `optgroup` elements cannot safely be changed in Chrome on OSX and Safari on OS X. ### `[type="checkbox"]` * It is recommended that you do not style checkbox and radio inputs as Firefox's implementation does not respect box-sizing, padding, or width. ### `[type="number"]` * Certain font size values applied to number inputs cause the cursor style of the decrement button to change from `default` to `text`. ### `[type="search"]` * The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In Chrome and Safari on Windows you can't control `border` properly. It will apply `border-width` but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying `-webkit-appearance: textfield` addresses these issues without removing the benefits of search inputs (e.g. showing past searches). ## Contributing Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the contribution process easy and effective for everyone involved. [changelog-image]: https://img.shields.io/badge/changelog-md-blue.svg?style=flat-square [changelog-url]: CHANGELOG.md [license-image]: https://img.shields.io/npm/l/normalize.css.svg?style=flat-square [license-url]: LICENSE.md [npm-image]: https://img.shields.io/npm/v/normalize.css.svg?style=flat-square [npm-url]: https://www.npmjs.com/package/normalize.css [gitter-image]: https://img.shields.io/badge/chat-gitter-blue.svg?style=flat-square [gitter-url]: https://gitter.im/necolas/normalize.css