|
30 January 2012
All browsers use a specific default stylesheet called a "User Agent". The user agent is used to make websites that have no css/style appear legible. There is a big drawback with this and that is that it can make your website look different on multiple browsers. Each user agent can can apply a certain margin, padding and border styles. This can create trouble for web designers/developers because obviously, they all want the website to look the same in all browsers, This is where a "CSS Reset" comes in. The goal of the reset stylesheet is to make sure that each browser has the same display defaults and will fix any differences in default margins, paddings, heading fonts and more.
Usually, the reset styling is placed in its own .css file. Usually named reset.css. You can make your own but there are some really great ones available on the Internet which I will share with you below.
Eric Meyer's Reset - Eric's reset is one of or if not, the most popular reset sheet. It is in my opinion, the best and the simplest reset aside from Universal Selector. You can get the latest version of Meyer’s reset sheet from his website, at http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited.
YUI's Reset - YUI's CSS resources apply direct rules to HTML elements. An alternate version of the resource is available that target elements by context only. This contextual -context.css version selects HTML elements only when they descend from the .yui3-cssreset classname. Get this reset at http://developer.yahoo.com/yui/base/
HTML5 Doctor Reset - This is very similar to Eric Meyer's reset file. Depriciated elements have been removed as well as explicit unstyling of the :focus pseudo-class which Erioc Meyer has also done. You can get it at http://html5doctor.com/html-5-reset-stylesheet/
Universal Selector Reset - At the most basic level, Universal Selector is just resetting the margin and padding of everything to 0 using the asterisk(*)
* {
margin: 0;
padding: 0;
}
It can be expanded to use other values of borders and outlines. One plus of the Universal Selector is that it is only 0.21 kilobytes. Other css reset files can be up to 20kb. It will also stop any new elements from adding arbitrary padding, etc. There are some drawbacks as well. For instance, you do not have control of which elements will be reset. Also, there is no more inheritance of CSS rules from parent to child elements which is probably the biggest negative.
Toucan CSS - In addition to removing HTML default styles, Toucan CSS reset also rebuilds the new generic rules for the typography, headings, paragraphs, lists, forms, tables etc. It is lightweight and also flexible. You can get it at http://borderleft.com/labs/
I would definitely suggest using one of these or creating your own. It will stop a lot of headaches from your development process.
Comments
RSS feed for comments to this post.