Normalize.css. A modern alternative to CSS resets

Nearly every webdeveloper knows, what CSS reset is. Basically, this is a carefully crafted CSS file that makes browsers render all elements more consistently and in line with modern standards. In other words, they try to make your page look similar in all browsers. Today, I came across Normalize.css, a project by Nicolas Gallagher and Jonathan Neal, and wanted to share my thoughts.

Normalize.css authors claims, that they researched the differences between default browser styles in order to precisely target only those styles that really need normalizing. For this reason, Normalize.css is intended to be used as an alternative to CSS resets.

Key features of Normalize.css (again, according to its authors):

  • 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 improvements,
  • explains what code does using detailed comments.

It’s suggested that you read the normalize.css file and consider customising it to meet your needs. Alternatively, include the file in your project and override the defaults later in your CSS.

Browser support (as of writing this article):

  • Google Chrome (any?),
  • Mozilla Firefox 4+,
  • Apple Safari 5+,
  • Opera 12+,
  • Internet Explorer 8+.

Here is the demo of Normalize.css in action.

Leave a Reply