Essential CSS Hacks

Share |

When performing cross-browser page layout with CSS, you have two choices: go with the lowest common denominator, or use CSS hacks to include work-arounds for ornery browsers. The hacks definitely give the best result, but who can remember them all?

When it all boils down, two browsers are responsible for the vast majority of CSS layout incompatibilities: Internet Explorer 5.x for Windows, and Internet Explorer 5.x for Macintosh. With the most recent CSS hacks out there, you can write remedial style sheets for both these browsers and get away with just two CSS hacks!

First of all, you need the Mid Pass Filter for Internet Explorer 5.x for Windows:

<style type="text/css">
@media tty {
 i{content:"\";/*" "*/}} @import 'ie5.css';
/*";}
}/* */
</style>

Then, you need the IE5/Mac Band Pass Filter for Internet Explorer 5.x for Macintosh:

<style type="text/css">
/*\*//*/
  @import "ie5mac.css";
/**/
</style>

By taking advantage of various bugs in the CSS processing of these browsers, the above blocks of code ensure that the rules in ie5.css will only affect Internet Explorer 5.x for Windows, and the rules in ie5mac.css will only affect Internet Explorer 5.x for Macintosh.

By using these two style sheets to work around the browser-specific bugs, you can keep the nice, standards-compliant CSS code destined for other browsers in your main style sheet.

If you can only remember two CSS hacks, these are the ones to choose.

SitePoint Tech Times