RSS/AtomThere's a very interesting feature in IE's HTML processing engine: conditional comments. This feature allows you to specify portion of HTML that will be interpreted based on the browser version. The code itself looks very simple:
<!--[if CONDITION]> ...HTML code to interpret <![endif]-->
The CONDITION part represents an expression that lets you restrict the result of the test to a specific condition. For example, you can test for IE generically:
<!--[if IE]> This is Internet Explorer <![endif]-->
Or, you can restrict even more by limiting to version up to IE6:
<!--[if lt IE 7]> This is Internet Explorer 6 or earlier <![endif]-->
Got it? Easy, huh? Now let's put that in practice. Let's first draft some CSS to create a nice banner at the top of the screen:
#iewarn {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 25px;
padding-top: 5px;
font-family: tahoma, sans-serif;
background: #ffffcc;
font-size: 0.9em;
font-weight: normal;
color: #334433;
margin: 0 auto;
text-align: center;
border-bottom: 1px #aaa solid; }
Now, let's mix this with a conditional comment:
<!--[if lt IE 7]> <div id="iewarn">Hey, looks like you're still using an obsolete version of Internet Explorer!</div> <![endif]-->
And here's the result:
You can also add a link to explain to your visitors why they should change their browser. Personnaly, I direct them to the Save the Developers initiative, that explains clearly why IE6 sucks. Of course, if your audience is not tech-centric, you may choose a more comprehensive explanation, or write your own.
That's all, folks!
06.06.08 |
Programming |
6 |
del.icio.us •
Stumble •
Digg •
Furl
Comments
Excellent post - I'll definitely add this to my sites!
I already use conditional comments for calling in different stylesheets for IE and IE6, but hadn't thought of doing what you suggested.
Another way of doing it (based on the above) would be to simply ad your html and set the div to display:none by default, and to display normally in the conditional style sheets - which might clean up the html markup a little.
Thanks, John. There's actually another method for doing this, and that would rely on how IE (again) handles one-line comments in CSS files. For example, you could have the following:
.myclass {bla-bla-bla;
//display: none;
}
Everything following the '//' comment indicator would be ignored by FF, opera and other browsers, but interpreted by IE...
great, i love this,but is there any technique
after displaying the issue(top thing) it hide autometically
Good post, and a technique that is growing in popularity.
Marc - the problem with your approach is that of accessibility; that is, if you access the page with CSS turned off, then it will still read through it, whereas with conditional comments it will be completely ignored.
another option is to use javascript. A good solid example is www.pushuptheweb.com which is now available based on jquery, dojo and mootools. Other versions (for CMS's) are also available on the website.
Simon & Rodrigo, you're both right: there are other ways to make this work, I don't claim to have the perfect solution. But, the most important point is that people realize they must stop using IE6 and move to something more stable and secure. So the solution lies not only in the technique but also in the message.
Wanna say something?