Conditional Comments effizient nutzen

Conditional Comments sind aus meiner Sicht Hacks und ich will keine Diskussion anstoßen, ob Hacks sinnvoll sind oder man den IE nicht unterstützt. Ab und dann kommt man aus meiner Sicht nicht am Internet Explorer vorbei und dabei sind Conditional Comments eine einfache aber effektive Hilfe.

Sie basieren auf einem absichtlich eingebauten „HTML-Kommentar“ und daher kann man sie bedenkenlos nutzen. Dies soll nicht heißen, dass man immer diese Möglichkeit nutzen sollte. Aber aus meiner Sicht stellt diese Möglichkeit ein effektives bedenkenloses Werkzeug dar.

In diesem Artikel möchte ich aber eine Überlegung darstellen, die aus meiner Sicht nicht abwegig ist, wenn auch aufwendig. Nicht selten sieht man Websites diverser Entwickler, die bewusst ein unterschiedliches Design in Nicht-IE- und IE-Browsern entwickeln. Der Anwender wird das in der Regel nicht mitbekommen, denn wer surft schon mit zwei Browsern gleichzeitig auf einer Website? Aber der Hintergrund dieser Lösung ist aus meiner Sicht ein anderer. Diese Form der Lösung zeigt, dass man eventuell explizit ein Stylesheet für den IE und Nicht-IE-Browsern machen sollte und nicht ein Stylesheet für Nicht-IE-Browser plus diverse Korrekturen, Hacks und Differenzen.

Im Grunde entwickelt eine Vielzahl der Webentwickler sicher so (ausgenommen ist Version 8 des IE, in dem Fall könnte es anders werden, aber bis dahin ist sicher noch ein weiter Weg):

1. Style via CSS erstellen, welches in Nicht-IE-Browsern (< Version 8) läuft
2. Anpassen an des Stylesheet für den IE kleiner 8
3. Diverse Hacks im Stylesheet, mitunter viel Code, den Browser mit Standard-Interpretation nicht benötigen

Schon jetzt arbeiten aber auch eine ganze Reihe von Entwicklern einen anderen Weg ab. Dieser ist nur in kleinen Punkten abwegig, aus meiner Sicht hat er aber eine große Wirkung.

1. Style via CSS erstellen, welches in Nicht-IE-Browsern (< Version 8) läuft
2. Stylesheet für den IE kleiner Version 8 erstellen
3. Einbinden des Stylesheet für den IE mit Hilfe von Conditional Comments

Die zweite Lösung sorgt dafür, dass Nicht-IE-Browser keinen unnötigen Code verarbeiten und das Stylesheet schlank bleibt. Conditional Comments haben den Vorteil, sie arbeiten nur im Internet Explorer. Damit sind sie wunderbar geeignet um Anweisungen nur für den IE abzulegen. Dabei kann man zwischen den unterschiedlichen Versionen des IE wählen. Im folgenden sind dazu Beispiele hinterlegt, die das Nutzen an kleinen Beispielen zeigen und die unterschiedlichen Möglichkeiten zeigen.

IE: Entweder oder

Parallel dazu möchte ich aber noch eine andere Methode zeigen, die dabei sehr direkt unterscheidet. Die beiden folgenden Abfragen gehen davon aus, dass man also ein Stylesheet hat, welches für Nicht-IE-Browser ist und eines, welches explizit für den IE ist. Das heißt, dass das Stylesheet für den IE alle notwendigen Angaben enthält und der IE keine Mischung aus Stylesheet für alle Browser und dem speziellen Stylesheet bekommt.

Für IE

<!--[if IE]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Nicht (!) für IE

<!--[if !IE]>-->
	<link rel="stylesheet" href="standard.css" type="text/css" media="screen" />
<!--<![endif]-->

IE: Diffizile Abfragen

Im Gegensatz zur obigen Methode kann man alternativ auch nur diverse Stylesheets erarbeiten, die die Probleme im IE mit dem Standard-Stylesheet bearbeiten und je nach Version des IE einbinden. Dazu stehen diverse Conditional Comments-Abfragen bereit.

Alternativ kann man aber auch, wenn es denn sein muss/soll, diverse eigenständige Stylesheets für die jeweilige betroffene Version des IE erstellen und wie oben angesprochen einbinden.

Für IE 5 und größer

<!--[if gte IE 5]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Für IE, kleiner als Version 6

<!--[if lt IE 6]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Für IE, kleiner oder gleich als Version 5.5

<!--[if lte IE 5.5]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Für IE, größer als Version 6

<!--[if gt IE 6]>
	<link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Hinweis zum Syntax

• gt: greater than (größer als)
• gte: greater than or equal to (größer als oder gleich)
• lt: less than (kleiner als)
• lte: less than or equal to (kleiner als oder gleich)

Via PHP

Aber auch PHP gibt uns die Möglichkeit den Browser abzufragen und ab und dann kann die Lösung sinnvoll sei. Aus meiner Sicht ist sie es aber nicht für die Implementierung des Stylesheet für den IE. Dort sind die Conditional Comments sehr gut geeignet.
Der Vollständigkeit aber und da man ab und dann die Lösung gebrauchen kann, lege ich meine Codeschnippsel hier ab.

<?php
	if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') ){
		if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Netscape') ){
			$browser = 'Netscape (Gecko/Netscape)';
		}
		else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') ){
			$browser = 'Mozilla Firefox (Gecko/Firefox)';
		}
		else{
			$browser = 'Mozilla (Gecko/Mozilla)';
		}
	}
	else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') ){
		$browser = 'Internet Explorer (MSIE/Compatible)';
	}
	else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') ){
		$browser = 'Safari';
	}
	else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') === true){
		$browser = 'Opera';
	}
	else{
		$browser = 'andere Browser';
	}
	echo '<h2>Dein Browser ' . $browser . '</h2>';
?>

<?php
	if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') ) {
?>
		<link rel="stylesheet" type="text/css" href="safari.css" media="screen" />
<?php
	}
?>

Via JavaScript

Auch im Bereich JavaScript kann man diverse Abfragen starten um den Browser zu erkennen, allerdings geht das nur, wenn JS beim Anwender auch aktiv ist. Für diese Möglichkeit gibt es die unterschiedlichsten Möglichkeiten und eine sehr kleine Funktion stammt dabei aus meinem Archiv.
Auch dieses soll hier nicht groß erläutert werden, ich denke, dazu gibt es ausreichend und bessere Seiten.

function getBrowserType() {
	var detect = navigator.userAgent.toLowerCase();
	var browser;
	var doCheckIt = function (bString) {
		place = detect.indexOf(bString) + 1;
		return place;
	};
	if (doCheckIt('konqueror')) { browser = "konqueror"; }
	else if (doCheckIt('safari')) { browser = "safari"; }
	else if (doCheckIt('omniweb')) { browser = "omniweb"; }
	else if (doCheckIt('opera')) { browser = "opera"; }
	else if (doCheckIt('webtv')) { browser = "webtv"; }
	else if (doCheckIt('icab')) { browser = "icab"; }
	else if (doCheckIt('msie')) { browser = "msie"; }
	else if (doCheckIt('firefox')) { browser = "firefox"; }
	else if (!doCheckIt('compatible')) { browser = "nn"; }
	return browser;
}

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren