Archive for the ‘HTML’ Category

Conditionally Execute HTML In Internet Explorer and/or Non-Internet Explorer Browsers (and How to Provide an Alt Image If Flash Is Disabled)

January 29, 2010

Our Web Monkeys Were Collapsing With Exhaustion…
…so the developers were summoned from their ivory tower to lend a hand. My job, to write the temporary US Landing Page for our company while Marketing smashed their heads together to devise an irresistible glob of eye candy for the permanent site.

I had a requirement to show a Flash file on the Web Page. The Flash file had to be shown in IE6, IE8 and Firefox. I was given an example Web Page and was told that the lead tester’s machine commonly hung while viewing our pages in IE6.

Embedding Flash

The HTML for embedding a Flash object is quite different in Firefox than in IE.

The HTML for embedding a Flash object in IE starts out like this:
object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″

whereas in Firefox it looks like this:
object type=”application/x-shockwave-flash”

If IE6 encounters the object tag for the Firefox definition of a Flash file it hangs, whereas IE8 eats it and ignores it.

“Cool”, I thought, “now I know why our lead tester’s machine hangs all the time. I must be a freaking genius to figure out this problem in about 30 seconds flat.”

It seemed strange to me that our Web Monkeys hadn’t figured this out before.

The sample web page I was pointed to had this code in it:

cross browser html

That first block at the top, the one starting with with [If IE], rendered totally in green text inside Visual Studio means ‘Comment’ so the first thing I did was throw away the comments to get a clean file to work with.

Did you spot my Journey Of Pain beginning ?

Yes, that Green text was a comment all right, but my ignorant non-Web Monkey consciousness did not know that they were very special comments indeed, known as Conditional Comments, specifically designed for Cross-Browser implementations just like the one I had been assigned.

In other words, I had just thrown away the core functionality I needed to get the task completed. THE PAIN! THE PAIN! THE ROTTING PAIN!

So it took me about two days to finally figure out that I needed those ‘comments’ and that the template which had been given to me was totally correct. I just needed to update file names and links but instead spent three-fifths of an eternity trawling the Web for exotic and completely unneeded browser detection strategies.

The bitter irony is that if I had not been told that our lead tester’s machine uang on IE6 then I would not have thought that the code I had been supplied was buggy or redundant. AARGH! For those with Accessibility Options turned on I will type that again AAAAAARGGGGHHHH!!.

Yeah, so that code at the top is perfectly fine. It shows a Flash file in IE6, IE8 and Firefox. And the anchor tag underneath the two Flash object blocks shows an Alternate Image in case Flash is disabled in either IE or Firefox.

…and if you hadn’t guessed yet the reason our lead tester’s machine hangs in IE6 has absolutely nothing to do with cross-browser Flash issues. That was merely a monstrous bioluminescent red herring (also here)

Here’s How It Works

Conditional Comments ONLY work in IE for Windows and a few other particular browsers. As David Hammond explains in CSS Hacks – The Good, The Bad And The Ugly

Conditional Comments apply specifically to browsers using Internet Explorer’s Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the Mac uses a different layout engine and doesn’t support conditional comments.

So when IE lumbers along and reads that first Comment [If IE], it goes “Yee-har. That’s for me. Let me interperet that sucker.” and when it finds <!– [if !IE] it does the reverse and ignores it as serenely as lunchtime crowds do the homeless.

On the other hand, non-IE browsers see the first block as a standard comment and therefore ignore it; but later ignore ONLY the Conditional Comment tags [if !IE] that frame the Firefox Flash definition as they are, in fact, also standard everyday comments if you look at the structure. So non-IE browsers read and interperet only the HTML inside the [If !IE] Conditional Comments whereas IE ignores the lot.

Clever eh?

Wish I had read Wikipedia’s page on Conditional Comments before I started, but then I didn’t even know there was such a beast before I started. Cost me two days of precious heartbeats that. THE ROTTING PAIN!!