Filtering CSS

To the point: This entry introduces a new CSS filter that can be used to import a separate style sheet for IE5/Mac, named the IE5/Mac Band Pass Filter.

Back Story

Ideally, I try to avoid the use of hacks in CSS files, if at all possible. Sadly, the continued discrepancies in the way browsers interpret CSS specifications (and then implement them) still require the use of more hacks than I’d like to see in my style sheets. I would prefer not to use any hacks or filters, but sometimes, they’re a necessary evil. Fortunately, hacks, workarounds, and filters can be used with discretion to ensure as much cross-browser design consistency as possible.

If you read Molly Holzschlag’s piece for informIT a couple weeks ago, titled Strategies for Long-Term CSS Hack Management, you got a good summary of “filtration systems” and why they’re used. In short, we’re all striving toward a hackless ideal, and we benefit when all hacks for specific browsers are kept confined to one portion of the style sheet, or completely separated in their own style sheet. Should we decide to drop support for that browser, it’s a simple matter of removing the filter and deleting the isolated rules or files.

In Molly’s article, she mentions the Mid Pass Filter. In my opinion, Tantek’s MPF is one of the most under-rated, under-utilized CSS filters we have available to use. Without it, we must dirty our primary style sheets with ugly-looking Box Model Hacks, or one of its variations. The MPF allows the removal of all Box Model Hacks and variants from the primary style sheet, and places any rules and properties intended for IE5.x/Win in a separate style sheet.

We used the Mid Pass Filter in the recent Blogger redesign without a hitch. The MPF enables a much cleaner primary style sheet, free of BMHs and redundant “be nice to Opera 5” rules. However, the MPF is only applicable to IE5.x for Windows.

Filtering for IE5/Mac

Here’s the reason for this post…

Even though we can proclaim the greatness of Internet Explorer 5 for Macintosh when it was first released… unfortunately, the CSS2 bugs that persist in IE5/Mac means we’re often left using the Backslash Hack more and more frequently, especially when using lots of floats for layout, or for containment of other floats.

Knowing the advantages of the Mid Pass Filter with respect to serving separate CSS to IE for Windows, I asked Tantek if he knew of (or could devise) anything that could do the same for IE for the Mac?

He said, “Of course. Just use what you know about the Backslash Hack to create a similar filter.”

Um. Yeah, right. “How exactly would I do that?” I responded.

A couple minutes later, he spit this back to me:

/*\*//*/
  @import "ie5mac.css";
/**/

I stared at it for a few minutes, my mind having no idea why or how something like this worked. I tried it, tested it in every browser I had available to me. Sure enough, this filter could be used to serve CSS rules only to IE5/Mac, and no other browser. In fact, it could be used (as shown above) to import a style sheet intended only for IE5/Mac. I ended up using it — alongside the existing IE/Win MPF — for the redesign of Stopdesign. Several readers have already seen this odd CSS formation in Stopdesign’s master CSS file, and asked what the heck it was.

I don’t have a degree in Computer Science, and I’m neither a programmer nor a hacker. The odd syntax didn’t look as foreign as the Box Model Hack’s voice-family gibberish, but I still couldn’t make heads or tails of each slash and asterisk. It wasn’t until I walked through it step by step that I actually understood how and why it worked. So I’ve taken the first dibs Tantek offered me since I was already using the filter on Stopdesign. I’ve written up the whole thing, complete with syntax diagrams, explanations, and some of this back-story, repeated. Overkill? Maybe. But anyone who wants to can now understand it after reading…

the IE5/Mac Band Pass Filter

Want to keep your style sheet clean and serve a separate CSS file only to IE5/Mac? Or want to do the inverse of the Backslash Hack and send some rules (inline with your other rules) to IE5/Mac only? Look no further than this.

Eulogy to IE5/Mac

The credit for inventing this filter goes entirely to Tantek Çelik. I’m just the one who had to figure out how it worked. Then I documented it so we could all understand how it worked. I don’t know if it’s irony, or simply time-appropriate that I’m posting this on what is was Tantek’s last day at Microsoft.

With Safari’s and Firefox’s rise in popularity with Mac users, Microsoft’s ceasing of further development of IE/Mac, Tantek leaving Microsoft, and now, the IE5/Mac Band Pass Filter to work around and (honestly) to start marginalizing hacks meant for IE5/Mac — we’re really putting this browser to rest.

But let’s not forget what a great browser IE5/Mac was when Microsoft first unleashed it to the Mac masses. IE5/Mac fundamentally changed the way I browsed the Web, developed for the Web, and how I thought about and used CSS. And I know it did the same for many Mac users. It introduced many “firsts” in the browser space, which other browsers eventually ended up copying. Before using your browser to move on to other topics… if you haven’t yet, go read Tantek’s letter to fellow Microsoft employees where he very effectively recaps the achievements of the IE/Mac team. His summary helps us all better understand just how much we owe the current browser features that we take for granted to the innovation of Microsoft’s IE/Mac team, and their gift to us that was Internet Explorer 5 for Macintosh.