… bekanntlich vom Kopf her: die Kürzungsmöglichkeiten beginnen also schon im , in dem Stylesheets eingebunden werden. Im Sinne von kurz halten und in Anbetracht der aktuellen technischen Entwicklung der Browserlandschaft empfiehlt sich in erster Linie, die Styles für die Geckos bzw. Opera von denen des IE zu trennen, indem man via Conditional Comments Stylesheets einbindet, in denen ausschließlich die Workarounds für das Browserimitat abgelegt werden. Damit man hier mit einer einzigen zusätzlichen CSS-Datei auskommt, stellt man dem gesamten Quellcode (noch vor dem DOCTYPE) einen XML-Prolog voran:
..
Dadurch wird der Internet Explorer 6 in den so genannten Quirksmodus geschickt und rendert alle Elemente wie ein IE 5.5. Die Einbindung der Styles sieht dann wie folgt aus:
Durch die Angabe der beiden Medientypen mit dem Attribut media filtert man automatisch die Browser der 4er-Generation aus, die diese Auszeichnung und somit das .css nicht auslesen können. Dadurch erspart man sich ein weiteres Stylesheet für diese Browser, für die die Inhalte aber ungestylt voll zugänglich bleiben. Ebenso kommen sich dadurch die Styles für Mobilgeräte (media=“handheld“) und Drucker (media=“print“) nicht in die Quere. Die Conditional Comments sorgen dafür, dass die Angaben nur vom IE ausgelesen werden. Deshalb muss die Einbindung der ie_hacks.css auch nach dem zentralen Stylesheet kommen, damit die darin enthaltenen Angaben überschrieben werden können. Der Ausdruck „lte IE 6“ bedeutet, dass das Stylesheet nur von den Versionen kleiner oder gleich 6 ausgelesen werden (lte = lower than equal). Vorteile dieser Methode:
- Das ie_hacks.css benötigt keine zusätzlichen Auszeichnungen wie den Star Hack (* html …), den Underscore-Hack (_Selektor { …) oder andere. Man schreibt in diese Dateien ohne Zusätze die gewünschten Deklarationen, da zentral gefiltert wird.
- Man schützt das Projekt vor dem im Anflug befindlichen IE 7, der dann entweder die Standards besser interpretiert und mit dem zentralen .css auskommt oder notfalls noch ein eigenes ie7.css erhalten kann, ohne dass man das ganze Projekt umkrempeln muss.
- Das zentrale Stylesheet kann hinsichtlich der Validität sauber gehalten werden, während man invalide Workarounds für den IE auch in die zu ihm gehörige Datei schreiben kann, also getreu dem Motto: kranker Code für kranke Maschinen.
A propos krank. Nicht nur der Internet Explorer muss sich so manche Diagnose gefallen lassen.
Bei vermeintlich standardkonformen (Re-)Launches findet man im häufig die von Fachleuten so benannte DIVitis, also einen massiven Überhang an umgebenden Bereichsboxen. Diese entstehen meist durch mangelndes semantisches Verständnis beim Umbau von Tabellenlayouts, bei denen (fast) jedes Element durch ein Eine weitere Ursache der DIVitis ist die Strukturierung von Code in (Teil-)Templates mit dem Ziel, Layoutvorlagen zu liefern. Den Vogel schießen hierbei die bei Designern und Anwendern mehr oder weniger beliebten Boxen mit runden Ecken ab. Mühevoll werden unter Einsatz vieler
Als Beispiel wird eine Linkliste herangezogen. Nicht nur Navigationsmenüs, sondern beispielsweise auch Blogs nutzen diese häufig für Bücherlisten, Surftipps, Internas oder zur Kategorisierung. Bei allen kann man auch davon ausgehen, dass ihnen eine Überschrift vorangesetzt wird. Das dient nicht nur der Strukturierung und Orientierung in der Website, sondern unterstützt die Zugänglichkeit in assistiven Technologien. Der Code lautet dann: Die vier runden Ecken werden nun auf die vier Boxen verteilt. Die obere linke Rund-ecke kommt in das div, die obere rechte in die h2: Mit dieser Syntax, also die Nennung zweier Elemente nacheinander ohne Abtrennung durch ein Komma erreicht man, dass nur die h2 innerhalb des divs angesprochen wird. Solche Kontextselektoren (lies: h2 im div mit der id=links) ermöglichen kurz und knackig die Ansprache eines Elements aus dem Code-Zusammenhang, ohne dass man zu diesem eine eigene Klasse oder ID angeben muss.
Damit keine Überlappungen stattfinden, wird die h2 um die Breite des Hintergrundbildes des divs weggerückt: Lediglich der letzte Listeneintrag benötigt eine eigene ID, um ihn für das Hintergrundbild verfügbar zu machen: Ein nicht ganz so dramatisches Symptom der DIVitis sind Bildboxen mit Untertiteln, die in Fließtexten umflossen werden sollen. Meistens werden diese in ein div gepackt, dieses wird mit einer Klasse beschrieben, um die Floats bewerkstelligen zu können und dort in Textabsätzen (wieder mit einer Klasse wegen der gewünschten kleineren Schriftgrößen) die Bildunterschriften eingefügt. Bedenkt man, dass Bilder inline-Elemente sind, also sowieso in ein strukturierendes Blockelement (nicht in ein semantisches Loch!) eingebunden werden sollten, kann man das Ganze mit einem einzigen Textabsatz zusammenfassen: Hier ist alles drin, was das Designerherz benötigt. Über die Weitenangaben, die man bei floats sowieso braucht, regelt sich der Rest via CSS nahezu von selbst: Wer hier allerdings keine einheitliche Breite bei den Bildern verwendet, muss in das -Tag die Maßangabe lokal als Attribut (style=“width:XXpx;”) angeben. Weiterer Vorteil: alle Deklarationen kommen direkt ins , man braucht also keine zusätzlichen Selektoren anzulegen. Auch markant: Man kann trotz Box Model Bug im Internet Explorer einfach die tatsächliche Bildbreite für die width-Eigenschaft verwenden, ohne zusätzliche Workarounds für den IE einzurichten.
Zunächst müsste man ja annehmen, dass im IE via Conditional Comments die Summe der paddings left und right zur Weite addiert werden müssten. Warum funktioniert das hier? Hier kompensiert ein Bug den anderen. Nach den bisherigen Angaben müsste das Bild aufgrund der paddings um zehn Pixel nach rechts herausstehen.
Der kompensierende zweite Bug ist aber dergestalt, dass der IE keine Elemente überstehen lässt, sondern stattdessen die Box aufreißt. Das ist bei der Grafik der Fall, die sich über die ganze Breite des Textabsatzes erstreckt.
Zweifelsohne gibt es noch mehr Beispiele, die hier genannt werden könnten. Aber wer sich an den Grundsatz „So wenig Code wie möglich und so viel wie nötig“ wird sich das nötige Handwerkszeug selbst erarbeiten können.
#links {
width:8.5em;
background:#da8d00 url(ol.gif) 0 0 no-repeat;
}
#links h2 {
margin-left:25px;
font:normal 1.3em arial, sans-serif;
letter-spacing:1px;
color:#fff;
padding:10px 25px 0 0;
background:url(or.gif) 100% 0 no-repeat;
}
#links ul {
background:url(ul.gif) 0 100% no-repeat;
padding:5px 0 0 25px;
#links #last {
background:url(ur.gif) 100% 100% no-repeat;
padding:0 0 15px;
}
Bildunterschrift
.pic {
width:XXpx;
float:left;
padding:5px 10px;
}