Full Page Zoom Is For Sissies
Date : 2008 01 20 Category : Tech & Development
AjaxianRyan Tomayko has a post titled Full Page Zoom Is For Sissies that delves into the fun of trying to build a website using purely em and relative sizing:
About a year ago, I spent the better part of a day making this site's layout entirely em based and set on a vertical baseline grid... No, I mean, everything is em based: font-sizes, borders, margins, padding, widths, everything. Each individual value in the stylesheet that specifies a vertical measurement was manually calculated based on the relative value of an em on the specific element.
This has two notable effects:
Your site can be scaled to any font-size on the client while retaining exact proportions in every way and while staying on the vertical grid. (Go ahead. Try it if you don't believe me. Just hammer on Command+- a few times.)
Your CSS becomes completely unmaintainable.
Ryan then claims that the effort isn't needed, as full page zoom has been in some browsers for awhile, and is coming to others soon too.
Of course, you can use tools like the Tripoli CSS baseline reset:
Tripoli is the result of years of coding real-world CSS projects. When dealing with multiple projects, you find yourself repeating CSS rules again and again. Tripoli adds the CSS base you need to skip the typographic basics and get on with design customization while relying on a solid, cross-browser backend.
Dealing with CSS layouts can be a pain. Most of the frustration comes from inheritance and margin issues. To make things easier, Tripoli resets all browser defaults for layout and then re-builds them again for content typography.
Tripoli consists of two main documents; one reset and one generic. The reset file resets all browser styles to prepare your document for the layout process without disturbing CSS rules. The generic file does two things: first it sets some general typographic rules like text decoration and font variants. Then it adds more specific rules inside a content class. The content class contains all margins, paddings, lists, tables, link colors etc. So whenever you have content in your document - simply add the class name content and you're done.
In addition to the two main files, Tripoli also includes a print css for readable printing and an Internet Explorer specific file to correct IE's rendering issues.