Because the great majority of web designers use browsers that are more Standards-compliant than Internet Explorer - for example, Firefox, Opera, and Safari—"bugs" tend to appear in some pages when the pages are viewed in Internet Explorer, rather than Firefox.
Conditional comments allow us to serve different stylesheets not only for Internet Explorer, but even targeted to individual version of Internet Explorer.
A conditional comment will be read as a traditional comment in browsers other than Internet Explorer, that is, its contents will be ignored. But Internet Explorer will recognize the syntax of the conditional comments and apply or display whatever is shown within the comment, should the condition apply to the version of Internet Explorer currently interpreting the webpage.
If you wish to supply a stylesheet or other content to the visitors of your wiki using Internet Explorer, simply nest it within the following conditional comment syntax:
<!--[if IE]> This will appear in Internet Explorer, but no other browsers. <![endif]-->
For example, if we want to promote the Opera Internet browser (http://www.opera.com) to JazzMeet's visitors using Internet Explorer, we could insert the following conditional comment in a suitable place in our MediaWiki skin template:
<!--[if IE]>
<div id="use-opera">
Welcome to <strong>JazzMeet</strong>! Have you considered using another browser such as <a href="http://www.opera.com" title="Opera browser">Opera</a>?
</div>
<![endif]-->
We can apply some styling to the #use-opera ID in JazzMeet's CSS to lessen its focus:
#use-opera {
background: #E6E4D8;
border-bottom: 2px #8C1425 solid;
color: #38230C;
font-size: 90%;
padding: 10px;
}
#use-opera a {
color: #8C1425;
}
Visitors to JazzMeet will now be met with a view similar to the following one for visitors who visit the wiki in Internet Explorer:
In a browser such as Firefox or Opera, we don't see the message:
We are able to focus on specific versions of Internet Explorer in the following three ways:
lt(less than): If the visitor is using a version of Internet Explorer less than the given value, a message is displayed to your wiki's visitors, for example<!--[lt IE 6]>This is version of IE is less than 6<![endif]-->.gte(greater than or equal to): If the visitor is using a version of Internet Explorer greater than or equal to the given value, a message is displayed to your wiki's visitors for example<!--[gte IE 7]>This version of IE is 7 or greater<![endif]-->Lastly, you can specify a particular version of Internet Explorer, for example
<!--[IE 5]>This version of IE is 5.<![endif]-->.
In Chapter 8, we added the ability for our users to add videos from video sharing websites, such as Google Video and YouTube, to the editable section of JazzMeet with the addition of the VideoFlash extension for MediaWiki.
We may want to inform visitors who are using versions of Internet Explorer of less than five to upgrade their browsers to be able to view these videos that we can view with the addition of a conditional comment:
<!--[lt IE 5]> <div id="upgrade-browser"> In order to view videos and other media in the <strong>JazzMeet</strong> website, we suggest you <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Upgrade your browser">upgrade your version of Internet Explorer</a>. </div> <![endif]-->
We can apply the same styling as our earlier conditional message:
#use-opera, #upgrade-browser { background: #E6E4D8; border-bottom: 2px #8C1425 solid; color: #38230C; font-size: 90%; padding: 10px; } #use-opera a, #upgrade-browser a { color: #8C1425; }
This presents the following message in versions 4 or less in Internet Explorer:
Another use for these conditional comments is to supply additional stylesheets to Internet Explorer in order to fix discrepancies in the design. Firstly, we will look at some of the major problems that affect each version of Internet Explorer, and then apply fixes for these to our new skin for the JazzMeet wiki.
By adding a conditional comment to the<head> section of our MediaWiki skin template, we can supply another stylesheet to make some changes to the design for a specific version of Internet Explorer. The following example shows how to link to a stylesheet targeting only Internet Explorer 5:
<head> <!-- other head elements --> <!--[IE 5]> <style type="text/css" title="IE5-fixes" media="screen"> <!--@import "skins/jazzmeet/ie5fixes.css";--> </style> <![endif]--> </head>
Some older versions of Internet Explorer may still be popular among some of your wiki's visitors, and it may be worth making sure your design is compatible with these.