Conditional Comments
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Bestimmte Versionen von Internet Explorer für Windows sollen eigene Stildefinitionen erhalten.
Lösung
Verwenden Sie die sogenannten Conditional Comments, um zwischen verschiedenen Browserversionen zu unterscheiden:
<!--[if IE]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer benutzen.</p>
<![endif]-->Um die einzelnen Browserversionen zu unterscheiden, können Sie die oben gezeigte Schreibweise erweitern, indem Sie die Versionsnummer mit angeben, für die der Code bestimmt ist:
<!--[if IE 5]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer 5 benutzen.</p>
<![endif]-->
<!--[if IE 5.0]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer 5.0 benutzen.</p>
<![endif]-->
<!--[if IE 5.5]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer 5.5 benutzen.</p>
<![endif]-->
<!--[if IE 6]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer 6 benutzen.</p>
<![endif]-->
<!--[if IE 7]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer 7 benutzen.</p>
<![endif]-->Ist der Code für Internet Explorer 5 für Windows oder höher bestimmt, können Sie den folgenden Code verwenden:
<!--[if gte IE 5]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer 5 oder höher benutzen.</p>
<![endif]-->Soll der Code dagegen nur in Internet Explorer 5.5 für Windows und niedrigeren Versionen verwendet werden, schreiben Sie Folgendes:
<!--[if lte IE 5.5]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer 5.5 oder niedriger benutzen.</p>
<![endif]-->Versionen unterhalb von Internet Explorer 6 für Windows können Sie so ansprechen:
<!--[if lt IE 6]>
<p>Sie sehen diesen Satz, weil Sie Internet Explorer in einer Version kleiner als 6 benutzen.</p>
<![endif]-->Diskussion
Basierend auf speziellen HTML-Kommentaren hat Microsoft ein eigenes System entwickelt, um auf spezielle Versionen des Internet Explorers für Windows abgestimmte HTML-Inhalte darstellen zu können. Da HTML-Kommentare von anderen Browsern nicht interpretiert werden, stellt dies eine äußerst effektive und sichere Methode dar, CSS-Code speziell für Internet Explorer und dessen verschiedene Versionen von den allgemeinen Definitionen zu trennen.
Da die Conditional Comments auf HTML-Kommentaren basieren, können Sie auch nur HTML-Code einfügen. Auf diese Weise ist es möglich, speziell für verschiedene Browser der Internet Explorer-Familie bestimmte CSS-Anweisungen zu definieren. Der folgende Code lädt für Internet Explorer 5.x ein eigenes Stylesheet, indem zwischen den entsprechenden Conditional Comments ein eigener link-Tag eingefügt wurde:
<link rel="stylesheet" type="text/css" media="screen, presentation" href="/_assets/css/screen/screen.css" />
<link rel="stylesheet" type="text/css" media="aural" href="/_assets/css/aural.css" />
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" media="screen, presentation" href="/_assets/css/screen/ie.css" />
<![endif]-->Auch interne Stylesheets können so für bestimmte Versionen definiert werden:
<!--[if lt IE 6]>
<style type="text/css">
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
}
</style>
<![endif]-->Conditional Comments können auch mit einem "Intelligenten Hacking-System" (siehe das Rezept Ein intelligentes System zur Verwaltung von CSS-Hacks) eingesetzt werden.
Beachten Sie beim Einsatz von Conditional Comments den kleinen, aber feinen Unterschied zwischen IE 5 und IE 5.0.
Soll Ihr Code nur für Internet Explorer 5.0 verwendet werden, schreiben Sie IE 5.0. Um dagegen alle Fünfer-Versionen (5.x) anzusprechen, benutzen Sie die Formulierung IE 5.
Die zusätzlichen Marker lt und gt stehen für "kleiner als" (less than) und "größer als" (greater than). Die Marker lte und gte bedeuten "kleiner als oder gleich" (less than or equal) bzw. "größer als oder gleich" (greater than or equal).
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln