Internet Explorer (IE) Conditional Comments

It's rather common that the same CSS styles are rendered differently among different browsers. Many times there is a difference between the way Netscape/Mozilla/Firefox browsers interpret CSS code and the way IE does. Opera seems to fall on either side depending on the property. Another problem that often arises is that different Javascript code must be written for different browsers.

Now with Javascript, unlike CSS, it's easy to check the type of browser and execute different code accordingly as I've explained before. However, it's sometimes more desirable to include different Javascript files depending on the browser especially when there is code that is specific to only IE. One viable solution for this is using the IE conditional comments.

Using IE conditional comments, one can include Javascript, CSS, and HTML that is only parsed if the user browser is IE or if it's not IE. If it is IE, you check even further and include the code if browser is a specific version of IE.

There are two types of conditional comments. One is called "downlevel-hidden," which is only parsed by IE because it uses special IE syntax. The second is called "downlevel-revealed," which is ignored by IE and parsed by everything else because it's not a standard HTML comment.

The downlevel-hidden syntax is as follows:

<!--[if IE]> Javascript/CSS/HTML <![endif]-->

As you can see the downlevel-hidden syntax uses standard "<!-- ... -->" HTML comment syntax.

Now the downlevel-revealed syntax is:

<![if !IE]> Javascript/CSS/HTML <![endif]>

Here we don't have the two dashes "--" after the "!" and before the ">".

The difference between downlevel-hidden and downlevel-revealed is that downlevel-hidden is parsed by IE when the condition is true and is never parsed by other browsers. Downlevel-revealed is always parsed by other browsers and is parsed by IE only when the condition is satisfied. So in both cases IE selectively executes but in downlevel-hidden other browsers never see the code and in downlevel-revealed they always parse it.

Here are some examples of what can be done with conditional comments from MSDN

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->

Some of the CSS differences I've noticed is that the opacity property has no effect in IE but it works in Firefox and Opera. When word-wrap property with value of "break-word" is applied to hyperlinks (anchors) in Firefox, it does nothing but it works on IE and Opera.

Don't Abuse Anchors -- Use CSS

Many web developers use anchors "<a...>" to suround texts and images simply to change the cursor. This usually involves setting the href property to "#" and possibly using the onclick event to execute some JavaScript code and then adding "return false;" at the end so that the page doesn't jump to top every time a user clicks the link.

This might have been the right way to do things at some point. However, after introducing the CSS element "cursor," there is no reason to use all that mess. Simply set the cursor property of the HTML element in question to "pointer" and add the onclick event code to the element itself if needed.

So for example:

.button {
cursor: pointer;
}

This makes code look so much cleaner and it would prevent the URL in the browser from changing to something with an "#" at the end. Moreover, it would also prevent the status of the window shown usually at the bottom of the browser from changing when hovering over the element.

Javascript Naming for CSS Float Property

Typically, you can access a CSS property of an element in Javascript using something similar to:

elem.style.propertyName = "value";

Where the propertyName is the property name in CSS with no dashes and written in camel format. For example text-align becomes textAlign. However, for the CSS float property this is a problem because float a keyword in Javascript. Therefore instead you have to use cssFloat.

Modifying CSS Styles with JavaScript

I recently came a cross problem at a client where I needed the page content to change upon a button click before the page is posted back. For example, imagine you have a page used to upload files. You want the page to display something like "Your file is being uploaded" right when the user clicks the upload button. Then the page is posted back while the desired message is displayed. The solution I came up with utilized JavaScript to modify the Cascading Style Sheets, CSS, of the page and then post.
The solution was as simple as adding multiple wrapping div's around the content. This could actually be done with only two div's but for my page I need three. The div that had to be shown when the page is first requested had a default CSS Display property value of "block." The div that was to be shown after the user clicks a button had Display value of "hidden." In the code that executed following the button click as shown below, one div is being hidden, one is modified to be shown, and lastly the page is posted. The JavaScript code I had was similar to the following:


function btnClick()
{
document.getElementById("initialDiv").style["display"] = "hidden";
document.getElementById("secondDiv").style["display"] = "block";
document.form1.submit();
}