Internet Explorer 6 (und älter) ausschließen – HTML

by ·10 Kommentare

Gestern habe ich den IETester vorgestellt. Viele Versionen des Internet Explorer in einem Programm. Mir ist mal wieder aufgefallen, dass mein Blog im Internet Explorer 6 (und älter) nicht ansatzweise richtig dargestellt wird. Ich habe mich also (mal wieder) entschlossen, den IE 6 (und älter) aus meinem Blog zu entfernen.
Nachdem ich mehr oder weniger erfolgreich 2, 3 WordPress Plugins und 2, 3 andere Codeschnipsel ausprobiert hatte, was alles nicht so wirklich optimal lief, hab ich mich entschlossen meine eigene Anti-IE6 Warnung zu basteln.

Code
<!--[if lte IE 6]>
<style type="text/css">
.BGC { display: none!important; } 
#ie6-warning td { border: 1px solid #eee; padding: 4px; } 
#ie6-warning { display: block; 600px; height: 100%; color: white; margin: 10%; font-size: 17px; } 
</style>
<![endif]-->

<body>
<div id="ie6-warning">
  Ihr Browser ist zu alt um diese Internetseite korrekt darzustellen.<br/>
  Bitte aktualisieren Sie Ihren Browser oder installieren Sie einen anderen modernen Browser.<br/><br/>
  Your browser is too old to display this website correctly.<br/>
  Please update your browser or install another modern browser.<br/><br/><br/>
  <table cellpadding="10">
    <tr><td></td><td>Google Chrome</td><td>Mozilla Firefox</td><td>Opera</td><td>Apple Safari</td><td>Microsoft Internet Explorer</td></tr>
    <tr><td>Download (DE):</td><td><a href="http://www.google.de/chrome/">Link</a></td><td><a href="http://www.mozilla-europe.org/de/firefox/">Link</a></td><td><a href="http://de.opera.com/">Link</a></td><td><a href="http://www.apple.com/de/safari/">Link</a></td><td><a href="http://www.microsoft.com/germany/windows/internet-explorer/">Link</a></td></tr>
    <tr><td>Download (EN):</td><td><a href="http://www.google.com/chrome/">Link</a></td><td><a href="http://www.mozilla-europe.org/en/firefox/">Link</a></td><td><a href="http://www.opera.com/">Link</a></td><td><a href="http://www.apple.com/safari/">Link</a></td><td><a href="http://www.microsoft.com/windows/internet-explorer/">Link</a></td></tr>
    <tr><td>Suchen/Search for:</td><td><a href="http://www.google.com/search?q=chrome">Link</a></td><td><a href="http://www.google.com/search?q=firefox">Link</a></td><td><a href="http://www.google.com/search?q=opera">Link</a></td><td><a href="http://www.google.com/search?q=safari">Link</a></td><td><a href="http://www.google.com/search?q=internet+explorer">Link</a></td></tr>
  </table>
  <br/><br/><span>Liebe Grüße, best regards, Hannes Schurig</span>
</div>

Kurz, einfach, schmerzlos, schnell.
Es gibt eine IE < = 6 Weiche, die dann CSS Eigenschaften aktiviert. Diese blenden den Blog (.BGC ist der Blogcontainer) aus und blenden die IE 6 Warnung ein. Das wiederum ist einfach nur etwas Text und eine Tabelle. In der Tabelle biete ich die Downloadseiten der bekanntesten Browser auf deutsch und englisch an, zusätzlich dazu zu jedem Browser noch die Google Suchergebnisse. Leicht angepasst kann man diesen Codeschnipsel in jedem Webprojekt einbauen!

10 Kommentare

  1. Dir fehlt da etwas im Code.

    Zudem gibt es eine um einiges elegantere Lösung zur Browsererkennung: Link
    Dann kannst du das style direkt in dein normales Stylesheet packen:
    .iewarnung {display:none;}
    .ie6 .iewarnung {display:block;}

  3. Okay, interessante Sache, .ie als Klasse vor allen Styles die für den Browser bestimmt sind.
    Aber das klingt für mich wie script- oder style- Befehle direkt im HTML Dokument, das gehört sich nicht. Logische Trennung von Struktur, Design und Funktion setze ich auch innerhalb des Designs fort. Logische Trennung von Designs verschiedener Browser gehören in verschiedene Styles.
    Die Lösung, die Anti-IE Styles in die index zu schreiben sollte erstmal nur das Demonstrieren vereinfachen.

    Aber danke für den Link! 🙂

  6. Ich bin ja eher der unbekümmerte Mensch. Wenn jemand unbedingt Uraltbrowser nutzen will, dann soll er das halt tun – darf sich dann aber nicht wundern, wenn die Seite nicht korrekt angezeigt wird.

    Nachher fange ich noch an, Hacks zu basteln, damit Mosaic-User eine „bitte updaten“-Meldung bekommen…

  7. Also wer nicht mit der Zeit geht ist selbst schuld wenn bei dem vieles nicht geht, nicht angezeigt wird oder der Rechner bzw. Laptop voll mit vieren ist 🙂 Webseiten werden mitlerweile hauptsächlich für FF und Safari Browser erstellt und bei IE achtet man nur noch ab version 8 drauf obs noch passt oder nicht. Wenn jemand unter der IE vers 8 nutz ist selbst schuld wenn der mal vieren hat und nichts geht ^^. Es wäre genauso wie wenn jemand nen trabant fährt (IE6) und meint die selbe Ausstattung und power wie nen Porsche (Firefox 4.0 oder Safari) zu haben 😀

Schreibe einen Kommentar