opinios

A Sandwich of Hacks, Ready for the Munching

I have been thinking about putting this together for a while. I expect it to receive a mixed reaction, but it has been useful for me so I am putting it out there for others to use, abuse, and hopefully improve on.

I hereby present the "Stylesheet Arrangement for New Designs Whilst Incorporating Css Hacks" package, or the SANDWICH for short. Yes I am quite pleased with myself on the name.

While not containing any new insights into developing with CSS, this package as a starting point might make those new to standards-based design feel a little less intimidated and convince them to make the jump. The package is just a collection of CSS files that are arranged into a sensible structure, with all of the CSS hacks already in place to load them, and complete with flower boxes to encourage verbose commenting (can you tell I cut my teeth at a multinational organization with strict methodologies in place?)

This work is largely based on an excellent article by Molly Holzschlag about managing hacks when trying to make your CSS work in every browser. I had been searching everywhere for something that pulled all of the CSS hacks available to designers into one area and explained them in English, and Molly's article does an excellent job of this.

Many notable designers out there have expounded the virtues of designing for the most standards-compliant browser out there, and then systematically working your way down the list to account for the anomalies.

This got me thinking, "Why not just start building your site with the assumption that you will in fact use all of the hacks available, use them if required, in an easy templated system that is already configured for you, then lop off those that you haven't used when you are finished?" (I think the term Tantek uses is Surgical Correction, but applied to the design process rather than to when one explicitly stops supporting a particular browser)

This approach allows you complete creative freedom in that there is no fluffing about looking up which hacks perform what on which browsers, how to use them or how to arrange them. They are all there, in place and waiting for you to use when required.

Obviously different designers have different naming conventions, preferences for how to arrange their site structure, and ideas on whether filters are needed before and after primary stylesheets. But basically everyone agrees that it is a good idea to store all of one's stylesheets in the same directory, and that naming a stylesheet specific to Internet Explorer 5.5 for Windows "ie55win.css" is also a good thing. Beyond this the files are yours for the manipulating.

There are some out there who may suggest that an approach that begins with all hacks in place is not a desirable one, because it encourages people to use hacks when there may be a way to implement the same thing without one; this is true, and it is up to the user to educate themself about hacks and when to use them. But if you do need to, it shouldn't be a learning process to implement. All this package does is make it easier, but you should read Molly's article before using it.

Not all of the hacks are valid CSS, and whether this is a big problem or not is a debate that has been and gone, but the fact remains that sometimes we need to use hacks. Might as well have an easy and structured way to do that.

Any feedback, especially suggestions for improvement or any submissions of hacks that validate that I can replace non-validating hacks with would be appreciated. Here is an example of the sandwich in action, with various images set as backgrounds for each browser that is filtered (handy when you are testing multiple browsers on the one machine). If you don't see an image in the background, you aren't using a browser that is specifically filtered.

Download the sandwich (zip file, 8 KB)

Update: I just discovered this table of CSS filters that would probably allow me to extend this, but I thought I would get the first version out there).