Picture this…

Its 1:45 am. You have the shakes from too much coffee, but you are smiling because you have just finishing putting the final touches on your tableless, buzz-word compliant magnum opus. Just before you crash you decide to see how it looks in the new Safari for Windows you just downloaded. Suddenly, your masterpiece looks like some other kinda piece and you begin to weep.

We have all been there, and I am pretty sure that I have invented a few new four letter words over the years because of it. CSS is great, but it can be a bear to get working across the various browsers.

Enter the concept of CSS standards and framework libraries…

These are basically CSS files designed to make the browsers treat CSS elements the same way. Today I am gonna take a look at a couple of them (Blueprint and Tripoli) and give you peek into what is possible with each.

Tripoli
What is Tripoli? Ahem…

Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

Now what does this mean? Lets look at some pictures…

Here is a shot of a completely unstyled page using Opera 9, Firefox 2, and Safari 3

Notice how the “abbr” tag is completely ignored by Safari, and the differences the “samp” tag looks between all three. Now I am sure that there aren’t a lot of us using the samp tag nowadays, but it shows the point pretty clearly.

Now take a look at a page after it utilized Tripoli.

Its a pretty striking difference really. Everything looks just about the same regardless of the browser.

So how does Tripoli do it? It starts from scratch and rebuilds.

The real benefit of Tripoli comes from the fact that it resets everything, and I mean everything, so that each browser starts on the same page rather than its own interpretation. From there it rebuilds the typical styles so that they continue to serve their individual purpose. This means that “h1″ is still bigger than “h6″; it just will be the same size regardless of the browser. So no more margins that don’t line up, or lists that behave one way in IE and another in FF.

In addition to resetting everything, Tripoli also disables all HTML 4 tags that have been deprecated so they won’t cause any grief (no one is using the font tag anyways right?).

Overall I think Tripoli is a great idea. Its not going to revolutionize anything, but it probably will lower the stress level a bit when working between browsers. What’s also nice is that Tripoli doesn’t add bloat, it doesn’t dictate anything about your design, and it clears up a lot of the annoying issues between the browsers.

Blueprint
So we know what Tripoli is…what is Blueprint?

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

While Tripoli is designed to simply standardize everything, Blueprint takes it a step further and adds on a framework that allows you to build grids and layouts easily. With blueprint you can build something like this with a lot less effort than it would take to build it from scratch. Furthermore, once you are done building it, you know it will be cross-browser compliant because Blueprint resets the CSS styles as well.

The only issue I see is that things get complicated really, really quickly. For example, “column span-3 prepend-1″ is the name of one of Blueprint’s CSS element classes. Huh? This gives you an idea as to why the CSS on that example page weighs in at a hefty 20k (as opposed to Tripoli’s 4k).

If you are in need of a purely CSS typographically heavy design (say a newspaper layout), then this might be just the thing, but for most sites this is just too much.

Conclusion
Browsers are big pain in the neck, and I, for one, pray for the day when they all decide to play nicely with each other. Until then, CSS standard libraries are really handy to have around because they act like a referee that makes sure everyone is playing by the rules.

Take a look at these guys and tell me what you think. Personally, I am looking forward to taking Tripoli for a spin on my next project, and heck…if I am laying out a report or the like (and clients do love reports), then I just may give Blueprint a try as well.