website design techniques » August 2004: “Cross-Browser Coding? The Hack With That!”

• PAGE:
• 1
• |
• 2

Cross-Browser Coding? The Hack With That!

by John Barrick

 

I feel your cross-browser coding pain. CSS hacks can be frustrating to learn. The promise however, is great: one set of pages, maybe one style sheet per theme if you’re lucky. That’s the name of the game. Learn a few hacks and never look back.

 

I've read arguments for and against using CSS hacks. You need to make up your own mind. I’m here to tell you I use them all the time and they save my bacon time and time again.

 

I have had to learn so many hacks that I can barely tell you the names... box model, Tantek, Holly, by golly. There's a varitable cornucopia of hacks that you can use now. I think I used them all and then some, mixing and matching like socks after the Sunday wash. What I learned is as far as I am concerned, in the business of making websites as skillfully and quickly as I can, I only really need 2 or 3 hacks routinely, with maybe another 1 or 2 in my back pocket for those rare issues.

 

A Great Cake Starts With The Right Ingredients

 

Before we actually get to the cross-browser code hacking we should cover a few of the basics real quick just to make sure we’re on the same wavelength. Actually I hope we’re not on the same wavelength because that means my wireless network has been compromised...

 

You will save yourself mucho time-o and many headache-o’s if you begin your coding with a good browser. Use whatever tool you want to write the code — some are definitely better than others, but the thing is the one I think is better you probably won’t, and the tool you swear by just pisses me off. Just use what you want. I will tell you that I have found it helpful over the years to be as clean as you can with your code. That’s partly anal retentiveness but also it really does help when you make changes. I grow less and less fond of sloppy code.

 

Anyway, preview your code in a good browser. Folks have their druthers but my code recipe kinda goes like this:

 

• add code gently while previewing in FireFox(FireFox is the most reliable-est, fastest, mostest standard-adhering-est browser I've used. Starting code in this browser means it will work in many browsers with less work down the road.)
• sprinkle < !-- Quirk on -- > at the top of each page to taste(this throws IE into QUIRKS MODE which basically means IE6 renders like IE5. We do this so we don't have to hack for different flavours of IE)
• beat and hack the CSS to work in IE6 until smooth(we will cover these hacks shortly)
• pour contents into 6x9 pan, pop into the oven, and be sure to check it with a toothpick in Mac IE 5.2.3(if you code for schools or artists don't skip this step — your cake could get burnt!)

 

The above recipe often yields enough yummy (acceptable from my viewpoint) servings for the following browsers. Of course, mileage varies:

 

• PC IE 6.0
• PC IE 5.5
• PC IE 5.0
• PC N 7.1
• PC FireFox .8 →
• PC AOL 7.0 →
• Mac Safari 1.2 →
• Mac FireFox .8 →
• Mac N 7.1
• Mac OSX AOL →

 

• PAGE:
• 1
• |
• 2