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 end-users to a website can sometimes still be using frighteningly old web browsers. Frequently this can result in lots of breakage and unhappy website users.

Trying to find a compromise between using the latest web technologies and still supporting old web browsers 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 often hesitant to update or switch to a different web browser which might be more secure and faster.

The free Conditionals stack can help you hide problematic stacks or content. In their place, you can display alternative content or choose not to supplement missing stacks or content with anything else. Alternatively you can redirect older detected versions of Internet Explorer to other pages.

Conditionals works on the basis of getting the user agent string from Internet Explorer. With this information we can then redirect matching versions of Internet Explorer to other locations. Alternatively content or stacks nested within Conditionals can either be shown or hidden from view. Although Microsoft dropped support for conditional comments in IE10 and later, they remain the most effective way of dealing with older versions of Internet Explorer.

Conditionals 2.0 (released in August 2015) merges-in much of the functionality from the OldBrowsr stack (now obsolete), previously developed by StackManiac. This latest version has a more simplified setup process and extends support to cover a wider choice of Internet Explorer versions.

To use Conditionals, simply choose the version(s) of Internet Explorer to target from the Criteria drop-down menu, in the stack settings. From the Do This menu, choose an action. 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. Conditionals is also compatible with the Partials feature, introduced in Stacks 3.

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

@import((Code Snippets))

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 and onwards

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 about the same rendering standard as other web browsers, like Safari, Firefox, Chrome and Opera, in most areas. So in theory, there would probably not be any requirement to use conditional comments beyond IE9.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.