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 170 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.


Camming Issue: An Evolving Business

One of the most visual examples of the growing maturity and success of today’s live webcam industry is found in the emergence of professional cam studios. These facilities evolved from simple locations... More »

Camming Issue: Models vs. Affiliates

One of the most contentious conversations among cam models today involves affiliate promotions that include unauthorized photos or videos of the models. This isn’t a matter of a model’s, network’s,... More »

Camming Issue: Profits on Rise for Performers

It’s been 20 years since JenniCam rocked the infant internet with the first adult-oriented live cam shows, revealing the intimate details of this groundbreaking cam performer’s daily life —... 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 Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.


XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA

XBIZ Awards 2017

Jan 12 - Jan 12
Los Angeles, CA

ANME Founders Show

Jan 14 - Jan 15
Los Angeles Marriott Burbank Airport

Everything To Do With Sex Show

Jan 20 - Jan 22
Montréal, Québec
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!