Conditions in HTML

If you are a developer, you know that in ANY programming language there are conditions which can be used to decide what action to perform if a given criteria applies. This applies to all programming languages, Javascript, ASP, PHP, C, bash, and even HTML. Not sure though if I can say HTL is a programming language.
Anyway, let’s see what HTML conditions are used for and how to work with them.
First, let’s note that Internet Explorer is the *only* browser which can work with them. Not sure why, but only the guys from Microsoft thought HTML should be a bit more complicated and more useful.

The markup is extremely simple, I could say rudimentary: you know HTML comments. When you place something between the <!– –>, that’s a comment. It will appear in the source but browsers will not output or execute it. But Internet Explorer tries to execute it.

To start a HTML condition, you have to use the same markup, but spice up with a condition, like this:

<!–[if something]>

Foo bar text

<![endif]–>

In the above case if the condition is applicable, the the paragraph from the example will be shown in the source. Why only in the source? Because there are two types of conditional comments: first what you saw above, it’s named hidden conditional comment and the second which is, well, revealed conditional comment. Yeah, Microsoft has unimaginable imagination.
A revealed conditional comment would look like this:

<![if something]>

Foo bar text

<![endif]>

Notice that I didn’t put the hyphens in in front of the if statement, nor to the end of the block.

What can you use this new knowledge for? Well, almost nothing. Since only IE knows what to do with these comments, it can be used for browser detection, to load separate stylesheets for different browsers, or such. More than that, even with IE you hit the wall, since the only valid feature is the “IE” word. I explain this with a code:

<![if IE 7]> <link rel=”stylesheet.css” media=”all” href=’stylesheet.css” /> <![endif]>

The above example will load a stylesheet if the browser is IE 7, or you could use the following code:

<![if IE]> <link rel=”stylesheet.css” media=”all” href=’stylesheet.css” /> <![endif]>

to load a stylesheet if the browser is some kind of Internet Explorer.

As You see I always used only the IE word in my example, and that’s why I said that this code has this only feature. You can’t use anything else, like [if NS] or [if DO] only and only [if IE ...].

Should you learn this? I think you shouldn’t. We have much better things to do than to learn something which is absolutely not crossbrowser.

Then why did I write this post? Because next time you’ll see an if statement in a HTML comment, at least you will know what it is.

Related posts brought to you by Yet Another Related Posts Plugin.