Dealing with IE5/Mac
Oh the times I’ve spent changing the way I layout pages, and even designs, solely to make up for IE5/Mac. I can’t count the number of times I think I have a layout nailed, even with the most basic styles, and I test it in IE5/Mac and it breaks. And for no good reason. Even this very site (CMYK design) had a rendering problem that is no fault of CSS, just poor browser programming.
I’ll admit that in its hayday, IE5/Mac was king: the best CSS support, fast loading, and it looked pretty good (for the times). But in these days of more advanced browsers, and more specialized CSS, it just doesn’t cut it. So what does this mean? It means that for this site (CMYK style only), I am only providing basic color and font information to IE5/Mac. That’s it.
The errors caused by this browser were not because of my poor CSS authoring, nor bad XHTML structure, nor even multiple browser-specific hacks clashing. It’s just a rendering problem with the browser. So instead of letting IE5/Mac users get hurt by their own browser, I’ll just provide them with a (nearly) unstyled version, fully usable and functional, just not as pretty as the others. I’m not the first to make this decision, either.
On a side note, I’ve often wondered why people on newer Macs even use IE5, when a perfectly good Safari is right there. I could be wrong on this, but is the IE5 icon even on the toolbar in the original configuration? Perhaps that’s a different article. Anyway…
So to make this article useful, I thought I’d provide a few methods for easily hiding/including styles from/for IE5/Mac.
Method 1
To hide just a few styles in your CSS, you can use the following:
/* Hide from IE5/Mac */ Styles NOT for IE5mac go here /* Stop Hiding */
This works well, but is not the easiest thing to remember. It’s also not very good for lots of styles too, since you cannot comment your code inside the hack.
Method 2
For larger groups of styles, you can take advantage of IE5/Macs lack of support for @media like this:
// Styles for all browsers here @media screen { Styles NOT for IE5/Mac go here }
If you run into issues with IE5/Mac that must be fixed, but you just can’t seem to use the same styles as other browsers (because of rendering problems or CSS bugs), and your feeling ambitious enough, you could create an entirely different stylesheet for IE5/Mac and apply it like this:
@import("ie5macstyles.css"); / Hide from IE5/Mac / @import url("stylesforallbutie5mac.css"); / Stop Hiding /
*IE5/Mac is the only browser to understand the @import method when it’s written with no spaces and sans-url. Details can be found here.
To save a little face, let me say that I’m not about to stop styling IE5/Mac just because it’s buggy. If I stopped styling for buggy browsers, I wouldn’t be styling at all. Each browser has it’s quirks, but there are some instances I’ve run into that IE5/Mac just will not handle. It’s in these cases that I prefer sending a more scaled-back style than a broken one.