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…
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.
Posted in CSS
55 comments (Comments closed)
Wow, this is just wonderful. Thank you Doug (and Tantek)!
Fantastic! Between this and the mid-pass filter, cross-browser CSS just got a whole lot easier.
I think everyone in webland has the definitive way of filtering for browsers finaly, so you just can develop what you want and then adjust browser by browser without the fear of breaking something.
I just miss an Opera 7 filter, since that one has a particularly nasty bug when you float something in an absolute positioned box, but I’m afraid Opera 7 is too well behaved to be delured by filters.
Thank you for writing it down and thanks to Tantek to figure it out (again).
I’m so happy I could spit.
This is really a wonderful tool to have available. This was also an introduction to the mid pass filter for me. I’m sold - this is a much better way to handle misbehaving browsers.
My to do list just got a little longer.
-David Benton
p.s. I read regularly via rss, and I’ll take this opportunity to say that I greatly enjoy the design and content at stopdesign. Thanks.
Nice Doug, super useful. I’m pretty sick of those backslash hacks littering my stylesheets!
As Martin says, now only for Opera 7 and that ‘bug’. For now I’m using content negotiation…
This is excellent stuff - I often find IE5 Mac more problematic than IE6, especially a lot of my clients are still on OS 9!
Thank you Doug! I’ve been working on a template-based system similar to the scope of the blogger redesign and this just made my life a whole lot easier!
I love this! At my first glance, I thought it was incredibly difficult, but now I get it. Tantek really is a magician.
This is good stuff - now, if only someone would buy me a powerbook so I could test my sites…
Why whinge about the cost of a Powerbook when you can get an eMac for $800? I know a Powerbook is a beautiful beautiful thing, but really — if all you need is a Mac to test on, an eMac will do just fine. You might even ditch the PC altogether :)
Really great work, Doug!
I definitely enjoyed reading your blog post, and couldn’t wait adopting that hack to my website. Although you’re neither a programmer nor a hacker, you did an awesome job, sharing your thoughts with us. Thank you.
regards > christian
ps: Does anyone know more of Opera hacks? Like, how to avoid that top-margin thing?
One word … Brilliant!
Thanks for sharing.
Tops Doug. I was looking for a solution like this only last week. Your timing is impeccable. I was using the uncommented version of this hack (just the malformed
@importwith nourl()) on the recoded Silverpoint.net home page but it was causing IE PC to ignore all background properties on the body tag (and oddly only the body tag). I opted for defining an alternate style for IE Mac and then hiding the true style redefinition with the/*\*/hack.This new IE Mac Band Pass Filter will work nicely, thank you for sharing.
Nice article.
I thought I would add that this can also be done with the following code:
@import("iemac_css");
Make sure that there is NO whitespace between “import” and the “(“. It seems IE 5 Mac has a bug that allows the import when no other browser will. It’s strange, but I’ve been using it on my site for quite a while without a hitch.
I’m with Paul—this is undoubtedly a useful hack, but how are those of us who don’t have several hundred dollars just laying around supposed to figure out if our site even has problems in Mac browsers? And then there are the older versions of IE, which need a separate computer with an older version of Windows, which makes them virtually useless for anything else.
I have a vague recollection of a website that would generate pictures of what your site looked like in other browsers, but I can’t find it, assuming it even exists. Does this ring a bell with anyone?
You’re thinking of Browsercam.
I blogged an alternative CSS sniffing method using PHP which you might find useful: Server Side CSS Sniffing - coping with troublesome browsers.
Thanks Tantek for creating it!
Thanks Doug for explaining it! And thanks for asking Tantek to make it! I appreciate the detailed explanation and will surely make use of this in all my projects to clean up my CSS Files along with the Mid Pass Filter.
Ah, finally! Thanks you two, this absolutely rocks. If I only knew about this a month ago. Now, with a site already launched yesterday, I’ll have to do some more extensive IE5/Mac testing and explore the possibility of ‘fixing’ it.
As with others, lacking the resources is the main problem. Sometimes things like Browsercam and iCapture just don’t cut it.
SM Korzdorfer (#14):
I thought I would add that this can also be done with the following code:
@import("iemac_css");To SM and everyone else: Keep in mind that while the above may work (discovered by accidentally omitting the “
url” portion of the@importstatement), it is invalid CSS, which can have negative side effects.The Band Pass Filter is completely valid CSS, and relies on a known parsing bug exclusive to IE5/Mac (which Tantek admits to himself) on which the Backslash Hack is based.
Thus our (Tantek’s and my) recommendation for using the BPF to selectively target IE5/Mac over the missing-url method. After all, with the BPF, all that’s happening is the juggling of two sets of comment markers.
Plus, with the BPF, you’re not limited to the use of the
@importstatement. You can put anything you’d like inside the filter’s boundaries — a single rule, or lots of rules. Just be aware that any comments inserted inside the filter’s boundaries will close off the filter before you intend to do so.And David (#15):
… but how are those of us who don’t have several hundred dollars just laying around supposed to figure out if our site even has problems in Mac browsers?
You’re heard loud and clear on the frustration of not having a Mac to test on when you already own a Windows machine. This is not the only reason, but one of the small reasons, I switched back to the Mac last year. I can have all the Mac browsers I need, plus I can run Virtual PC to run all the Windows browsers I need — all on one machine.
However, on this:
And then there are the older versions of IE, which need a separate computer with an older version of Windows…
You may have missed all the hubbub that was flying around a few months ago when it was discovered that you can run multiple versions of IE on the same box, without needing multiple computers or bootable partitions:
See: Multiple IE’s in Windows
Getting an eMac is a good idea - £550 in the UK right now, and could probably get one cheaper with some academic discount shenangigans.
But…Powerbooks! They’re so shiny and strokable…
Okay, I may be the world’s WORST web designer for saying this… but why are we wasting our time with CSS hacks for an obsolete browser that’s been abandoned by its manufacturer?
I’ll qualify that statement by saying that every web designer needs to know their audience, and if IE5/Mac is still a significant population for the site you’re building, by all means work in some hacks.
But here are the latest browser/platform statistics. Do the math:
* Out of every 1000 users, 81 are still using IE5.
* Let’s be generous and assume that IE5 users are 10 times more likely to be Mac users than Winders users. That would mean 25% of the IE5 users are specifically IE5/Mac users. (2.5% Mac usage overall times 10)
* That gives us a total IE5/Mac user base of roughly 20 out of every 1000 users, or a whopping 2% and dropping every day.
Remember, we were being generous with the Mac percentage of the user base. Do those numbers justify the amount of time (i.e. client money) spent on these CSS hacks?
[/putz]
I agree about IE5. While it’s a shame that the CSS world has passed it by, and now tends to be the more problematic browser for standards-conscious designers and webmasters, when it came out it was king of the hill. For years it was, bar none, the best web browser on any platform. It was the best not just for the jaw-droppingly good CSS1 support, but also for many innovative features. A couple of years ago, when it still looked like there was hope for an IE6 for Mac, I dreamed of the incredible browser that might emerge. It did emerge, only it was called “Safari”
A really pleasent solution, cheers. Nice to see Çelik on the move.
Quoting Ed:
“Okay, I may be the world’s WORST web designer for saying this… but why are we wasting our time with CSS hacks for an obsolete browser that’s been abandoned by its manufacturer?”
As far as I’m concerned, because neither we, nor the browser, have abandoned the users yet. It might seem useless statisticly (and time consuming) but still you do somebody a good turn.
If that is true, that is a much nicer solution, SM. Props to Doug and Tantek though, as well.
Ed (#23):
Do those numbers justify the amount of time (i.e. client money) spent on these CSS hacks?
Thanks for your comment. You’re not “the world’s WORST web designer” for stating the above, but I will counter your points.
The “time” it takes to implement this filter is the amount of time it takes to copy and paste what I’ve made available, and then any time it takes to write any rules in the new style sheet. It’s negligible.
If you’re talking about the invention of this filter, Tantek produced it in less than five minutes, and I did all of the documentation over the holiday weekend, so there’s no “cost” to any client. It’s free for anyone to use, and takes virtually no time to implement. In fact, it saves time in the future, by eliminating the need to search through a primary style sheet for all the hacks that one would have to insert throughout without use of a filter like this.
While the numbers of IE5/Mac may be dwindling, there are still many Mac people using it, as it was the default browser on any Mac until Safari came along. And numbers will always vary by site, so browser stats from W3Schools may vary widely compared with a site geared toward the Mac audience.
If you can get a layout working correctly in all browsers (even some of the fringe browsers) with five extra minutes of work, is it not worth it? Maybe a client shouldn’t be paying a designer/developer who isn’t willing to spend the extra little effort it takes to get their site to display correctly in as many browsers as possible?
Doug (#21):
You may have missed all the hubbub that was flying around a few months ago when it was discovered that you can run multiple versions of IE on the same box, without needing multiple computers or bootable partitions…
I followed directions on what I found out about running this setup and found it was pretty easy. So, I put the resulting compilations into a zip file and kept it for reference. If anyone wants to just unzip from files rather than figure it out on their own, they’re welcome to it.
iesamemachine.zip
I’ve been using it for months on WinXP machines without any troubles, but I assume it’ll work in 9x/ME/NT/2k as well.
Ahh… now all that’s left is an IE6 Win Band Pass filter ^_^.
~Grauw
FYI, Opera 4.0 and 5.0 for windows (at least on XP) suffers from the same comment parsing error as ie5x for Mac. Thus, you still need to use the @import hack where there is no “url” or white space between @import and “(“, to make sure its also hidden from those two browsers.
—To clarify I mean use the two hacks in conjunction (the @import hack and the ie5x for Mac filter).
example:
/*\*//*/
@import(“ie5mac.css”);
/**/
Thanks Doug. I’m actually using the Mac and IE5.X win filters on a project in development right now. I got the inspiration from your current redesign.
Cheers
Well, that was gentler than I thought it would be.
Truly, I’m not suggesting we code for 2-3 browsers and call it a day. I was just wondering if IE5/Mac was still worth the effort. Apparently it is to many people, including many on here who I respect a great deal.
I try to avoid CSS hacks at all costs, which is what prompted my question. Seems like a lot of overhead to me, especially since one of the primary advantages to standards-compliant design was breaking free of presentational hacks in the mark-up. In a way, we’ve just moved the hacks to the style sheet.
Oh well, sorry to ramble.
There should be someone giving out medals for this sort of work. Maybe a Nobel even.
Heh, I played with the same idea some months ago. The only problem is: Opera 3-5 recognizes the string »/*/« as a complete comment. So you have to hide the following code with an escape »\«.
My old demo
I would guess that most Opera are very conscious of ne versions and upgrade as they come out. Personally, I don’t worry about Opera versions older than 6. For that matter I don’t worry to much about 6 either.
In a way, we’ve just moved the hacks to the style sheet.
That’s true, but it’s a significant improvement on the olden days. We used to have hacks littered thoughout every page on the site. A nightmare to maintain if things change.
Now those hacks are concentrated in ONE place. If you decide, say, to pull support for IE5/Mac, you have one file to edit instead of all of them.
Why would you want to seperate and have extra css files?
I find I only have to hack 1% of the time for mac
majority of the time its for the difference in rendering padding and widths between ie and gecko/mozilla browsers that I am using the standards backslash hack.
Benjamin—
If the site being designed doesn’t use too many hacks, it’s not that big of a deal. But in the case of a website I’m currently working on, it came in handy. The reason being ie5mac for whatever reason didn’t like the em measurements (which is what I used for all my measurements in this new site), so I had to convert all my measurements to PX, once I did that it loaded perfect in ie5mac. Thus, to keep the liquid nature of the site for all other browsers I had to serve two different style sheets using the hide from ie5mac hack and this new one.
Thank you both for sharing this information with us. I can’t emphasize enough how much your explanation helped me. I have programming experience, yet it didn’t make sense to me @ 1st.
I’ll try to make use of it, but without a Mac to test it on, I’ll probably end up giving IE 5 Mac users no styles @ all. But then again, no Mac users are coming to my web sites right now. :^/
I wish it was easier to know what to do.
I’m often amused when I hear people asking why they should bother developing for IE5/Mac when it’s clear to them that the number of visitors to their site using IE5/Mac is such a small and insignificant number. I want to say to that person “Do you think the reason that there are few IE5/Mac users visiting your site may be due to the fact that when they view your site with their browser it looks like crap?” I’m inclined to think that perhaps if your site worked and functioned appropriately for a wide range of browsers you may see more visitors from across the board. I believe this is much of the same reason that people are embracing Accessible web site development. If you don’t build an accessible web site you won’t get a lot of people with disabilities visiting your site. Using that big zero from your statistics as a reason not to develop more inclusively is a sad one.
I thank and welcome this new solution with open arms.
Thanks teh master, a valid point.
Eugene, building for mac is just as important though the market is smaller than pc (a lot smaller) still just as important
you could introduce the mac back slash hack if you need to.
* html #divnav{
proper\ty /**/: value;
}
remember though the backslash only works with letters after G
Interestingly, you may also use this great new hack as an if/else statement:
/*\*/
@import “allbutie5mac.css”;
/*/
@import “ie5macbandpass.css”;
/**/
Somebody requested an IE 6 band pass filter. Try conditional comments. As long as they are downlevel-hidden all other browsers will see them as regular comments—which are perfectly valid.
I handle the contents of my
<head>tags with an include so this addition is easy enough to make.For IE PC 6:
<!--[if IE 6]>
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(index_css/iepc6.css);
/* ]]> */
</style>
<![endif]-->
For IE PC 5.x:
<!--[if IE 5]>
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(index_css/iepc5.css);
/* ]]> */
</style>
<![endif]-->
Or just for IE PC regardless of version:
<!--[if IE]>
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(index_css/iepc.css);
/* ]]> */
</style>
<![endif]-->
Perfect timing Douglas — I was just about to start fixing some IE 5 / Mac issues in a site I’m building, and this method is far easier, faster, and cleaner than what I originally planned.
“Do you think the reason that there are few IE5/Mac users visiting your site may be due to the fact that when they view your site with their browser it looks like crap?”
In a word… no. :}
Comment 43 is an important insight. Since there is no need to keep the two sets of slashes together you can make a ‘hide from mac’ block followed by a ‘show to mac’ block. Another function of this would be to combine it with * html to put all the IE hacks in one place:
/*\*/
* html {iewin rules;}
/*/
* html {iemac rules;}
/**/
I’ve used this trick once when I found out about the comment hack. Totally forgot about it. Better make a mental note, so I don’t forget it again.
This couldn’t just come more timely for us. It was precisely today that one of our workmates came to my desk foaming at the mouth (okay, that was only a slight exaggeration), whining about how come his precious all-CSS layout worked wonders in Safari and Firefox and was torn to shambles on IE/Mac. I didn’t know what to tell him at the time, knowing about all the millions of compatibility issues. Needless to say, I emailed him this pass filter tutorial later. This should be the answer to his woes… and mine as well.
I still hate hacks though. However I applaud every attempt to make this neccesary evil less sucky.
Ok, I understand the reason for this filter. I haven’t had too much problem with IE/Mac so I haven’t had to look for workarounds.
That being said, when you send someone to the alternate css, what should be on that stylesheet (meaning where can I find what issues IE/Mac or Win has)?
Ok, I don’t really understand this. I believe I’m getting it wrong…I’ve been trying this but my site (my navigation, that is) won’t work on IE5/Mac anyways…I’m doing something wrong I guess….but what?
I have to admit that I’m fairly new to this…
I have a question.
Why all this talk about creating some weird syntax to filter out IE, when conditional comments have worked since IE5?
Granted you couldn’t distiguish between IEWin or IEMac but I think conditional comments is something that is very underused and very powerful.
Now with Tantek’s newest hack, you can add a conditional comment to include IE specific hacks and then in the IE style sheet, include IE/Mac specific hacks. You can even go so far as to seperate these hacks into seperate files as so.
<style>
regular styles here
<!—[if IE 6];>
@import url(ie.css);
<![endif]—>
</style>
in your ie.css file then you can then use comment 34’s method of determinining whether ie/win or ie/mac is used…
/*\*/
@import “iewin.cssâ€;
/*/
@import “iemac.cssâ€;
/**/
I’m not sure if this will work in a seperate style sheet, but if it does, it could be a good way to keep all your hacks seperate for specific browsers, so when those become obsolete, all you need to do is delete the reference to the css, not go edit each line where a hack exists.
Any thoughts/comments about this?
I discovered the same as post 43 the other day. The difference is that I have:
/*\*/
@import “/portfolio/style/screen_all.css”;
/*/
@import “/portfolio/style/screen_ie5mac.css”;
/**/
in a server side include in the top of all my documents. Is it better to have it in the stylesheet instead?
Not sure if there is still activity on this, but if somebody reads this, I’m hoping you can help.
For some reason the BPF does not seem to be working for me on IE5/Mac. I’m not sure if I’m doing it properly, but for some reason it won’t pick up the styles I add to the Mac stylesheet.
Here’s how I’m doing it:
/*\*//*/
@import "ie5mac.css";
/**/
And a sample style I have to test whether it’s working is:
body{
background-color: red;
}
I’m sure it’s something obvious that I’m missing, but I can’t seem to find the problem.
Any help would be appreciated!
Thanks!
Frank: It looks like you have everything right. Nothing obviously wrong stands out if you’ve reproduced your code here exactly as you have it.
So I’m going to take a guess, and say that it *might* have something to do with your cache settings? IE/Mac caches style sheets pretty fiercely, and doesn’t let go. So you could be making all kinds of changes, but IE/Mac won’t show any of them until it grabs the new style sheet.
Either load each style sheet directly (by typing in its URL and hitting reload).
Or go into preferences, and under Web Browser, select Advanced, then make sure that Cache is set to update pages “Always”.
Your IE5/Mac audience may not have their cache set up like this, but if you’re developing and testing pages, it’s necessary for you to do this so you can see the changes without manually reloading each of your style sheets each time.
If it’s not a cache problem, I’m not sure what it could be.
Comments no longer open for this entry.