Hello Normalize.css

, by

Normalize.css is the new “alternative to the traditional reset.css”. It has been developed by Jonathan Neal and Nicolas Gallagher, who also create the useful Micro Clearfix. After “100’s of hours” checking differences between default browser styles, they wrote the stylesheet which:

  • preserves browser default
  • normalizes HMTL5 elements
  • fixes common bugs

on both desktop and mobile browsers.

Preserve browser default

One of the big difference between normalize.css and reset.css, is that the first one keeps browser defaults, while the latest reset everything.

UL tag, for instance, has by default, a 40px margin-left and prepends its LIs with bullets. This is how reset.css and normalize.css deal with it :

/* in reset.css */
ul { margin: 0; list-style: none;}
/* in normalize.css : nothing */

The idea behind is to tell that UL has those attributes for a reason : It defines a list. For a good readability, a list item must be indented and prepended by a bullet, or a comma, a disc … , so why not leaving it this way ?

With a usual reset, if you want to have discs or squares before LIs, you would end up with something like this :

/* RESET */
ul {list-style:none;}

/* CUSTOM STYLES */
ul.disc {list-style-type:disc;}
ul.square {list-style-type:square;}

By leaving the default style, you could only write :

/* CUSTOM STYLES */
ul.no-list-style {list-style-type:none;}
ul.square {list-style-type:square;}

In fact, I would write this instead (inspired by the BEM naming convention) :

/* CUSTOM STYLES */
.list__style--none {list-style-type:none;}
.list__style--square {list-style-type:square;}

… not necessarily cute but really easy to read.

It also improves performances when you want to apply bullets to LIs (just a little bit tough ;), because it’s using the default style of the tag.

Normalizes HMTL5 elements … {or bug fixing}

Normalize.css doesn’t reset things but normalize it. For instance, the article tag, is , by default, a block level tag. IE8 and IE9 seems to ignore it, then normalize.css says :

article { display:block;}

It’s modular and well-explained

The code is grouped in paragraphs which make it really easy to remove what you don’t need. You don’t have tens of tags all grouped together, It keep things logic, make it modular. For example, if you don’t want to use the table tag in your code, you can just remove the “table” section from the CSS.

Regarding forms, Normalize brings a good starting points. It defines consistent border, margin, padding, font-size or line-height. No need to adress specific styles to browsers !

Really well documented and commented, Normalize.css is a great tool, which will prevent you from a lot of time debugging.

Compatibility

  • IE 8+
  • Firefox 4+
  • Safari 5+
  • Opera
  • Chrome

Official website

Official website : https://necolas.github.com/normalize.css/