Neat Redesign

It is not unknown that web designers need to create an Internet Explorer only layout in addition to a web standards compliant one. Is there an easy and efficient way to create an IE-only layout without confusing or turning away those who use other browsers?

Surely, such a way exists and it is called “conditional elements”.

The nature of the solution is this: Microsoft created a tag that only Internet Explorer can read - it is enclosed between the comment tags. While other browsers will safely ignore it, Internet Explorer will continue plugging away at whatever is hidden between the IE conditional elements.

While this may be not so useful to include complete block structures there, it is very useful to include a special Internet Explorer only stylesheet there.

Using an IE conditional element has a number of benefits:
- only Internet Explorer can see it (no hacks for other browsers to neglect it is necessary)
- web standards compliant browsers won’t read and then discard the IE-only fix
- other browsers users will not waste their time and resources on loading the IE-only bug, because the browsers won’t read it
- no scripting language is required (you don’t need a browser-detection script to detect IE)

Another benefit of the IE conditional element is that you can filter the IE version the fix is to work for. For instance, you can specify a different stylesheet for IE 5.0, IE 6.0 and IE 7.0 each. It is as awesome as pathetic, really.

So how to create the IE-only layout?

To create the Internet Explorer stylesheet, you’ll need to create a web standards compliant (the ordinary) stylesheet or a set of stylesheets. You append them via the <link> tag.

Then, to the main stylesheet, you begin adding whatever the code is necessary to show everything properly in IE. Though you can use IE hacks for that, it is much safer to specify different values for the Internet Explorer, because IE hacks (bugs) should be fixed (sooner or later, hopefully in this millenium).

So in the end you get a stylesheet that makes IE show whatever you want properly.

Now the actual work begins. You’ll need to use the IE conditional elements:

<!--[if IE 5]>

<![endif]–>

In the above example only IE 5 or higher will render the text, the rest browsers will ignore it.

There is more tweaking to it. You can either specify the IE version or filter some IE versions:

<!–[if IE 5.5]>
Works only for IE 5.5.
<![endif]–>

<!–[if lt IE 6]>
Will work for any IE with version lower than 6.
<![endif]–>

You can put this code in the head of the document and attach the IE-only stylesheet or in any other part of the page to attach any code (or script).

And the lesser known IE conditional element can prevent Internet Explorer from rendering some code:

<![if !IE 5]>

<![endif]>

The code above will be successfully parsed by all browsers except IE or higher. This allows hiding some stuff from IE (whatever that is). Though it is not clear why would one want to hide something from Internet Explorer users, you can do that using the conditional element above.

Here is a full list of variables (from the MSDN website):

• IE: string, the only currently supported feature is the string “IE”, corresponding to Internet Explorer.
• version: number, an integer or floating point numeral, corresponding to the version of the browser.
• operator: !, the NOT operator. This is placed immediately in front of an value or expression or feature and reverses the Boolean value of the operand.
• comparison: feature, returns a Boolean value of true if the feature matches the browser type.
• comparison: feature version, returns a Boolean value of true if the feature matches the browser type and the version number matches the browser version.
• comparison: lt, the less-than operator. Compares values or expresssions. Returns a Boolean value of true if the first argument is less than the second argument.
• comparison: lte, the less-than or equal operator. Compares values or expresssions. Returns a Boolean value of true if the first argument is less than or equal to the second argument.
• comparison: gt, the greater-than operator. Compares values or expresssions. Returns a Boolean value of true if the first argument is greater than the second argument.
• comparison: gte, the greater-than or equal operator. Compares values or expresssions. Returns a Boolean value of true if the first argument is greater than or equal to the second argument.

Related posts:

• Which column layout do I need?
• Designing cross-browser friendly websites
• Redesigning large (dynamic) websites

This entry was posted on Monday, July 31st, 2006 at 11:22 am and is filed under CSS, Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.