atccunderscoreon

Conditional Compilation für IE

Henning über Webdesign

Wenn der Browser ein Internet Explorer ist, dann mach etwas anderes.
Beim Programmieren mit JavaScript gelangt man häufig in Situationen, in denen der Browser bzw. der Typ des Browsers ein anderes Handling verlangt.

Es gibt einige Möglichkeiten der Browser-Detection, die seit Beginn der Webentwicklung Verwendung finden, z.B. — etwas antiquiert, aber dennoch weit verbreitet — Object-Detections wie document.all, um einen IE aufzuspüren. Da allerdings viele Browser ihre wahre Identität verschleiern können bzw. in diesen Modi „zusagen“, das Objekt zu unterstützen, es aber letztendlich doch nicht tun, stellen Object-Detections nur einen Teil der Wahrheit dar.

Einen etwas zeitgemäßeren und sichereren Weg einem IE auf die Schliche zu kommen stellen die Conditional Compilation Statements in JavaScript dar (1). Die dem Internet Explorer eigenen Condtional Compilation Deklarationen ermöglichen es Informationen über das Betriebssystem, JavaScript-Version oder auch den Browser des Webseiten-Besuchers abzufragen (2). Conditional Compilations sind eigentlich gar nicht mal so unbekannt. Sie sind die Script-Entsprechung ihrer erweiterten Verwandtschaft – den Conditional Comments (3, 4), die häufig verwendet werden, um z.B. IE-spezifische Stylesheets einzubinden.

Conditional Comments


<!--[if IE 8]>
   Anweisungen für den IE8
<![endif]-->

Syntax

Ein Conditonal Compilation Block, ähnelt in seiner Ausprägung einem JavaScript-Kommentar und wird mit nachfolgender Syntax eingeleitet:


/*@cc_on
	alert("Ich bin mit meinem IE auf Besuch hier!");
@*/

Durch die Verwendung von if, else lassen sich die die Verwendungsmöglichkeiten noch erweitern:


/*@cc_on
	@if (@_win32)
		alert("Ein 32-bit Windows, sehr erfreut!");
	@else
		alert("Ein IE, aber was ist das denn?");
	@end
@*/

In ihrer einfachsten Variante genügt das folgende Statement, um auf IE zu prüfen:


//bin ich ein IE?
var ie = /*@cc_on !@*/false;

Dieses kurze Stück JavaScript genügt, um einen IE aufzuspüren. Alle Browser ignorieren das Conditional Compilation Statement und interpretieren den Code als var ie = false. Im Internet Explorer wird der Ausdruck komplett ausgeführt. Dadurch wird das Ausrufungszeichen als Verneinungs-Operator dem Boolean false vorangestellt. Es wir somit !false ausgeführt.

…aus dem Leben

Conditional Compilations können wichtige Helfer sein, wenn man mit XmlHttpRequests zu tun hat. Wie so oft brauchen ältere Varianten des Internet Exploreres eine Extrawurst, da XMLHttpRequest erst nativ ab IE7 unterstützt wird. So kann mit dem folgenden Code-Snippet die entsprechende XmlHttpRequest Funktionalität für IE und den Rest der Welt ausgewählt werden. Let’s do it the crossbrowser way…


var xmlHttpObject = {
myXhr: function() { return new XMLHttpRequest(); }
/*@cc_on, myXhr: function() { return new ActiveXObject("MSXML2.XMLHTTP.3.0"); }@*/
}

alert(xmlHttp.myXhr);
// IE: function() { return new ActiveXObject("MSXML2.XMLHTTP.3.0"); }
// FF, Chrome, ...: function() { return new XMLHttpRequest();  }

Was passiert in diesem Snippet? myXhr wird zuerst für alle Browser ausser IE definiert. Befindet sich das Conditional Compilation Statement in einem IE-JavaScript wird die Codezeile die von dem /*@cc_on@*/ umgeben ist in den Quelltext integriert und vom IE ausgeführt. Der Code bekommt eine weitere Zeile hinzugefügt, die das initiale Setting von myXhr überschreibt. Dieses kurze Beispiel kann natürlich durch die beschriebenen if/else-Anweisungen innerhalb des /*@cc_on@*/-Blocks erweitert und damit granularer an die entsprechenden IE-Versionen angepasst werden (siehe z.B. 5).

Vielleicht hilft es ja dem einen oder anderen, ansonsten gilt die Devise: „Lernen durch stetige Wiederholung“.

Alle Links zum Nachlesen:

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries