codeRambler Ramblings on code, the web, and technology

How to target specific IE browsers using just HTML?
Wednesday April 18th 2007, 11:08 am
Filed under: Javascript, Web development

Many people were introduced to conditional comments with the introduction of IE7 and their grass-roots call to action to stop using “CSS Hacks” to target specific IE browser versions.

Conditional comments are totally valid markup (for HTML as well as XHTML doctypes) that cause IE browsers running in Windows (the old Mac versions of IE ignored them completely) to parse the contents of the commented markup.

The following code shows how a conditional comment can be used to match “all versions of IE less than version 7″ and include an extra css file and an extra div in the content of the page:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
<!––[if lt IE 7]>
  <link href="iexplore.css" type="text/css" rel="stylesheet" />
<![endif]––>
</head>
<body>
  <h1>Testing</h1>
<!––[if lt IE 7]>
  <div>I'm an old IE running in Windows</div>
<![endif]––>
</body>
</html>

Because of the start HTML comment code (<!--), everything until the close HTML comment code (-->) is treated as a comment for non matching IE Windows browsers.

The code that is actually rendered by the browser is different when viewed in IE Windows browsers older than IE7 and any other browser:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
  <link href="iexplore.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <h1>Testing</h1>
  <div>I'm an old IE running in Windows</div>
</body>
</html></code>

This is the code that is rendered in other browsers:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <h1>Testing</h1>
</body>
</html>

You might choose to use this to set some variables on the page for javascript to use – without having to worry about user agent detection issues and spoofing browsers (remember that this will not work for the old IE Mac browsers – only Windows):

<script type="text/javascript">
  var isIE=isIE5=isIE6=isIE7=false;
</script>
<!––[if IE>
  <script type="text/javascript">
    isIE=true;
  </script>
<![endif]––>
<!––[if IE 7>
  <script type="text/javascript">
    isIE7=true;
  </script>
<![endif]––>
<!––[if IE 6>
  <script type="text/javascript">
    isIE6=true;
  </script>
<![endif]––>
<!––[if IE 5>
  <script type="text/javascript">
    isIE5=true;
  </script>
<![endif]––>

Be sure to check out the difference between down-level hidden (which is what I have used all the examples in this FAQ) and down-level revealed at the MSDN conditional comments page.



How do I use the <script> tag?
Friday December 23rd 2005, 3:20 pm
Filed under: Javascript, Web development

I use Javascript every day in my web projects – and have often been asked for details on how to use the <script> tag correctly. The W3C have a formal description of the <script> tag which includes a summary of the required (and optional) attributes.

In the past, browsers have used various techniques to handle the <script> contents… and this has had a long lasting effect on the way we use this tag in our current projects. The most abused attribute remains in common use today (even though has been deprecated in HTML 4.01 and XHTML 1.0 Strict) – the language attribute. Instead of specifying the language, it is now standard to specify the MIME type through use of the type attribute – and it is important to note that this is the only required attribute for the <script> tag.

Inline Javascript

If you are including some Javascript in the document itself, then you would use a construct similar to this:

<script type="text/javascript">
alert("Hello world!");
</script>

If you are delivering this content in a document that is using an XHTML doctype, then you should comment the data between the <script> tags (if you are unable to include it as an external Javascript file – see below) so that it is not parsed client-side. In the past you would often see a similar technique in use to “hide the code from older browsers” (note that the following example shows the correct way to use comments in an XHTML document using CDATA):

<script type="text/javascript">
//<![CDATA[
alert("Hello world!");
//]]>
</script>

There is no point using the CDATA comments above in a non-XHTML page at all. Nor is there any value in using the following kind of comments (whether you are working on an HTML or an XHTML document). This commenting was widely used to prevent “old browsers” seeing the Javascript. Nobody uses these “old browsers” for regular web use (and if they did, most web sites that use Javascript would break anyway)… so there is absolutely no point in including the comments:

<script type="text/javascript">
//<!--
alert("Hello world!");
//-->
</script>

Linked Javascript

If you are including an external Javascript file in the document, then you would use a construct similar to this:

<script type="text/javascript" src="helloworld.js"></script>

The only difference between inline and linked Javascript is that the latter uses the src attribute to specify where the linked Javascript file resides.

Setting a default scripting language

When writing well formed documents, you should include information about the default scripting language. This can be done using a meta tag in the document:

<META http-equiv="Content-Script-Type" content="text/javascript">

This is good practice, but is not required – especially if the server is already serving linked Javascript files as “text/javascript” (or more correctly: “text/x-javascript”).

Comments Off


Microsoft finally retires IE 5 for the Mac
Thursday December 15th 2005, 1:07 pm
Filed under: CSS, Javascript, Web development

On December 14th 2005, Microsoft quietly published an update onto their web site. They announced they are finally ending all support for Macintosh Internet Explorer as of 31st December 2005 and will not be providing any further security or perfomance updates. Furthermore, the browser will not be available for download from January 31st, 2006. They then go on to actively promote users adopt Apple Safari as a “more recent browsing technology”.

This isn’t really completely new – it has been in Microsoft’s Lifecycle Policy document since at least June 2003 (as seen in this CNet news article from June 2003).

When it was first released in March 2000, version 5.x of IE for the Mac was much more standards compliant than it’s Windows counterpart – and even though Microsoft ended development over 2 and a half years ago, the browser still performed better at rendering CSS in a consistent fashion than more modern Windows Internet Explorer builds. That’s not to say the Macintosh version wasn’t ready for retirement… and without anyone remaining to develop it… it’s loyal users have quietly migrated away.

We now have Apple’s flagship Safari as well as the latest Firefox, Opera and Netscape browsers available for MacOSX as well as a dedicated following of less well-known browsers (including iCab and Camino) that remain in development.

I don’t think the loss of IE is going to be a problem for Mac users and web developers going forward – it will be good to see it finally drop off the web logs, though.

Comments Off