Web developers have a very tough job. Clients often demand the latest in web trends and technologies to put their websites at the forefront of the competition. However customers can sometimes still be using frighteningly old web browsers which choke when encountering modern websites. Trying to find a compromise between the two is near impossible. It's the older versions of Internet Explorer which are most troublesome, and breakages can be a frequent occurrence. The fundamental problem is that Internet Explorer is built into the heart of Windows, so individuals are either hesitant or resent updating to something better, newer, more secure or faster. Also a number of users are forced into using outdated software by their IT managers, some of whom who suggest that if you can't access Facebook or YouTube in IE6, that has got to be a good thing! Regardless, things can be a real mess...

Conditionals is not a 'magic wand' solution to fix older web browsers like IE6 and IE7. What it instead enables you to do is to write a custom ruleset and either display or hide content if a detected version of Internet Explorer meets your criteria. If for example you know that a particular Stack does not work with IE7, you can put it inside a Conditionals stack and set the Conditionals stack to hide if IE7 or less is detected. Likewise you can use the Conditionals stack to display a message and warn users that part of a page is not supported in their web browser. So conditionals can be made to work both ways.
 

Setup

1. Once installed, drag and drop a Conditionals stack into your page.
2. In the Conditionals Ruleset (pictured right) select a matching criterial and Internet Explorer version from the first two select menu's.
3. From the 'Do This' menu, opt to hide or show content placed inside the Conditionals stack. This is the content you place in the 'Drop stacks here' placeholder.
4. In the final menu, choose what other web browsers that do not match your ruleset should do with content inside the Conditionals stack

Hovering over each of the Conditions settings will give you an informational tooltip about what each does.

You can safely use multiple Conditionals stacks on the same page. The Conditionals stack works by reading the user-agent information a web browser visiting your page presents, and imposes the ruleset you devise. It works most of the time, but if a user has hacked their user agent settings and modified them to something else, it can give false results.
 

Source Code

You can create your own conditional comment rulesets outside of Stacks by using the following HTML and CSS code snippets. Start by entering this HTML code into your page:

<div class="myContent">
</div>

Then in the page, add the following code (this works best in an HTML or styled text content area):

<!--[if IE 6]>
<style type="text/css">
.myContent {
	display: none;
}
</style>
<![endif]-->

In this example, the container called 'myContent' will display in all modern web browsers, but if IE6 is detected, the container will get hidden from view. You could also reverse the ruleset by setting the 'myContent' container to hide in modern browser with this code:

.myContent {
	display: none;
}

Then use a conditional comment to display the content if IE6 is detected:

<!--[if IE 6]>
<style type="text/css">
.myContent {
	display: block;
}
</style>
<![endif]-->

You can find more examples of conditional comments on this page, to target specific versions of Internet Explorer: http://www.quirksmode.org/css/condcom.html

This code can be saved as code snippets in RapidWeaver, for use in non-stack pages. To do this, highlight the code in your web browser and then right-click on it. Select Copy from the popup menu, to save it to your clipboard. In RapidWeaver, open the snippets window by clicking View > Show Snippets from the RapidWeaver menu. In the snippets window, click the '+' button, in the bottom left. Type a name for the new snippet and paste the code into the box shown. From this point onwards, you will be able to easily retrieve code snippets in RapidWeaver and reuse them in different pages. You can customise the code to suit your requirements.

Using the conditionals stack to redirect to an alternative URL

Although not widly encouraged, in extreme sitations it is possible to make the Conditionals stack redirect older versions of IE to another page or website entirely. Several people have asked me how this can be done. The simple answer is that you need to drag and drop an HTML stack into Conditionals. In the HTML stack, simply type this code:

<meta http-equiv="refresh" content="0;url=http://www.example.com/" />

Change the URL (in this example http://www.example.com/) to the URL you wish to redirect users to. Then use the normal Conditional stack settings to configure what version of Internet Explorer needs to follow the rule.

A note about Internet Explorer 10

IE10 is currently available as a public preview and is expected to ship as part of Windows 8 later in the year. It's worth pointing out that IE10 will no longer support the use of conditional comments. However from the tests I've done, IE10 is now up to the same rendering standard as other web browsers, like Safari, Firefox, Chrome and Opera, in most areas. So in theory, there would probbaly not be any requirement to use conditional comments beyond IE9.