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

  • By CSS Tools
  • Last update: Jan 6, 2023
  • Comments: 13

@csstools/normalize.css normalize

@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 Necolas, 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, Necolas 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.

Github

https://github.com/csstools/normalize.css

Comments(13)

  • 1

    Difference between necolas/normalize.css and csstools/normalize.css

    Hi there :)

    I´ve been planning on replacing normalize.css via postcss-normalize and now found out, that your normalize.css differs in some aspects from necolas ones. ex.body { margin: 0 }

    Now I´m confused what the difference between the two libraries is and what to use. Also I wonder why postcss-normalize isn´t simply using the well-established normalize.css library for your postcss-pluginas as a codebase.

    Maybe you can solve my confusion :)

  • 2

    Explain normalize.css vs opinionated.css vs evergreen.css etc

    I noticed there are several different css files, I was wondering if somebody could elaborate on what the differences are and when to use each of these? Thanks!!!

  • 3

    Remove input { overflow: visible } as it causes inconsistencies and problems

  • 4

    Renaming of the project

    As discussed in https://github.com/zurb/foundation-sites/issues/11577, there is some confusions with the purpose of this project regarding to its name "normalize.css". If one could argue the philosophical approach of the project is still to strictly "normalize" browsers, the is associated by the whole CSS community to the historical necolas/normalize.css project.

    The project is currently being renamed to csstools-normalize, but I'm opening this issue so we can track the evolution of this and receive comments (in case someone have a better name).

    See discussions in:

    • https://github.com/zurb/foundation-sites/issues/11577
    • https://github.com/csstools/normalize.css/issues/3
  • 5

    Missing note for textarea font changes in opinionated.css

    Hi, I was comparing the differences between normalize.css and opinionated.css and noticed there was no note for the textarea font adjustments in opinionated.css.

  • 6

    Add reasoning behind the fork to the readme

    I've just came across the reason behind forking necolas/normalize.css in the changelog of this project:

    There are now 2 versions of 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 Necolas, who made it into a “household” CSS library. Much later I resumed management of normalize.css with Luciano Battagliero. We tagged, deprecated, and removed “opinionated” styles — styles developers often prefer but which do not fix bugs or “normalize” browser differences. Necolas disagreed with this change, and resolved the matter AFAIK by removing all of the other contributors, locking discussion threads, wiping my name (and his) from all files, and blocking me from being able to follow the project.

    I may later create a new project with a new name, but for now I intend to continue working on the normalize.css project, sometimes under the “csstools” tag. I hope one day our differences are resolved and the projects will be one again.

    For reference within this project: normalize.css resolves bugs and common browser inconsistencies. opinionated.css does the same while preserving the classic opinionated styles.

    As discussed in a PR towards modern-normalize, this backstory should be added to the readme.

  • 7

    Remove Gray Highlight When Tapping Links in Mobile Safari

    There is unexpected behavior in iOS devices. When user tap, gray background is exist.

    To fix, we should add to html/body:

    /* Remove Gray Highlight When Tapping Links in Mobile Safari */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    Proof (and bug in my project): https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/

    Thanks!

  • 8

    Return ::placeholder rules

    ::placeholder rules were removed due to Edge bug, but it was fixed in the Edge 15

    Normalize.css supports last 3 version of edge: 17, 16, 15. So now these rules can be returned.

  • 9

    table border-color currentcolor?

    I could not find any source that border-color should be inherited. Firefox, which is not listed as affected, uses "currentColor" and not "inherit".

  • 10

    Normalize table properties across browsers

  • 11

    10.1.0

    • Fixed: Edge comments without Chrome are are changed to Edge 18-.
    • Fixed: Chrome comments without Edge have Edge added.
    • Fixed: Nested list dl normalizations split.
    • Fixed: Logical margin-block normalization changed to margin.
  • 12

    `pre` is separated from `code, kbd, samp`

    Commit bbcf62d separated the style rules for pre from code, kbd, samp, while being identical, and placed them under "Grouping content" without clear explanation.

    Maybe I'm missing something, but this seems like an oversight and correcting it saves some bytes.

  • 13

    Download link leads to old version

    The project readme has a link for downloading the latest version. https://github.com/csstools/normalize.css/blob/8e9bd2c73d7e6074bf93dbcba37188cb8e2f14a2/README.md?plain=1#L47-L49 This however does not lead to the latest version.

Popular Tag

Related