Tipps und Tricks: HTML und CSS
Kommentare

Der Fisch stinkt …
… 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

Der Fisch stinkt …

… 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.

Entzündungen am Code

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

ersetzt wurde, nur damit es tabellenfrei wird. Mit zeitgemäßem Webdesign hat das nur am Rande zu tun, und der angeblich gerade genesene Patient darf sich erneut in Kur geben. Löschen oder komplett in die Tonne treten sind hier die neuen Gelüste des behandelnden Frontend-Entwicklers und Semantisierung lautet das Heilmittel der Stunde. Damit ist die inhaltsbezogene Strukturierung des Contents durch die dazugehörigen Elemente beispielsweise für Überschriften (h1-h6), Listen (ul, ol, dl), Datentabellen (table, thead, tbody, caption, tfoot, tr, th, td) usw. gemeint. Semantisch gesehen wird für die Eingrenzung bestimmter Bereiche das
-Element eigentlich nur deshalb verwendet, weil Elemente wie
, , oder
in HTML nicht existieren. Semantisch greift hier das Sprichwort: „Every div is a hole in HTML“ und sollte eben nur dann eingesetzt werden, wenn es keine semantische Alternative gibt. Hoffnung auf Änderung ist hier eher unangebracht, denn für die Spezifikation von XHTML 2 hat es nur das Element (für navigation list) auf die Agenda der neuen Elemente geschafft und wiederum besticht durch seine fehlende Abwärtskompatibiliät. Man begegnet der DIVitis auch immer wieder bei CMS-Herstellern. Verständlicherweise haben diese die Aufgabe, möglichst alle Eventualitäten im Sinne ihrer Kunden abzudecken. Verstärkt werden diese Absichten noch durch das Einbinden von einzelnen iIDs und Klassen bei zahlreichen Elementen wie in Navigationsmenüs. Doch in der Regel werden hier eher Wissenslücken kompensiert, als dass diese elefantös anmutenden Identitäts- und Klassenpartys wirklich sinnvoll zum Einsatz kommen.

Gesund und rund?

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

s und Hintergrundbilder bei gleichzeitiger Ignoranz des eigentlichen Inhalts dieser Boxen Code-Organismen gezüchtet, die uns dieses Gimmick schmackhaft machen sollen. „Operation geglückt, Patient tot“ sollte hier meist das Urteil lauten. Warum? Zumeist werden in solchen Konstrukten alle semantischen Tags ignoriert, die den Inhalt umgeben. In der Regel erübrigen aber genau diese sowieso den Einsatz zusätzlicher
s. Selbst wenn man die potenziellen Einsatzgebiete noch nicht exakt kennt, hilft die Frage, was denn in solchen Boxen überhaupt enthalten sein könnte. Navigationsmenüs? Kalender? (Such-)Formulare? Linklisten? Teaser mit Überschrift, Textauszug und Link zum Artikel? Der Artikel selbst? All diese Beispiele haben inklusive des umgebenden
s mindestens vier Tags, die ausreichen, um mit Hintergrundbildern und CSS den gewünschten Effekt zu erzielen. Es ist ja durchaus legitim, zur didaktischen Darstellung
s zu verwenden, aber ein (eindringlicher!) Hinweis darauf, dass man die Löcher mit semantisiertem Inhalt füllen sollte, findet sich leider in keinem der auffindbaren Tutorien. Nicht auszudenken, was passierte, würden solche Code-Geschwüre auf die Kassenbeiträge umgelegt. Doch genug der Polemik, schließlich will dieser Artikel auch Lösungen liefern.

Abb. 1: Überschrift und Linkliste in den default-Ansichten von Firefox (hintere Browseransicht) und IE

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:

#links {
width:8.5em;
background:#da8d00 url(ol.gif) 0 0 no-repeat;
}
#links h2 {
Ich bin drin!

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:

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;

Lediglich der letzte Listeneintrag benötigt eine eigene ID, um ihn für das Hintergrundbild verfügbar zu machen:

#links #last {
background:url(ur.gif) 100% 100% no-repeat;
padding:0 0 15px;
}
Legendenbildung

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:

Bildbeschreibung Bildunterschrift

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:

.pic {
width:XXpx;
float:left;
padding:5px 10px;
}

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.

Stefan Blanz arbeitet freiberuflich als Webdesigner, Frontend-Entwickler, Accessibility-Berater und Journalist. Sie erreichen ihn unter office[at]blanzelot.de.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -