Normalize.css  :

  • Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
  • It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

Reset CSS :

  • A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
  • In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible.
[ad type=”banner”]

The difference between Normalize.CSS & Reset.CSS :

Normalize.css preserves useful defaults rather than “unstyling” everything.

  • For example, elements like sup or sub “just work” after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text  after including reset .css
  • So, normalize.css does not impose a visual starting point (homogeny) upon you.
  • This may not be to everyone’s taste.
  • The best thing to do is experiment with both and see which gels with your preferences.

Normalize.css corrects some common bugs that are out of scope for reset.css.

  • It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS.

Normalize.css doesn’t clutter your dev tools.

  • A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools.
  • This is not such an issue with normalize.css because of the targeted stylings.

Normalize.css is more modular.

  • The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you  know they will never be needed by your website.

Normalize.css has better documentation.

  • The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki.
  • This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests.
  • The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.
[ad type=”banner”]

CSS resets :

  • Aim to remove all built-in browser styling.
  • Standard elements like H1-6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all.
  • You’re then supposed to add all decoration yourself.

Normalize CSS aims to make built-in browser styling consistent across browsers.

  • Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers.
  • You’re then supposed to add only the difference in decoration your design needs.

If you are a designer:

  • Follows common conventions for typography cetera, and
  • Normalize.css works for your target audience, then using Normalize.CSS instead of a CSS reset will make your own CSS smaller and faster to write.
  • Normalizer is mainly a set of styles, based on what it’s author thought would look good, and make it look consistent across browsers.
  • Reset basically strips styling from elements so you have more control over the styling of everything.
[ad type=”banner”]

Categorized in:

CSS

Tagged in:

, , , , , , , , , , , , , , , ,