Conditional Compilation in JavaScript

A feature most people don’t seem to know about is conditional compilation in Internet Explorer web browsers.

For instance, there are times when you have the need to, in a fool-proof manner, find out if a web browser is Internet Explorer or what version of JScript (the JavaScript implementation in IE) is being used. Using object detection in JavaScript and general scripting in all honor, but there are cases where this doesn’t go all the way.

No matter how much we dislike to admit it, these types of need arise, and object detection has it flaws. Some web browsers offer the ability to mask themselves as another web browser, while others claim to support a certain feature through object detection but then fails in one way or another in the actual implementation. Enter conditional compilation.

Conditional compilation is a native solution available only in Internet Explorer, which offers web developers a way to find out a number of values of the current visiting web browser. To put it simple, it is conditional comments, which I’m sure a lot you use to include IE-specific stylesheets, but implemented in a JavaScript environment.

Code examples

To start out, you write a tweaked JavaScript comment:

/*@cc_on
	alert("Hello IE user (please, please switch)!");
@*/

As you can see, it is initialized with the /*@cc_on and closed with the @*/. More options include if and else-clauses as part of the comment:

/*@cc_on
	@if (@_win32)
		alert("You have 32-bit Windows");
	@else
		alert("You have IE but not 32-bit Windows");
	@end
@*/

There are ways to check web browser values such as if it is Windows, if it’s running a 32- or 64-bit system, the JScript version and build, and so on (complete list of conditional compilation variables).

Use this!

For future reference, if you want to be really really sure that your visitor is actually using Internet Explorer, I definitely recommend using conditional compilation to detect that. It can also offer you a solid way to do some necessary IE-specific code branching.

A simple way to check if the user is having the Internet Explorer web browser, suggested by Dean Edwards (lots of geeky comments here), is to do it like this:

var ie = /*@cc_on!@*/false;

Demo page

I’ve put together a small demo page of conditional compilation, whcih will only present the actual results in Internet Explorer.

A word of warning

As always with good things, there is one downside to this. Since conditional compilation takes place in a comment, if you use an approach to minify/clean out your code of comments before deploy, it will interpret this as any ol’ JavaScript comment, and remove it, resulting in weird and unexpected errors.

But fret not, it’s not as bad as you think. Unfortunately, JSMin removes conditional compilation comments, but I believe this is due to not having been updated in a while, and not up to speed with modern web development practices.

Using other tools such as YUI compressor or packer does indeed work fine with conditional compilation. However, both, as far as I can tell, fails to obfuscate variable names (if you have that option on) if you have code containing conditional compilation.

So, to conclude, I suggest using conditional compilation, but be aware of possible minification issues.

Posted in Developing,JavaScript,Technology,Web browsers |

Leave a Reply

Your email address will not be published. Required fields are marked *