Das größte Problem ist oft, dass die schönen Themes nicht auf den IE6 angepasst wurden und daher zu sehr unschönen Darstellungen führen. Ich habe in einer virtuellen Maschine noch eine Installation vom Internet Explorer 6 laufen und damit mal selbst meinen Blog getestet. Das Ergebnis sah leider wie folgt aus:

Wie ihr hier sehen könnt sind die transparenten PNG Bilder im IE6 nicht transparent, da dieser nur transparente GIF Bilder unterstützt. Viel schlimmer war aber, dass die Sidebar mit den Widgets komplett nach unten gerutscht war. Um das zu beheben hätte ich sehr viele Dinge im CSS Layout und vermutlich auch im HTML-Quellcode ändern müssen. Daher habe ich überlegt, was man stattdessen tun könnte.

Die Lösung: Google Chrome Frame

Schon vor längerer Zeit hatte ich etwas vom Google Chrome Frame gelesen, der die Webkit Rendering Engine und die JavaScript Engine des Chrome Browsers in den Internet Explorer bringt. Dazu muss der Benutzer lediglich ein Plugin für den Internet Explorer installieren und der Website-Betreiber muss dem Plugin mitteilen, dass der Inhalt automatisch damit gerendert werden soll.

Den Browser zum Rendern mit dem Chrome Frame veranlassen

Alles was der Website-Betreiber tun muss, ist folgenden Meta-Tag in seinen Quellcode einzufügen:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

Das X-UA-Compatible Meta-Tag sorgt dafür, dass das Plugin aktiviert wird und der Benutzer den Inhalt richtig dargestellt bekommt, vorausgesetzt natürlich er hat es auch installiert. Um einen Benutzer des Internet Explorers dazu zu bewegen das Plugin zu installieren, hat Google ein kleines JavaScript-Snippet bereitgestellt, mit dem der Benutzer einen Link zur Download-Seite des Plugins bekommt:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<div id="placeholder"></div>
<script type="text/javascript">
	CFInstall.check({
		node: "placeholder",
		destination: "http://www.waikiki.com"
	});
</script>

Damit die Aufforderung zum Download auch nur Benutzern des IE6 angezeigt wird, habe ich zusätzlich ein Conditional Comment benutzt, um das Snippet nur auf IE6 Benutzer anzuwenden, damit Benutzer des Internet Explorer 7 und höher keine Aufforderung bekommen. Außerdem müssen damit auch alle Nutzer eines andern Browsers nicht die JavaScript-Datei vom Google Server laden.

Der Blog nach der Installation des Plugins

Für diejenigen von euch, die etwas skeptisch sind, ob der ganze Aufwand lohnt, habe ich hier nun das “nachher” Bild, damit ihr sehen könnt, dass es wirklich funktioniert:

Wie ihr sehen könnt, sieht der Blog nun wieder richtig aus. Als kleinen Bonus des Plugins könnt ihr auch den Inspektor nutzen, wie man ihn von Chrome oder Safari gewöhnt ist. Aber die Besucher eures Blog werden das wohl eher nicht nutzen.

Ich hoffe, dass euch dieser Tipp helfen konnte. Mich würde interessieren, was ihr vom Google Chrome Frame haltet oder was für euch dagegen spricht. Hat ihn vielleicht jemand auch im Einsatz und schon echte Probleme oder Nachteile damit feststellen können? Über Kommentare würde ich mich wie immer sehr freuen … über ein baldiges Aussterben des IE6 aber noch viel mehr

Bisher habe ich schon viele Lösungen für dieses Problem gefunden. Einige davon wurden serverseitig vorgenommen, einige sehr aufwändig per JavaScript clientseitig. Meistens wurden dabei alle Links innerhalb einer Seite gesucht und dann per Script angepasst.

Durch die tollen neuen Möglichkeiten von CSS3 gibt es aber eine sehr elegante Variante, die keinerlei Umbauarbeiten an den Scripten erfordert. Es reicht ein simpler CSS Selektor, der alle externen Links erkennt und anschließend entsprechend kennzeichnet.

a[href^='http']:not([href^='http://example.com']):not([href^='https://example.com']){ /* Styles für externe Links */ }

Der Anfang sollte bekannt sein. Wir selektieren zuerst alle Links mit einem “href” Attribut, das mit “http” beginnt. Damit schließen wir alle Anker, reine Ankerlinks, relative Links sowie “mailto”-Links aus. Mit der not() Funktion von CSS3 selektieren wir anschließend alle Links, die NICHT die Domain als absoluten Link mit “http” oder “https” enthalten. Dabei ist natürlich “example.com” durch die zu suchende Domain zu ersetzen. Sollen auch Subdomains nicht selektriert werden, können diese ebenfalls in einer weitern not() Funktion angegeben werden. Vereinfacht könnte man auch alle Links auswählen, die den Domainnamen und die Toplevel-Domain nicht enthalten:

a[href^='http']:not([href*='example.com']){ /* Styles für externe Links */ }

Hierbei würden aber auch externe Links ausgelassen, die den eigenen Domainnamen im Linktext enthalten wie z.B. bei “http://www.einblog.de/toller_artikel_auf_example.com”.

Nachdem nun alle externen Links selektiert wurden, können sie mit ein paar netten Styles versehen werden. Ich habe hier mal exemplarisch mit dem Pseudoelement “:after” einen Text nach dem Link eingefügt, diesen rot markiert und zusätzlich ein Icon als Hintergrund eingefügt. Der Phantasie sind hier aber keine Grenzen gesetzt.

a[href^='http']:not([href^='http://example.com']):not([href^='https://example.com']):after {
	content: ' (external)';
	color: red;
	background: transparent url('external_link.png') center right no-repeat;
	padding-right: 16px;
}

Wie das ganze für die verschiedenen Linkarten aussieht könnt Ihr euch auf der kleinen Beispielseite ansehen. Ihr benötigt dafür aber einen teilweise CSS3 kompatiblen Browser. Ich habe es erfolgreich mit Firefox 3.5, Safari 4.0, Chrome 2.0 und Opera 10.0 getestet. Der Internet Explorer unterstützt die not() Funktion auch in Version 8.0 noch nicht.

Beispiel

Wenn Ihr Anregungen zu der Lösung habt oder eine andere tolle Lösung kennt würde Sie mich sehr interessieren.