In my post titled WebVisions 2008 Conference Debriefing, I mentioned the concept of a CSS reset and provided links to two versions: the Eric Meyer CSS Reset and the Yahoo UI Library CSS Reset. Both address the issue of browser having their own internal stylesheets that don’t necessarily match.
For example: an h2 tag in one browser might have font-size: 16px; and margin-bottom: 12px; while another might have font-size: 18px; and margin-bottom: 14px;. That means that without any of your own CSS work, the same plain-Jane <h2>Some Subtitle</h2> code will look differently. These are the battles web developers have to face and why we hate IE for its non-standard renderings.
The purpose of the concept of a CSS reset is to put all browsers on an even playing field before you begin to style the content. That is, make sure that all elements render the same on all browsers (or rather, all major browsers) so that adding your own styling will have the same effect across the spectrum of renderings. That’s not to say that you won’t need to make special hacks to fix inconsistent renderings *cough-IE-cough*, but a CSS reset puts you a lot closer to the end goal than where you started.
I’ve only tried implementing and developing CSS with the Eric Meyer CSS reset and the Yahoo reset once each, so my experience here is somewhat limited, but these are my initial impressions. While both are essentially the same technique and could be adapted to behave more like the other, I’m going to address the out-of-the-box functionality.
Eric Meyer’s CSS Reset - Eric Meyer CSS Reset
This was my first attempt at using a CSS reset and you’re looking at the results in this current blog theme (as of the date of this post). Meyer’s method is to set all elements to be, essentially, unstyled. That is, all elements render as plain text. No bolding for <strong>, no italics for <em>, no margins for <p>, etc. The nice thing about this is that you get to style everything from the ground up. The bad thing about this is that you have to style everything from the ground up. I was excited at first, but I became increasingly frustrated with having to write quite a bit of CSS just to get elements to behave even remotely like they normally do. I understand the purpose in doing this, but it is a ton of work just to get the most basic HTML to display with standard behaviors. I eventually realized that a work-around for this would be to develop a “CSS starting point” where there are definitions for elements that just define the basic behavior.
Another downside to Meyer’s method is that he simply provides the code. This didn’t seem like a downside at all to me until I used Yahoo’s implementation, which I will explain shortly. In fact, it never even occurred to me that there could be a better way.
Don’t get me wrong. I have a tremendous amount of respect for Eric Meyer and he has done a great job putting together the code for the CSS reset. I only see the ways to improve on it after having used Yahoo’s CSS reset. *Segue*
Yahoo’s CSS Reset - Yahoo UI Library CSS Reset
First, let me admit my bypasses. I didn’t use, or even look at, the Yahoo CSS Reset before trying Eric Meyer’s because…well…I’m a Google-guy. If the link had been to the exact same content at Google, I would have not even looked at (okay, that’s an exaggeration) Meyer’s version. I drink the Google-flavored Kool-Aid with the left hand and the Apple-flavored Kool-Aid with the right. (There, Microsoft zealots. Are you happy? I’m an admitted zealot too, just on the other side.)
I was very impressed initially with the organization and presentation of the Yahoo page. The code was very readable and the instructions were clear and concise. They also provide a cheat sheet (PDF download), an SDK download, and several other tools and examples that I found very helpful and interesting.
Yahoo also provides a hosted file for the CSS reset so you can simply call the include from their server in the head of your HTML. This was a nice feature. One less file to maintain and serve.
Additionally, and this was the biggest selling-point for me, Yahoo provided the “CSS starting point” code that I was looking for to get the elements to their minimal display characteristics and, like the CSS reset, they also provided a hosted file for me to include. After adding two lines of meta code in the head of my HTML file, I had reset the CSS to zero and then styled it to a standard display. Perfect! Just what I was looking for and here it was in an easy to consume, highly supported codebase.
Coming Soon…
Google CSS Library - Google Blueprint CSS Framework
As I was writing about being a Google zealot and wishing that Google had a CSS reset, I decided to search for “google css reset” and, lo and behold, the very first link that Google returned (imagine that!) was for the Google Blueprint CSS Framework, which includes a CSS reset and starting point styling. I should have known that Google would swoop in and save the day. I’ll try the Google CSS reset for my next site and report my findings.
EDIT:
I recently tried validating some CSS that I added to a site after using the Yahoo CSS reset. I was sad to find out that it doesn’t validate. I think I read somewhere that the Eric Meyer CSS reset doesn’t validate either. I decided to punt on this one and just make sure that my personal CSS code that I built on top of the reset code will validate, but then, technically, my whole page doesn’t validate since I’m using the CSS reset. I guess that’s something I’ll have to wrestle with until a better solution comes along.