Dev Depot: Normalize Code With Normalize.css

Stephen Yagielowicz

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.

Related:  

More Articles

profile

Q&A: Yanks.com Flourishes With Commander Todd Spaits

Alejandro Freixes ·
opinion

After a Long Summer, It Is Back to Work

Mitch Platt ·
opinion

The Adult Industry Can No Longer Be an Island

Eric Paul Leue ·
opinion

Is Stale Blog Content Hurting Your SEO?

Adrian DeGus ·
opinion

Digital Advertising Really Isn’t Advertising

Juicy Jay ·
opinion

Will Your Business Need a Data Protection Officer?

Chad Anderson ·
profile

WIA Profile: Maxine Lynn

Women In Adult ·
profile

Q&A: ExoClick CEO Benjamin Fonzé on Ad Network Conquest

Alejandro Freixes ·
opinion

It’s Time for FSC to Set the Terms of Debates

Eric Paul Leue ·
educational

A Legal Primer to Help Develop Explicit Brands Previously Off Limits

Lawrence G. Walters ·
Show More