Normalize.css for a better cross-browser styling consistency

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. It is an alternative to CSS resets.

Normalize.css is currently used in some form by HTML5 BoilerplateTwitter BootstrapGOV.UKTinker.ioCSS Tricks, and many other frameworks, toolkits, and sites.

The aims of normalize.css are as follows:

  • Preserve useful browser defaults rather than erasing them.
  • Normalize styles for a wide range of HTML elements.
  • Correct bugs and common browser inconsistencies.
  • Improve usability with subtle improvements.
  • Explain the code using comments and detailed documentation.

It supports a wide range of browsers (including mobile browsers) and includes CSS that normalizes HTML5 elements, typography, lists, embedded content, forms, and tables.

Although normalize is an alternative to Reset, there are some significant differences from traditional CSS resets.

Normalize.css preserves useful defaults

Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to re-declare styles for all the common typographic elements.

When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.

Normalize.css doesn’t clutter your debugging tools

A common irritation when using resets is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted styles and the conservative use of multiple selectors in rulesets.

Normalize.css is modular

The project is broken down into relatively independent sections, making it easy for you to see exactly which elements need specific styles. Furthermore, it gives you the potential to remove sections if you know they will never be needed by your website.

How to use it

There are then 2 main ways to make use of normalize, after you download normalize.css from GitHub.

1: use normalize.css as a starting point for your own project’s base CSS, customizing the values to match the design’s requirements.

2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.

Posted in Web Development Tagged with: , , , ,