Home > Features > Dev Depot: Normalize Code With Normalize.css • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Normalize Code With Normalize.css

Dev Depot: Normalize Code With Normalize.css

November 12, 2013
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 140 votes. Results based on votes submitted by members of XBIZ.net social network.

" Normalize.css is significantly different in scope and execution to traditional resets, offering support for a wide range of browsers. "

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.

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.


Manufacturers Take Action Against Counterfeit Sex Toys

The mainstreaming of pleasure products is proving to be a blessing and a curse for the sex toy industry. As the demand for pleasure products continues to grow, manufacturers are seeing an increase of counterfeiters... More »

Trends in Paysite Design, Content Delivery

Given the highly visual nature of adult entertainment, it is no surprise that many paysites have shown design-forward approaches — some skirting the bleeding edge, while others sought stability over... More »

Surviving Affiliates Seem to Be Thriving

Long a mainstay of traffic generation for adult website owners and monetization channel for tech savvy marketers, “sponsor programs” have delivered countless millions of dollars to affiliates... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.



Oct 05 - Oct 07
Hannover, Germany


Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!