Die eigene Webseite wird auf den verschiedenen Internet Explorer Versionen jeweils unterschiedlich dargestellt.
Ein Blick auf die Zugriffsstatistiken der Webseite zeigt, dass immer noch ein recht großer Anteil der Besucher einen dieser alten Internet Explorer Versionen benutzt. Wie weiter?
- IETester herunterladen: http://my-debugbar.com/wiki/IETester/HomePage
Mit Hilfe von IETester lässt sich die Webseite auf den alten Internet Explorer Versionen überprüfen, ohne dass man alle Versionen zusätzlich installieren muss. - Entscheidung: Für welche Internet Explorer Versionen will ich meine Webseite optimieren?
Zugriffsstatistiken beachten. - Webseite für die verschiedenen Internet Explorer Versionen optimieren.
Ein Nachteil bei diesen ganzen Optimierungen ist, dass die Ladegeschwindigkeit der Webseite ein bisschen langsamer wird.
Ich zeige hier 2 Methoden, die sich ganz leicht umsetzen lassen. Man braucht dafür die sogenannten Conditional Comments http://www.quirksmode.org/css/condcom.html, damit ist es möglich die verschiedenen Versionen des Internet Explorers anzusprechen.
Conditional Comments funktionieren nur im Internet Explorer und bis zur Version Internet Explorer 9.
Erklärung zur Syntax:
- gt: größer als
- gte: größer als oder gleich
- lt: kleiner als
- lte: kleiner als oder gleich
- !: nicht
Damit spricht man die Version Internet Explorer 9 an.
Damit spricht man alle Versionen die kleiner als Internet Explorer 9 sind an, also IE8, IE7, IE6 …
Die erste Methode, falls nur ganz wenige Anpassungen nötig sind. Man schreibt den zusätzlichen Code direkt im Stylesheet (CSS-Datei) rein, ohne eine neues Stylesheet (CSS-Datei) zu verwenden.
Beispiel: Man will die Webseite für den Internet Explorer 8 optimieren
<!doctype html>
<!--[if IE 8]><html class="ie8"><![endif]-->
<head>
<meta charset="utf-8" />
<title>Titel</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<article>
</article>
</body>
</html>
Wichtig ist hier die html class ie8, die verwendet man dann im Stylesheet (CSS-Datei).
Stylesheet sieht dann so aus:
body {}
article {}
.ie8 article {} // für den Internet Explorer 8 angepasst, man braucht den gleichen Code nicht zweimal zu schreiben, nur die Anpassungen vornehmen.
Die zweite Methode, auch hierfür benötigt man die Conditional Comments. Man nimmt einfach ein separates Stylesheet (CSS-Datei) für die entsprechende Internet Explorer Version.
Beispiel: Man will die Webseite für alle Versionen kleiner als Internet Explorer 8 optimieren.
<!doctype html>
<head>
<meta charset="utf-8" />
<title>Titel</title>
<link rel="stylesheet" href="main.css">
<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->
</head>
<body>
<article>
</article>
</body>
</html>
<!--[if lt IE 8]> <link rel="stylesheet" href="ie.css" /> <![endif]-->
Danach schreibt man im zusätzlichen Stylesheet, nur die Anpassungen die man vornehmen will. Man muss auch hier den gleichen Code nicht zweimal schreiben.
Schreibweise bleibt gleich wie im ersten Stylesheet:
main.css
body {}
article {}
ie.css
body {}
article {}
Kommentar eingeben