tomdot – web design and inspiration
31Mar/100

In search of a flexible cross-browser reset stylesheet

I've spent the afternoon in a long-winded search for a cross browser css framework grid reset stylesheet. It turned out to be an epic search, worthy of many tales, but it seems like I'm finally getting somewhere.

When I started my journey I was looking into css grid frameworks as a way to simplify development. And I came across a few interesting ones: 960 grid system (which i've already been using in illustrator for design, but not used the css yet), fluid 960 grids, YUI grids, The 1kb CSS Grid, Blueprint and a few others.

Then I started reading the comments (never a good idea if you don't want to end up with second thoughts) and started wondering if fixed grids which (necessarily) use non-semantic mark-up were what I really needed. I read a few articles on both sides of the debate, and both seemed to have valid points. But as I read I realised that I didn't especially want an all-encompassing grid, though I can see a few situations where one would come in handy.

What I wanted was simply an advanced CSS reset. I've been using a basic CSS reset based on Eric Myer's well known reset - which resets all the browser styles to simple defaults.  But what I really wanted was one that would standardise the font size and line height across all most browsers. This would leave me free to do designs and layouts without worrying so much about what it'd look like in other browsers.

Some of these frameworks include resets and fonts components, that appeared to do what I wanted. But none seemed an exact fit. YUI fonts for example uses pixels, which limits font resizing in some browsers.

An interesting post by Matt Snider lead me to a "CSS Standard for Rendering" called Tripoli, which I hadn't previously encountered. It seems rather promising in it's goals though. I'm just a little worried about it requiring a "content" class to work. Alternatively Blueprint's Typography css seems to be flexible and also produce consistent results across all the browsers I tested. So right now it seems to be down to those two - a little testing and experimentation is clearly needed.

Update: Part 2 of this series is now online - and we have a winner!

Other useful resources: