<<Back to Article

Use CSS to Hack Around Browser Incompatibilities


Tell me if I’m wrong: Some visitors to your website haven’t updated their web browser since the nineties, and you’re stuck writing code to identify the archaic browser and getting your site looking good for them. All this effort despite the hundreds, nay thousands, of bug fixes and browser standards upgrades since they downloaded the archaic malarky using an analog connection and a tin-foil hat.

Well, you can take them as they come, mothballs and all, or ignore them until they download the latest version of their browser using some nifty CSS code.

Webdevout.com’s CSS Hacks offers a cheat sheet that identifies some common browser incompatibilities and delivers code snippets to help you work around them.

Many hacks work around conditional comments, a feature that allows browsers to see and render code only if it meets certain criteria. Using conditional commenting allows you to import style sheets based on the version of the browser.

For example, the file ie_6_and_below.css will only load for Internet Explorer versions 6 and below if you put the following code in the head of your HTML:
<!–[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]–>

Cheap plug: If you’re wondering what browsers support what, Webmonkey has updated some browser charts in the reference section.

If all else fails you can incorporate JavaScript libraries that usually consider browser incompatibilities. Among the most popular available are Dojo and Yahoo UI Library.

Post Comment Comments Permalink Print
Reddit Digg