Normalize CSS instead of Reset


Previously I wrote about Why Reset CSS and gave you a code snippet that helps you override browser defaults and set consistency across all.  But I later figured out that it was an age old trick and web has changed a lot since then. Now we need more modern HTML5 alternative to the traditional reset.

Normalize.css is a better alternative to reset because it preserves useful browser defaults rather than erasing them. It has CSS that normalizes HTML5 elements, typography, lists, embedded content, forms and tables.

Have a look at this example on how search field is set consistent across browsers:

 <pre>
  input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}
</pre>

In addition to normalizing it also corrects common bugs for desktop and mobile browsers which is out of scope for resets.

Simplest difference between the two is that – Reset removes all built-in browser styling and Normalize aims to make built-in browser styling consistent across browsers.

So who’s using it?

Twitter Bootstrap, HTML5 Boilerplate, CSS Tricks and many other frameworks use Normalize CSS.

Further Read

Normalize.css has pretty neat inline documentation and there are additional detail and explanation on their wiki page.

There is also a nice article by @necolas on About Normalize.css which will help you understand the details.

– NishAnil on twitter

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s