IE5/Mac Band Pass Filter

Example: This text in this paragraph is green in all browsers, except IE5/Mac. In IE5/Mac, this text should be red and italicized.

What it looks like

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

How it works

The normal function of the IE5/Mac Backslash Hack is to get IE5/Mac to ignore any CSS rules contained within the hack’s boundaries. The hack works by escaping an end-comment marker using a backslash before the asterisk: \*/. This hides the end-comment marker for IE5/Mac, and tricks IE5/Mac into thinking anything which follows is still part of the comment. Once another unescaped end-comment marker appears, IE5/Mac resumes application of the remaining CSS rules. All other browsers understand the escaped end-comment as the actual end of the comment, and apply the following rules as if nothing ever stopped them from doing so.

Tantek inverted the function of the Backslash Hack by inserting more comment syntax after the hack, effectively tricking IE5/Mac into resuming normal application of any following rules, yet cloaking the following text as another comment for all other browsers which don’t get fooled by the backslash hack.

Huh? Still sounds like voodoo, right?

Let’s break it down so the syntax isn’t the voodoo it appears to be. To do this, we'll take two passes through the filter. The first as IE5/Mac sees it. The second as any other browser.

As IE5/Mac

  1. /* Opens the first comment
  2. \ Backslash Hack
  3. *// Commented text (ignored)
  4. */ Closes first comment
  5. @import… Applied as normal
  6. /**/ Open and close of second comment

As all browsers other than IE5/Mac

  1. /* Opens the first comment
  2. \ Commented text (ignored)
  3. */ Closes the first comment
  4. /* Opens the second comment
  5. / @import… /* Commented text (ignored)
  6. */ Closes second comment

Key to Understanding

The important bit to understand with this technique is the portion (the last three characters of the first line — /*/) that acts as a double agent. It toggles the comment on or off, depending on whether the parser is inside a comment or not. The third line is a stateless comment closer, ensuring all comments are closed before continuing.

The advantage of importing a separate style sheet is in the isolation of CSS hacks, and the ability to more easily eliminate them should you ever desire to drop support for that browser. Keeping hacks in a separate style sheet also keeps any primary style sheets cleaner and easier to read. Molly Holzschlag covers the isolation of hacks in separate files in an article for informIT titled Strategies for Long-Term CSS Hack Management.

Alternative Uses

This filter could, if desired, be used as the inverse of the original Backslash hack — to selectively serve an entire set of rules only to IE5/Mac inline with all other CSS rules, rather than importing a separate style sheet.

Background

This filter takes advantage of the IE5/Mac Backslash Hack to selectively serve a custom style sheet intended only for IE5/Mac. It was created 5 June 2004 (on Douglas Bowman’s request) by Tantek Çelik in less than 5 minutes, armed with the knowledge that escaping the CSS end-comment marker would trick IE5/Mac (and only IE5/Mac) into thinking the comment text continued.

Aside from his ground-breaking work on Tasman, the rendering engine behind IE/Mac, Tantek is also known for the Box Model Hack, which allows CSS authors to overcome the incorrect box model implementation of IE5.x/Win. More recently, Tantek devised the Mid Pass Filter, and the related IE5.0/Win and IE5.5/Win Band Pass Filters which enable separate CSS files to be served only to respective IE/Win browsers. The preexistance of the Mid Pass Filter for IE5/Win is what prompted the request for something similar for IE5/Mac.

For more of the context and back story for this filter, read the related log entry: Filtering CSS (6 July 2004).