Face it, we’ve all been there. You’ve just finished coding a beautiful site, and as you hold your breath and open it in Internet Explorer (or for that matter, any browser but the one you developed in), it turns to a slimy mess on the floor. You spend the next 3-4 days cleaning up the mess that’s been created, only to find that the design is now broke in your original browser. If you stumbled on this blog post, odds are you’re experiencing this problem right now, and you’re about ready to pull your hair out. Fret not, as this problem can be easily solved.
The CSS Reset
…The CSS what now? That’s right folks, the CSS reset. A CSS reset is nothing more than a file that does just that: resets. In order to understand this concept, we must first understand the core of this problem.
Default Browser Styling
Every web browser has a default specification for styling different HTML elements for display. For example, every browser will display a <h1> tag larger than a <h4> tag. When we add rules to stylesheets, we override whatever the default values may be for the element we styled. For example, the default color of all text in most browsers is black. When we add a “color:;” declaration into our stylesheet, we override this default, and the browser displays our styles instead. The concept of default browser styling is joyous, until you realize that default browser styling is anything but “standard”. The default styles of Google Chrome are different than those of Mozilla Firefox, and those are different from what you’ll find in Safari. For some layouts, this can be utilized and is not detrimental. Once you start trying to recreate an Illustrator wireframe with pixel perfection, however, you soon realize that these default styles can cause issues with spacing, margins, line heights, font rendering, and many other design aspects. You may soon come to find out that your top-right navbar in Chrome becomes your middle-right navbar in Firefox. The solution to these problems, you ask? The CSS reset.
OK, Seriously…What’s a CSS Reset?
A CSS reset is nothing more than a basic CSS file that “resets” all default browser styling by overriding the default values. When writing CSS, the different attributes you write are given “priorities” dependent on their specificity to the item they reference. There is a default “priority list” for determining which styles are of the highest specificity. In this priority list, default browser styles land all the way at the bottom of the totem pole. This means that any CSS styles we apply will automatically override the browser defaults. Using this knowledge, we can create an externalized CSS reset file to override the default styling values implemented by the browser. By specifying all tags used in the document in a comma separated list, we can simultaneously target every element in the site and apply “0” and “none” values to every important attribute (such as margins, borders, and paddings). Rather than reinventing the wheel and creating your own reset, however, I recommend downloading one of the hundreds of already available, thoroughly tested resets.
Where Can I Get One?
There are many different organizations that have compiled their own CSS resets and published them for the use of the web community. Each reset of course has it’s differences, and some are better than others for specific purposes. Through my experience, I’ve used multiple different resets, and without a shadow of a doubt, my hands-down favorite is Eric Meyer’s CSS Reset. It’s fully comprehensive and does a great job at unifying styles across all browsers, but at the same time it’s pretty optimized and lightweight (for a reset).
If you prefer to do your own trial and error, a great place to start would be CSSreset.com, which lists the top 5 CSS resets of 2012 right on their home page (gotta love compilation).
Remember, no matter what CSS reset you choose to do the job, all that matters is that you’re using one. Designing without a reset can prove to be quite time consuming when you start getting into more in-depth designs, and any good designer should avoid it at all costs.
No Comments Yet.
Be the first to leave a comment on this article!