Internet Explorer Conditional Comments and JavaScript

As we prepare for the launch of the new Lime Thinking website, I have been looking at the front end. One issue we have found is getting some of the JavaScript enhancements working in the older versions of Internet Explorer. Whilst we are using jQuery which deals with most of these browser variations very effectively we have still run into issues with CSS bugs in Internet Explorer. I decided to just leave these enhancements out for Internet Explorer versions 6 and 7.

So how to do this? The arguments against browser sniffing are well known and I am not going to rehash them here, whilst jQuery provides some support for browser detection they recommend not using it. The alternative is using feature detection, which of course makes a lot more sense when it is specifically support of particular JavaScript function that is the issue. In this case it is CSS bugs that is the issue so this is less relevant. Whilst this undermines some of the arguments against old school browser detection I decided on a different solution.

Since we are already using conditional comments to include IE specific style sheets, why not also use the conditional comments to set a JavaScript variable? So we replaced the following:

<!--[if IE 8]>
    <link rel="stylesheet" href="/v9/styles/ie8.css" type="text/css"/>
<![endif]-->
<!--[if IE 7]>
    <link rel="stylesheet" href="/v9/styles/ie7.css" type="text/css"/>
<![endif]-->
<!--[if lt IE 7]>
    <link rel="stylesheet" href="/v9/styles/ie6.css" type="text/css"/>
<![endif]-->

With this:

<script type="text/javascript">var isOldIE = false;</script>
<!--[if IE 8]>
    <link rel="stylesheet" href="/v9/styles/ie8.css" type="text/css"/>
<![endif]-->
<!--[if IE 7]>
    <script type="text/javascript">isOldIE = true;</script>
    <link rel="stylesheet" href="/v9/styles/ie7.css" type="text/css"/>
<![endif]-->
<!--[if lt IE 7]>
    <script type="text/javascript">isOldIE = true;</script>
    <link rel="stylesheet" href="/v9/styles/ie6.css" type="text/css"/>
<![endif]-->

The variable is initialised first to false before being set to the required value in the conditional comments. Using the targeting of different versions of IE via conditional comments allows us have good control over which features are turned on and off for different versions.

Now in the JavaScript we can check the variable to avoid setting an enhancement for an old version of IE with a guard clause:

    setFade : function (selector, args)
    {
    	if(isIE === true)
    	{
    		return;
    	}
        //do something
    }

Different versions of IE can be targeted using different combinations of conditional comments allowing good control over which version have different enhancements applied.

Menu