Internet Explorer 5 Mac: oddities

Linking styles and hiding styles

Linking

A question that often comes back on mailing lists. Internet Explorer 5 Mac does not support the following syntax when linking a style sheet: note the single quotation mark in both examples. This means, IE5 Mac will not see the stylesheet, or display the image in the following example.

<style type="text/css" media="screen">
	@import url('path/to/style.css');
<style>

This equally applies when linking background images in a stylesheet, or for list-style-image:

selector {
	background: #ccc url('path/to/image/mygif.gif')
	}

Similarly, IE5 Mac does not understand the @media rules within a stylesheet. Sample and code–example:

@media all {
  	selector {property : value}
  	}

All this can be used to load styles that IE5 doesn't need to see.

Showing: ie5macbandpass filter and Tan hack.

The tan hack is a css filter that targets all Microsoft browsers (IE5.x and IE6 for windows, but also IE5.x Mac). By additionally using the child selector (>) one can limit its scope to IE5.x Mac. sample.

/* only IE mac will see this */
*>html selector {property : value}

Unfortunately, it has been discovered that IE 5 Windows (and not more recent versions) also read this workaround. Alternative methods include:

* html>body selector {property : value}
*>html selector {p\roperty : value}

And finally, courtesy of Tantek Çelik, we have the “ie5macbandpass filter” allowing authors to link to a stylesheet that only IE mac will see.

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

A full explanation and some background story are available thanks to Douglas Bowman.

Hiding

One more way to hide styles fron IE mac is the “backslash in a comment hack”. By escaping the end-of-comment marker, IE believes the comment has not been closed. It is important to note that in the following hack, both comments must surround the selector. Sample. This hack was discoverd by Sam Foster. It works like this: the first rule is read by all browsers, incliuding IE5 Mac. The second rule, surrounded by the comments is for all browsers, except IE Mac. That way, different values can be served to IE mac and other browsers.

selector {property : value}
/* hide from IE mac \*/
selector {property : value}
/* end hiding from IE5 mac */

@media

There seemingly is a method to allow IE Mac to read an @media rule (according to this site). Adding a rule containing the Tantek Hack as the very first rule would allow IE Mac to read the subsequent rules. The first rule acts as a filter and should not containing anything important. See sample, using an @media rule set to ’screen, projection’. IE mac display the page as other UA do. But it does not fully work as expected. The next sample uses an @media ruleset set to print. Other UA's ignore the rule when displaying the document on screen. Not so IE Mac. What is actually happening: adding the Tantek Hack to the @media rule prematurely closes the @media rule in IE mac, allowing it to see the other declarations in the @media ruleset (code sample below). But this leaves IE mac with an empty closing ’}’. As a consequence, it ignores a rule that follows the @media ruleset; see sample4.

@media all {
  	.beNicetoIeMac {
  		font-family: "\"}\"";
		font-family: inherit;
		}
  	selector {property : value}
  	}

Although it doesn't really enable @media on IE Mac, this little hack can still be usefull if you use @media as a filter to hide styles from older browsers, and allow IE mac to see those rules as well. [Update] The author of aforementioned article has added a more detailed explanation of his use of this filter.

Empty style sheets take forever to load

As publicized on the css-discuss mailing list, when an empty (blank) style sheet is linked, IE mac takes a very long time to load the page — sample. The workaround: put at least one rule in the style sheet, or even just insert a comment — sample, I just added a comment to the stylesheet.

section – contents

Also around here
[ Empty spaces ]
a weblog

This collection of documents and test cases related to Internet Explorer 5 for Mac is no longer maintained and is only kept online for historical reasons.

Comments and suggestions: are not needed anymore. Thanks to all who provided info and tips in the past.

File last updated: September 09, 2009.

back to top

permanent location: http://www.l-c-n.com/IE5tests/hiding/index.shtml.