CSS-Debugging: CSS-Hacks versus Conditional Comments
Seite 2: CSS-Hacks & Conditional Comments
CSS-Hacks
Wurde kein geeigneter Workaround gefunden? Ist die alternative Vorgehensweise unpraktikabel, oder funktioniert sie nicht wirklich zuverlässig? Dann ist es Zeit, die Keule auszupacken und dem Browser zu zeigen, wer das Sagen hat.
Einer der berühmtesten CSS-Hacks trägt den Namen "Star-HTML-Hack":
* html #inhalt p {font-size: 1.1em;}
Die CSS-Regel interpretiert nur IE 5 und 6, weil nur die Versionen den Stern-HTML-Selektor verstehen. Andere Browser können mit dem Selektor nichts anfangen. Daher ignorieren sie die Eigenschaften und Werte in der CSS-Deklaration.
Das genaue Gegenteil bewirkt der Kind-Selektor-Hack:
html>body #inhalt {width: 45em;}
Hier interpretieren IE 5 und 6 den Selektor nicht und ignorieren deswegen die Deklaration. Browser wie Safari, Firefox, Opera und IE 7 setzen die CSS-Regel um.
Entscheidet sich ein Entwickler für CSS-Hacks, sollte er sie gut dokumentieren. Folgendermaßen könnte eine übersichtliche Dokumentation ausschauen:
/*--------------------
*** CSS-Hacks ***
-------------------- */
* html #inhalt { ... } /* Hack fĂĽr IE <7, weil es ... und weil ...*/
html>body #inhalt { ... } /* Die Regel wird vom IE<7
versteckt, weil ... */
Notiert der Entwickler die Hacks so oder ähnlich, reich garniert mit erklärenden Kommentaren, läuft er nicht in Gefahr – sollte der Kunde zwei Jahre später eine kleine Änderung am Layout wünschen –, dass er mehr Zeit damit verbringt, nach der Ursache des Fehlers (dem alten CSS-Hack) zu suchen, als er für die eigentliche Arbeit benötigt.
Ob ein Entwickler die CSS-Hacks in eine Extra-Datei auslagern oder leicht abgesetzt von den anderen Regeln in der Haupt-CSS-Datei unterbringt, ist Geschmackssache. Der Autor teilt die CSS-Dateien nur fĂĽr unterschiedliche Ausgabemedien auf: fĂĽr die Ausgabe am Bildschirm und fĂĽr die Druckausgabe. Angaben, die sich auf ein Medium beziehen, notiert er in der gleichen CSS-Datei.
Das hat Vorteile gegenüber der Vorgehensweise, die CSS-Regeln nach ihrer "Funktion" in unterschiedliche CSS-Dateien aufzuteilen: typo.css, basic.css, layout.css etc. Zum einen lässt sich dadurch die Größe der CSS-Datei geringfügig kleiner halten, weil die gleichen Selektoren nicht mehrfach anzugeben sind, und zum anderen ist die Anzahl der HTTP-Anfragen beim Aufbau der Website zu reduzieren, weil jede verlinkte Quelle – egal ob CSS, JavaScript oder Bilder – eine zusätzliche Anfrage an den Server bedeutet.
Um die CSS-Datei dennoch ĂĽbersichtlich zu halten, kann man sich unterschiedlicher Mittel bedienen: EinrĂĽckungen, Kommentare und durch den Einsatz von "Dokument-Lesezeichen", die manche Text-Editoren besitzen. Letzteres erlaubt dem Entwickler, auf Dokumentabschnitte mit einem Klick zu springen.
Conditional Comments: Kommentare Ă la Microsoft
Conditional Comments (CC) sind spezielle aufgebohrte HTML-Kommentare, die nur der Internet Explorer ab der Version 5 interpretieren kann.
Das Conditional Comment:
<!--[if IE 5.5]>
<p>Juten Tach, mein Name ist IE 5.5.</p>
<![endif]-->
fängt an und endet wie ein gewöhnlicher HTML-Kommentar: <!-- Kommentar-Inhalt -->. Danach folgt eine Bedingung (if ...). Es beginnt der Bereich, den nur der IE 5 bis 7 interpretieren kann. In Beispiel richtet sich die Bedingung explizit an den IE 5.5, und nur er zeigt den eingeschlossenen Quelltext an und setzt ihn um. Anschließend schließt man mit [endif] die Bedingung ab.
Die Conditional Comments lassen sich im Kopfbereich (<head>...</head>) und im sichtbaren Bereich (<body>...</body>) verwenden. Somit kann man zusätzliche Stylesheets einbinden und Anpassungen am (X)HTML-Quelltext vornehmen, die nur der IE interpretiert. Die Kommentare erlauben nicht nur, eine bestimmte IE-Version anzusprechen, Entwickler können durch den Einsatz von Operatoren auch mehrere IE-Releases gleichzeitig bedienen:
<!--[if lt IE 7]>...<![endif]-->
Das obige CC richtet sich an alle Internet Explorer, die kleiner Version 7 sind. Die CC verfügen damit über zusätzliche Operatoren:
[if IE X]= Die Angabe ohne Operator spricht nur eine bestimmte IE-Version an.[if !IE X]= eine Verneinung ("Wenn nicht IE X, dann ...").[if lt IE X]= kleiner als IE X.[if lte IE X]= kleiner oder gleich IE X.[if gt IE X]= größer als IE X.[if gte IE X]= größer oder gleich IE X.
Mit den CC-Operatoren können Entwickler präzise unterschiedliche IE-Versionen beeinflussen.
