@csstools/normalize.css

What is @csstools/normalize.css?

The @csstools/normalize.css npm package is a modern, HTML5-ready alternative to CSS resets. It normalizes styles for a wide range of elements and corrects bugs and common browser inconsistencies. It also improves usability with subtle improvements to the default styling of elements.

What are @csstools/normalize.css's main functionalities?

Preserves useful defaults

Rather than unsetting all styles, @csstools/normalize.css preserves useful defaults for elements, making it easier to start designing with a solid foundation.

import 'normalize.css';

Normalizes styles for a wide range of HTML elements

It normalizes styles for a wide range of HTML elements, ensuring that elements render more consistently across different browsers.

import 'normalize.css';

Corrects bugs and common browser inconsistencies

The package addresses various bugs and common browser inconsistencies that can affect the display of elements, providing a more uniform experience across different platforms.

import 'normalize.css';

Improves usability

It includes styles that improve the usability of elements, such as making sure that tap targets are appropriately sized on mobile devices.

import 'normalize.css';

Explains what code does using detailed comments

The CSS file within the package is well-commented, explaining what each style does and why it's included, which is helpful for developers to understand the purpose of the normalization.

import 'normalize.css';

Other packages similar to @csstools/normalize.css

sanitize.css

sanitize.css is another CSS library that normalizes styles across browsers. It takes a slightly different approach by also setting default styles for a range of elements, aiming to reduce the need for CSS resets.

reset-css

reset-css is a package that provides a simple CSS reset to reduce browser inconsistencies in things like default line heights, margins, and font sizes of headings. It is more of a traditional reset compared to the normalization approach of @csstools/normalize.css.

modern-normalize

modern-normalize is a smaller, more opinionated alternative to @csstools/normalize.css. It targets modern browsers only and provides normalization of styles with less overhead.

README

normalize.css

normalize.css is a CSS library that provides consistent, cross-browser default styling of HTML elements.

Usage

npm install --save @csstools/normalize.css

Usage in npm and webpack

Import normalize.css in CSS:

@import '~@csstools/normalize.css';

Alternatively, import normalize.css in JS:

import '@csstools/normalize.css';

In webpack.config.js, be sure to use the appropriate loaders:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

Download

See https://csstools.github.io/normalize.css/latest/normalize.css

What does it do?

• Normalizes styles for a wide range of elements.
• Corrects bugs and common browser inconsistencies.
• Explains what code does using detailed comments.

Browser support

• Chrome (last 3)
• Edge (last 3)
• Firefox (last 3)
• Firefox ESR
• Opera (last 3)
• Safari (last 3)
• iOS Safari (last 2)
• Internet Explorer 9+

Contributing

Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.

Similar Projects

• opinionate.css - A supplement to normalize.css with opinionated rules
• sanitize.css - An alternative to normalize.css, adhering to common developer expectations and preferences

Acknowledgements

normalize.css is a project by Jonathan Neal, co-created with Nicolas Gallagher.

Changelog

9.0.1 (September 4, 2018)

• Changed: Restored ::-moz-focus-inner and :-moz-focusring normalizations confirmed necessary in Firefox 61.
• Changed: Sorted the ::-webkit-inner-spin-button and ::-webkit-outer-spin-button pseudo-class selectors.
• Updated: Tests.