Tipps und Tricks: HTML und CSS

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

Komponentenorientiert vs. nicht komponentenorientiert

Relevante Beiträge