@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

@csstools/normalize.css

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

Usage

<link href="https://unpkg.com/@csstools/normalize.css" rel="stylesheet" />

Install

npm install @csstools/normalize.css --save

Webpack Usage

Import @csstools/normalize.css in CSS:

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

Alternatively, import @csstools/normalize.css in JS:

import '@csstools/normalize.css';

In webpack.config.js, 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 2)
• iOS Safari (last 2)

Contributing

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

Similar Projects

• modern-normalize.css - An alternative to normalize.css, adhering to a minimal set of normalizations and common developer expectations and preferences.
• opinionate.css - A supplement to normalize.css with opinionated rules.
• remedy.css - An alternative to normalize.css, adhering to different common developer expectations and preferences.
• sanitize.css - An alternative to normalize.css, adhering to common developer expectations and preferences.

Differences from necolas/normalize.css

Nicolas Gallagher and I started writing normalize.css together. I named and created the normalize.css repository with the help of Paul Irish and Ben Alman. I transferred the repository to Nicolas, who turned it into a “household” CSS library.

Later, I resumed authorship of normalize.css with Luciano Battagliero. Together, we tagged, deprecated, and removed “opinionated” styles — styles developers often prefer but which do not fix bugs or “normalize” browser differences.

Later, Nicolas resumed authorship and the issue of whether to include or omit the opinionated styles forced us to split.

I continue working on the normalize.css project, currently under the “csstools” tag. I hope one day our differences are resolved and the projects are one again.

Acknowledgements

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