Sven Rautenberg: Der heilige Gral des CSS-Designs?

Beitrag lesen

Moin!

Ohne Dir im Allgemeinen widersprechen zu wollen: In meinem speziellen Fall geht es mir nicht um Pixeldesign; das ist den Auftraggebern und Kunden tatsächlich eher egal. Selbstverständlich gebe ich beispielsweise Schriftgrößen relativ an und nicht absolut. Und natürlich weiss ich es zu schätzen, nicht überall Blind-GIFs als Abstandhalter einsetzen zu müssen.

Pixeldesign mit CSS ist aber die erste Stufe, nachdem man die Tabellen hinter sich gelassen hat. :) Dass man dann drauf kommt, dass die totale Positionierungswut auch nicht das Gelbe vom Ei ist, ist Teil des Lernprozesses, und so beabsichtigt. ;)

Mein Problem war aber ein technisches: Etwas lässt sich mit Tabellen lösen und mit CSS eben nicht. Und da stellte sich mir eben die Frage ob es sich dann überhaupt lohnt, so viel wie möglich mit CSS zu machen, wenn man dann doch wieder auf Tabellen zurück greifen muss, wenn es komplexer wird.

Tabellen und CSS sind ja kein Gegensatz - können es ja schon deswegen nicht sein, weil das eine Teil von HTML ist, und das andere eben CSS. HTML geht prima mit oder ohne CSS, CSS alleine ist etwas weniger sinnvoll.

Bleibt also nur die Frage, ob man durch den Einsatz von CSS komplett auf Tabellen verzichten kann. Und die Antwort ist: Nein, kann man nicht. Weil Tabellen einzigartige Eigenschaften haben, die man zwar mit CSS auch anderen Elementen geben könnte, aber die Browser da meist nicht mitspielen. Es ist problemlos möglich, eine klassisch aussehende Tabelle ausschließlich mit <div> zu erstellen - da wird man dann die Klassen "table", "tr" und "td" verwenden, um mindestens die passende display-Eigenschaft zuzuweisen (siehe zweites Beispiel dort).

Um nur ein Beispiel zu bringen: vertical-align bietet nur in Tabellen erweiterte Positionierungsmöglichkeiten. Zum einen gibt es mehr gültige Werte, die man zuweisen kann, zum anderen wirken sich z.B. "top" oder "bottom" ganz anders aus, als außerhalb der Tabelle.

Und der Klassiker dürfte ein unten über alle Spalten abschließender Footer sein, der mit Tabellen tatsächlich am einfachsten herzustellen ist. Aber extra deswegen eine Tabelle einbauen? Tabellen haben ja auch gewisse Nachteile, beispielsweise die Unterbrechung des Bildaufbaus, bis sie vollständig geladen ist.

Ein anderes Beispiel ist die leidige Sache mit width / min-width /max-width. Ich kann anscheinend keinem Objekt eine Breite UND einen Rahmen bzw. ein Padding geben, ohne dass das in Mozilla und IE unterschiedlich aussieht. Klar, es ist der IE, der sich nicht standardkonform verhält (auch wenn das Verhalten des IE in dem Fall meines Erachtens logischer ist), aber für die Praxis spielt die Schuldfrage keine Rolle. Für die Praxis ist nur wichtig, ob es dann überhaupt Sinn macht, diese Werkzeuge einzusetzen, solange man sich nicht auf die verlassen kann.

Es gibt dazu viele Lösungen.

Die Fraktion der HTML-Puristen setzt dazu z.B. "conditional comments" oder gewisse CSS-Hacks ein, die den IE (zumindest den IE 5/5.5) so beeinflussen, dass er es (dank passend umgerechneter Breite) dann doch richtig macht. Der IE 6 wird durch Angabe eines DOCTYPE mit URL in den Standardmodus gebracht und macht von daher keine Probleme.

Die Fraktion der CSS-Puristen setzt statt eines <div> zwei ineinander geschachtelte <div> ein. Das äußere DIV erhält den gewünschten Margin, Border und die feste Breite, wie sie der IE falsch darstellt. Das innere DIV erhält das Padding, aber keine Breitenangabe - und schon funktioniert es genauso gut.

Wem es auf die paar Pixel hin oder her nicht ankommt, dem kann das egal sein. Bei mir kommt es darauf an.

Die unterschiedliche Darstellung des alten IE 5 ist in der Tat das ärgerlichste an der ganzen Geschichte. Er macht auch sonst vieles falsch, teilweise mit dramatischen Auswirkungen (siehe Guillotine-Bug). Zum Glück ist diese Version nicht mehr ganz so verbreitet. :)

- Sven Rautenberg