Einstieg in Barrierefreies Webdesign

Der Internet Explorer ist unter den heutigen moderneren Browsern der Fehlerhafteste in vielen Bereichen. Neben Sicherheitsmängel hat er auch grobe Mängel in der Interpretation von CSS und unterstützt viele Vorgaben der Spezifikation gar nicht, was aber andere problemlos schaffen. Trotzdem ist der Browser der am weit verbreitetesten, da er fest in das Betriebssystem von Microsoft integriert ist und daher die meisten Internetbenutzer einfach auf das "blaue E" klicken um im Web zu surfen. Deswegen muss ein großer Aufwand betrieben werden, um dieser Mehrheit, auch wenn der Firefox - Browser durchschnittlich mit 15 bis 20 Prozent in den Browser - Statistiken auftaucht (siehe heise - Newsticker vom 19. Juli 2006 ), auch ein sinnvolles Layout zu garantieren.

Übliche Fehler

Neben dem Fehler, wie ein falsches Boxmodell im Quirksmodus, hat der Internet Explorer weitere Fehler, die Schwierigkeiten im CSS - Layout machen.

Verschwinden von Inhalten / Hintergründen

Es kann passieren, dass der Internet Explorer einige Inhalte nicht darstellen kann, wie Texte oder auch Hintergrundfarben oder -bilder. Meistens liegt die Ursache in einer Regel wie diese.

.eineBox {
  margin:1em 10%;
  padding:0 2%;
  [...]
}

Die Regel ist valide und sämtliche Browser können diese Regel darstellen ohne die Inhalte der betreffenden Elementen zu "vergessen". Der Internet Explorer (bis zur Version 6) benötigt aber in einigen Fällen, die sehr stark variieren können, denn selbst beim Scrollen werden Inhalte plötzlich nicht mehr dargestellt oder tauchen erst dann auf, einen Wert für die width - Eigenschaft. Dieser Wert sollte sich den Rändern und Abständen angepasst werden, vorausgesetzt der Internet Explorer benutzt das richtige Boxmodell.

.eineBox {
  margin:1em 10%;
  padding:0 2%;
  width:76%;
  [...]
}

Folglich sind auch in diesem Fall keine Kombination von relativen und absoluten Werten möglich, was leider in der Gestaltungfreiheit einschränkt.

Verdoppeln von margin - Werten

Manchmal werden auch angegebene Werte von margin im Internet Explorer einfach verdoppelt, meistens wenn auch eine Deklaration mit float mit angegeben ist. Vor allem in CSS - Layouts, die auf margin und float aufbauen ist das sehr störend.

Es gibt noch eine Vielzahl von anderen Bugs, die das Verhalten von CSS betreffen. Anderes Verhalten bei padding - oder margin - Werten in Listen, eine Tabelle umfließt ein Element mit float nicht richtig, und so weiter. Eine schöne, aber englische Übersicht über die Bugs des Internet Explorers zeigt "Explorer Exposed!".

Die Frage ist nur, wie man mit so einem Ungetüm wie dem Internet Explorer ein sinnvolles Layout erschaffen soll. Glücklicherweise gibt es, sogar dank Microsoft, Mittel und Wege dieses zu schaffen.

Conditional Comments

Ein Mittel sind Browserweichen, Conditional Comments von Microsoft genannt und auch von ihnen ins Leben gerufen. Mit diesem kann man Bereiche eines HTML - Quelltextes ausschließlich nur für Internet Explorer geltend machen. Andere Browser ignorieren diese, da es sich eigentlich, nach der Spezifikation vom W3C, um Kommentare handeln. Dadurch kann man CSS- oder auch Skriptdateien nur für den Internet Explorer anlegen, wie dieses Beispiel zeigt.

<link rel="stylesheet" type="text/css" media="screen" href="../cssfiles/_base.css" />
<link rel="stylesheet" type="text/css" media="print" href="../cssfiles/print.css" />

<!--[if lt IE 7]>
<link rel="stylesheet" media="screen" href="../cssfiles/_ie.css" />
<![endif]-->
<!--[if IE 5]>
<script src="../IE7_0_9/ie7-ie5.js" type="text/javascript"></script>
<![endif]-->

Der Abschnitt, der nur für den Internet Explorer bestimmt, befindet sich zwischen "<!--[if ...]>" und "<![endif]-->". Wie man sieht kann man mittels logischer Operatoren bestimmte Versionen vom Internet Explorer bevorzugen oder ausschließen. Versionen werden wie folgt unterschieden

IE

Alle Versionen

IE 7, IE 6, IE 5

Version 7, 6 und 5

Und folgende logische Operatoren sind verwendbar:

!

"nicht"

lt

"kleiner als"

lte

"kleiner als oder gleich"

gt

"größer als"

gte

"größer als oder gleich"

 

Starhacks

Mittels Starhacks kann man Regeln nur für Internet Explorer anlegen, um Probleme explizit zu beheben. Empfehlenswert ist es, diese Regeln in eine weitere CSS - Datei auszugliedern und diese dann mittels einer Browserweiche nur für den Internet Explorer und deren Version laden zu lassen, damit andere Browser keine unnötigen Regeln laden müssen oder sogar trotzdem diese Regeln umsetzen. Denn gerade die Starhacks können im Internet Explorer 7 große Schwierigkeiten machen, siehe Heise Newsticker - Meldung vom 13. Oktober 2005. .

Ein Starhack - Regel entspricht diesem Schema:

* html [der eigentliche Selektor] {
  [Deklarationen nur für IE]
}

Wie man sieht wird einfach der Regel ein "* html" davor gesetzt, um diese in einen Starhack umzuwandeln. Hier nun einige Beispiele.

* html #navigation ul{
   width:10%;
}

* html #inhalt p {
  width:80%;
}

In einer Starhack-Regel lassen sich Werte überschreiben oder auch weitere Eigenschaften hinzufügen. Es gibt noch eine Vielzahl an weiterer Hacks, die auch nur für ältere Versionen gelten oder diese ausschließen. Diese werden unter "Ältere Browser" vorgestellt.