IF Internet Explorer THEN Do Something Else
Posted on Monday, August 14th, 2006
I have been working on my first job this week, hence my lack of posting recently. It has been quite an experience finally designing a site for someone else, but this is not really the issue on my mind.
The Box Model Hack Strikes
The design of the site that I was creating this week prompted me to think about support for CSS within IE and the highly documented ways to work around it. I was using the CSS from the method for sticking a footer to the bottom of a page from A List Apart and noted the use of Tantek Çelik’s box model hack. As I progressed with the design, I came to rest on a fixed width layout and deployed the box model hack again. By the time I came around to the third use of the hack I had almost forgotten what the first two were for and had to read the code carefully to work out what I was trying to achieve.
“This can’t be right, this is my first project and I’m already confused,” I thought. This reminded me of an article I had read over at Vitamin. Dave Shea denounced the use of CSS hacks in his article Stop Hacking, Or Be Stopped encouraging the use of Microsoft’s proprietary conditional comments. IE7 is coming, hacks will stop working and old and new versions of Internet Explorer’s mistakes will surface when users make the switch to IE7 he said, and I agree, but my perspective on this matter is from another step back.
Clear Code, Clear Mind
Why are CSS designers using code that looks like this:
div.content {
width:400px;
voice-family: “\”}\”";
voice-family:inherit;
width:300px;
}
followed by the cutely named, “Be nice to Opera 5″ hack:
html>body .content {
width:300px;
}
This is hardly elegant, it is confusing and bloats the code. Plus, if you design a site using hacks of this variety without commenting it heavily and someone else comes along to take over the site, they won’t know where to begin. In this example we are targetting the broken box model of IE5.X, so why not use the following snippet in your HTML:
<!--[If IE 5]>
<style>
div.content { width:400px; }
</style>
<![endif]-->
leaving only the line:
div.content { width:300px; }
in your CSS for all other standards compliant browsers to see? You could even put the IE specific code in another stylesheet that only IE users would download, rather than taking up space in your HTML. I’m sure no-one minds giving IE users a little more to download.
So conditional comments target the exact IE version that we need to fix, or any range of them, they won’t be disappearing, like some of the well used hacks, and they even decrease the size of your css file (at least to those who have made the jump to a standards compliant browser). Finally, they are easy to understand and won’t confuse anyone in the future who may take over development of the site or design in question.
Other Uses
Recently an article on IE7s non compliance with standards caught my eye. The author was so taken aback by the lack of compliance with the W3C’s recommended standards that it prompted them to ban IE users from their site NewsCloud. The resulting uproar caused them to open the site to IE users, but display a message to IE users urging them to download Mozilla’s Firefox instead. A great idea, but the implementation was through PHP. It seems to me that formulating PHP to do the job was slightly wasted when conditional comments are built especially by Microsoft for this purpose (alright, they weren’t made to encourage users to download other browsers, but what an excellent use it is)! All you need is:
<!--[If IE]>
Message to IE users
<![endif]-->
Final Thoughts
I don’t know why Microsoft decided to implement conditional comments, but they have their uses in clearing up after the IE programming teams mistakes. According to this study of standards support in different browsers, IE 6 only supports 51% of the CSS 2.1 standard and IE 7 a mere 4% more. However Firefox doesn’t cover it all and none of the browsers are anywhere near support for CSS 3. I would like to urge the W3C and other browser teams to seriously consider adding conditional comments to their projects so that the need to hack CSS is diminished and the power to develop cross browser sites is given back to the designer.
If you enjoyed this post, why not subscribe to Unintentionally Blank
Pingback by Image Replacement - Getting Closer? :: Unintentionally Blank
August 31st, 2006 at 6:56 pm
Pingback by IF Internet Explorer THEN Do Something Else (A How To…) :: Unintentionally Blank
September 19th, 2006 at 1:26 pm
Pingback by Internet Explorer 7 Released :: Unintentionally Blank
October 19th, 2006 at 10:09 pm
1April 7th, 2008 at 1:52 pm
rzrarti Says:i hate microsoft and ie. Firefox Rulez the World! :)
2April 23rd, 2008 at 10:20 pm
Joshua Issac Says:@rzrarti: Firefox does not rule the world; it does not even rule the web. Internet Explorer has the largest market share. If it wasn’t for Internet Explorer haters, I would have actually switched to Firefox months ago. Now, I have no intention of switching. :)
3April 24th, 2008 at 9:26 am
Phil Says:@Joshua: Firefox does not rule the web yet. Internet Explorer may have the largest market share of users but that’s because for a good long while it was the only browser worth using, plus it comes as standard with Windows and many people consider IE to be “The Internet”.
Don’t take out your annoyance with IE haters by not trying something that could be better for you. Give Firefox or Opera or Safari a try and see whether IE is as good as you think it is.
4May 13th, 2008 at 3:25 pm
Mike Schinkel Says:Your example is broken. You have and it should be
That cost me about 1/2 hour before I decided to look elsewhere and found the right syntax here:
http://www.positioniseverythin.....-plus.html
5May 13th, 2008 at 3:27 pm
Mike Schinkel Says:Oops. Your comment system ate my comment.
Let’s try again.
You have <[endif]–> and it should be <![endif]–>
6May 13th, 2008 at 5:43 pm
Phil Says:Mike,
I’m terribly sorry for wasting your time! I did have it right in my “how to” version of this article http://www.unintentionallyblan.....-a-how-to/ but I wrote this first and I really should have got it right!
Thanks for pointing it out!
7May 13th, 2008 at 5:49 pm
Mike Schinkel Says:Now I feel bad, I wasn’t venting so much as just making an aside but not that I read it I can see how it looks like that. Anyway, nice article and glad you fixed it to help the next person!
8May 13th, 2008 at 6:36 pm
Phil Says:Hey Mike, no worries, I needed to be told. Thanks for pointing it out rather than just heading off to use other sources.
9May 13th, 2008 at 6:43 pm
Mike Schinkel Says:heh! I wanted to help the next guy!
10June 10th, 2008 at 3:10 pm
Cosmin Says:What about an ELSE ????
It IE do something, ELSE do something, why don`t you post an ELSE about this ????
11June 12th, 2008 at 7:49 am
Phil Says:Cosmin,
There isn’t a specific else statement for IE conditional comments, but there is a way of targeting browsers that aren’t IE, like this:
<!--[if !IE]>-->code for non-IE browsers
<!--<![endif]-->
12February 22nd, 2009 at 6:55 pm
Jeremy Says:I would suggest using server-side code (ASP,PHP) then detect the browser and export the browser specific style code.
Server-side scripts allow for clean manipulation and exportation of clean html while still using relatively powerful code that bots don’t even notice.
My objection to IE is that animated, visual asects of my pages tend to run very slow or even freeze the browser up.
While the same elements will run just fin in Firefox and Chrome.
13August 11th, 2009 at 2:41 pm
Ruana Says:IE and FF - both browsers have their use. As a webdesigner I have installed all major (A-grade) browsers on my system - except IE8 and Netscape - for testing purposes mainly. But aside from the development of sites I still use IE extensively. Why? Because FF slows me down a lot when surfing with more than 5-6 tabs open. Of course, I use all the developers add-ons and extensions that come with FF 3.0. Which almost certainly is the reason for the sometimes annoyingly slow surfing (3,6 GB CPU and almost 2 GB RAM!). IE-haters, let me tell you this: never forget where we would be without Microsoft. The browser can be a major handicap for webdesigners - true - but I wouldn’t want to miss surfing with it.
14August 11th, 2009 at 5:21 pm
Mike Schinkel Says:@Ruana - I’m with you 100% on your comments about IE & FF!
15August 22nd, 2009 at 3:14 pm
Phil Says:Ruana,
I do agree that Firefox is fairly bloated these days (particularly with all the plugins, especially development ones), but if you are on Windows then why not use Chrome, Safari or Opera as your second browser? I use a Mac these days, but when I’m on my Windows laptop the speed and relative simplicity of Chrome draws me to use it. If I am working with a mouse, I perhaps go for Opera, it’s just as speedy and has mouse gestures (which I love!) built in.
If I never had to use IE again, I’d be a happy man!