Using a CSS Reset?

Published 30 Jan by SuperNOVA

Using a CSS Reset?Most of you are aware of the CSS Reset and would already be using it, but lets have a look at it in a bit of detail, shall we?

What is a CSS Reset?

I like to think of CSS as something which beautifies what we put on the web. Now, all the browser vendors have something called the user agent stylesheet which provides some basic styling to the elements that are rendered on the webpages. To give you a basic understanding of this the most common example will be the difference in colors of a visited and a fresh link. Now, every browser has a different implementation of this concept, but we want our coded webpages to look identical in all environments and browsers, that is where a reset CSS comes into play. So, a CSS Reset is just a set of defined CSS rules used to, well, reset the rules implemented by the user agent stylesheet.

Should I use a CSS Reset?

Yes, undoubtedly yes! On many instances I have seen people asking about browser compatibility on facebook or forums etc. No one would say that just by using a reset you will be able to make your site fully compatible on different browsers but you can surely minimize the cross-browser effects by using one! Not only does it add a point in favour of browser compatibility but it also adds logic to your code by providing a base to start from (not saying your code is ill-logical :P ).

Where can I find one?

The most famous/common defined sets of rules are: You should by all means experiment with the rules, if you are certain that some sets will not be used ever, you can even remove them(although this might be overlooked by some other developer who expands your project maybe a year from now on and what you are saving is just some bytes!). Now, some people add an extra CSS file and request it in the code before your main .css file. Although, it is perfectly valid but this just means you are adding an extra HTTP request for the browser to make, so, it might be better to copy the reset code in the begining of your main .css file.

What will a CSS Reset not Do?

  • Make your code cross-browser compatible: If you just found out your site is not fully cross-browser compatible and you then decide to add a reset code, don’t expect that it will magically turn your site into one on all browsers, it might still help you in the debugging process though!
  • Save space: Well that was quite obvious. Requesting more code means requesting more bytes and thus more page load, although if we just consider Eric Meyer’s reset, it is not even half a kb in size and sure it is not negligible as far as the usual CSS file sizes are concerned but it still might be smaller than most of the images you use(just guessing :P ).
  • Eliminate the need for browser testing: Cross-browser incompatibility doesn’t arise due to different user agent stylesheets but because of the difference in implementations of different CSS properties(and js code at times). So, even after using a reset you will still have to test your webpages in different browsers(at least the major ones).
If you didn’t use a reset CSS before and after reading this post you decide to try it at least once, then I would consider that this post has fulfilled its purpose.