Consistently render HTML elements in all browsers – CSS Reset and Normalize

The CSS resets are often used to reduce cross browser inconsistencies related to margins, paddings, heading font-sizes, line heights and so on. Many developers bank on Eric Meyer’s CSS Reset. Popular CSS framework Blueprint CSS also uses the same CSS reset. Base CSS of Yahoo also tries to apply standard rules to reduce cross browser inconsistencies.

Reason for Browser Inconsistencies?

Every browser has a default ‘user agent’ stylesheet of its own. This ‘user agent’ defines certain rules to apply them to unstyled webpages to make them look more readable. These rules vary from browser to browser. Have you ever wondered why most browsers make the links blue and visited links purple; how certain table padding and cellspacing is applied to the tables; how paddings and headings font-sizes vary across browsers? Well, this ‘user agent’ is the culprit.

So, if you didn’t know, this is the file that creates the headache while designing pages.

So what is CSS Reset?

CSS Reset is a set of CSS rules that forces every browser to set all its styles to null. This helps in avoiding the cross browser design inconsistencies. After resetting, you can start writing your styles without worrying about the rendering of HTML in different browsers.

Problems with CSS Reset

The CSS Reset can result in resetting the default browser CSS only to set those classes again. So, it’s a kind of unnecessary repetition. Moreover, resetting a universal selector can result into its own issues.

Alternative to CSS Reset – Normalize.css

Normalize.css is a result of research on differences in the default browser behavior and precisely targets the styles that need normalizing. Normalize.css is a customizable CSS file that makes browsers render all the HTML elements more consistently. Additionally, it also handles the HTML in accordance with the modern standards.

Unlike, CSS Reset, normalize.css preserves the useful defaults, thus eliminating unnecessary rest and set action on such default values. It broadens the scope by normalizing a wide range of elements. The code comments explain the purpose of the code.

Normalize.css supports Chrome, Firefox 3+, Safari 4+, Opera 10+, and Internet Explorer 6+

Installing and using normalize.css

The CSS file is available for download at

Github: necolas/normalize.css

After downloading to suitable location, include this code somewhere in the HEAD of your document.

<link rel="stylesheet" src="normalize.css" />

Else, direct copy can be included from Google Code by adding the following line to the HEAD area

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

For further details, please refer to the normalize.css official website. The demos are available at the URL http://necolas.github.com/normalize.css/demo.html

2 Responses to “Consistently render HTML elements in all browsers – CSS Reset and Normalize”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>