According to its publisher, Normalize.css (necolas.github.io/normalize.css/) is a modern, HTML5-ready alternative to traditional CSS resets. The file makes browsers render all elements more consistently and in line with modern standards by precisely targeting only those specific styles that frequently need normalizing.
The product of 100’s of hours of extensive research by @necolas and @jon_neal on the differences between default browser styles, normalize.css preserves useful browser defaults rather than erasing them, while normalizing styles for a wide range of common HTML elements; correcting bugs and browser inconsistencies while improving usability.
Normalize.css is significantly different in scope and execution to traditional resets, offering support for a wide range of browsers.
Among the typical desktop and mobile browser bugs that are out of scope for resets, but which normalize.css corrects, are various display settings for HTML5 elements such as font-size for preformatted text, SVG overflow in IE9, and many web form-related bugs (including the new search input type), now fixed across browsers and operating systems.
Normalize.css is significantly different in scope and execution to traditional resets, offering support for a wide range of browsers (including mobile browsers), and includes normalization for HTML5 typography, lists, embedded content, forms, and tables.
“Resets often fail to bring browsers to a level starting point with regards to how an element is rendered. This is particularly true of forms — an area where normalize.css can provide some significant assistance,” developer Nicolas Gallagher stated. “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.”
Despite the project being based on the principle of normalization, it uses pragmatic defaults where they are preferable, and aims to help educate people about how browsers render elements by default, making it easier for coders to submit improvements.
Gallagher explains that while CSS resets tend to impose a homogenous visual style by flattening the default styles for most elements, normalize.css preserves many useful default browser styles so users do not have to re-declare styles for typographic elements.
The modular nature of normalize.css means that the project is broken down into relatively independent sections, making it easy for users to see exactly which elements need specific styles. Furthermore, it gives users the potential to remove various sections (e.g., the form normalizations) if they know these will never be needed on their website.
The publisher notes that the normalize.css code is based on detailed cross-browser research and methodical testing and the file features extensive inline documentation so designers will understand what each line of code is doing, why it was included, and what the differences are between browsers, which will help users to easily run their own tests.
There are two main approaches to using normalize.css, both of which begin by first downloading the script from GitHub; and then either using normalize.css as a starting point for your project’s base CSS, customizing the values to match design requirements, or alternatively, designers can include normalize.css “as is” and then build upon it, overriding the defaults as necessary within the CSS file.
Normalize.css is used by a variety of high profile applications, including YUI 3, Pure, Twitter Bootstrap, HTML5 Boilerplate and many other frameworks, toolkits, and sites, and currently available in two versions, v2.1.2 which offers support for IE 8+, Firefox 4+, Safari 5+, Opera and Chrome, as well as version v1.1.2, which retains support for legacy web browsers. Incorporate it into your website projects and see if it makes a difference.
