CSS, die Browser und die Tücken des modernen WebDesign

• CSS-Design, CSS-Layout, ja was denn nun?
• CSS-Design, kein Problem
• CSS-Layout und das Boxmodell, Ärger vorprogrammiert
• Die Renaissance des IE-Boxmodells in CSS 3
• Was tun, um Gottes willen?
• An das W3C

Modernes WebDesign – was ist das eigentlich? Wer definiert diesen Begriff, und wo fängt es an? Modernes Webdesign setzt ganz sicher voraus, dass man sich an die Standards des W3C hält. Viele verstehen unter diesem Begriff die Trennung von Inhalt und Gestaltung einer Internetseite, das ist ganz sicher richtig. Inhalt und Struktur einer Internetseite werden mit (X)HTML erstellt, die Gestaltung erfolgt mit CSS.

Doch schon bei der Frage, ob zur Strukturierung und Auszeichnung der Inhalte nun HTML oder XHTML verwendet wird, scheiden sich die Geister. Ist HTML noch zeitgemäss? Nachdem jahrelang an HTML 4.01 nicht mehr gearbeitet wurde, haben viele schon von einem veralteten Standard gesprochen, der nur deshalb noch gültig ist, weil Millionen von Seiten in dieser Sprache geschrieben sind. Ein Standard also, der sich eher an die Browserentwickler richtet (aus Gründen der Abwärtskompatibilität) als an die Webdesigner.

Nun überraschte das W3C die Welt des Webdesign mit der Mitteilung, dass in den nächsten Jahren HTML auf der Basis von HTML 4.01 weiterentwickelt wird, bei voller Abwärtskompatibilität.

Das W3C beugt sich wohl hier dem Willen der Mehrheit:

Pressemitteilung des W3C vom 07.03.2007

Und somit wird diese Diskussion zugunsten der Anhänger von HTML wiederbelebt werden. Ich werde zu diesem Thema demnächst einen gesonderten Artikel verfassen.

Hier soll es jedoch um CSS gehen, die Sprache, mit der die in (X)HTML ausgezeichneten Inhalte “in Form gebracht” werden sollen. Die Gestaltung einer Internetseite mittels CSS hat eindeutig den Vorteil, dass das mit einer ausgelagerten Datei zentral erledigt werden kann. Änderungen an dieser ausgelagerten CSS-Datei sind in allen Dokumenten wirksam, die dieses sogenannte “Stylesheet” laden. Das vereinfacht ein Redesign aller Seiten enorm, da die Änderungen zentral in nur einer Datei erledigt werden können, anstatt hunderte von HTML-Dateien ändern zu müssen.

Ausserdem kann man mit CSS wunderbar verschiedene Stylesheets für unterschiedliche Ausgabemedien definieren, Bildschirm, Drucker, Handys und PDAs, Sprachausgabegeräte und was die Zukunft sonst noch so bringen wird. In diesem Artikel will ich mich aber ausschliesslich mit dem zweifellos wichtigsten Ausgabemedium beschäftigen, dem Bildschirm.

Soweit die Erklärungen für den Laien, jetzt wird es spezieller und komplizierter.

nach oben 

CSS-Design, CSS-Layout, ja was denn nun?

Die Definition der Begriffe Design und Layout ist schwierig. Diese Begriffe haben sich in vielen Sprachen eingenistet und werden teilweise unterschiedlich interpretiert. Das Design umfasst normalerweise den gesamten Schöpfungsprozess um die Erstellung einer Internetseite (oder von irgendwas), einschliesslich dem Layout, das Layout ist per Definition ein Entwurf, ein Plan oder so.

Beides muss normalerweise erledigt werden, bevor die Produktion oder die eigentliche Arbeit losgeht. Bei geschicktem Webdesign kann beides auch nach der “Produktion” oder nach Abschluss der inhaltlichen Arbeiten noch geändert werden.

Der Einfachheit halber verstehe ich im folgenden mal unter Design die farbliche Gestaltung, die Formatierung von Schriftgrösse, -typ, -farbe, das einfügen von Hintergrundbildern usw., und unter Layout die Anordnung der Seiteninhalte auf dem Bildschirm, was ist oben, was unten, was links und was rechts, und wieviel Platz ist wofür da.

Nur, damit wir uns verstehen. Ob das so korrekt ist, sei dahingestellt.

nach oben  

CSS-Design, kein Problem

Die Realisierung des Designs einer Seite mittels CSS ist unproblematisch. Dazu reicht im Prinzip CSS Level 1, das wird von fast allen verbreiteten Browsern ordentlich verarbeitet gleich angezeigt.

Darüber brauchen wir im Prinzip nicht weiter diskutieren, wer heute noch Schriften mit HTML formatiert und Hintergrundbilder per HTML in Tabellenzellen einfügt, macht es sich zum einen unnötig schwer, und produziert im Falle der Hintergrundbilder auch noch nicht valides HTML.

Ausserdem wäre der Arbeitsaufwand bei einer Überarbeitung des Designs aller Seiten unnötig hoch und teuer. Da macht es sich schnell bezahlt, sich mit CSS zu beschäftigen, dann kann man so etwas zentral in einer Stylesheet-Datei erledigen. Nachteile sind mir nicht bekannt, da sieht es beim Layout einer Seite mit CSS schon anders aus.

nach oben 

CSS-Layout und das Boxmodell,
Ärger vorprogrammiert

Das Boxmodell von CSS bis Level 2 sieht so aus:

Die Breite, die ich einer div-Box mittels width gebe, steht dem Inhalt zur Verfügung. Das padding und das border kommen da noch dazu, d. h., die Gesamtbreite einer Box ergibt sich aus width, 2 x padding und 2 x border. Was passiert eigentlich, wenn ich einem div direkt im body horizontal 100% gebe und dazu ein padding von 20px? Habe es gerade nochmal probiert, ich bekomme einen schönen horizontalen Scrollbalken. Die Gesamtbreite der Box beträgt nämlich 100% + 40 Pixel! Hier wird der Fehler dieses Boxmodells besonders deutlich.

Per Definition ist das padding der innere Abstand des Inhalts vom Rand des umgebenden Elements, das margin der äussere Abstand zum Nachbarelement. Da stimmt doch irgend etwas nicht? Wo ist denn nun die Aussengrenze der Box? Wird nicht normalerweise dieser äusseren Grenze das width zugewiesen? Sozusagen als Gesamtbreite der Box?

Jahrelang wurde dem IE5/6 vorgeworfen, er hätte ein Boxmodell-Problem, weil er, abweichend von der fehlerhaften Vorgabe des CSS-Standards, ein eigenes, korrektes Boxmodell enworfen hat. Mit width wird die Gesamtbreite der Box definiert, padding liegt innen und margin aussen, wie es sich gehört. Nur so lässt sich die Gesamtbreite einer Box zuverlässig definieren, egal ob relativ, absolut oder gemischt.

Der Vollständigkeit halber muss ich hier noch erwähnen, dass der IE6 im standardkonformen Modus, also bei ordnungsgemässer DTD, auch das falsche CSS-Boxmodell anzeigt. Den IE6 kann ich also durch ordnungsgemässe Angabe einer DTD dazu bewegen, sich genauso “standardkonform falsch” zu verhalten, wie die anderen Browser.

In Wirklichkeit hat CSS ein Boxmodell-Problem. Dieses falsche Boxmodell wurde starrsinnig über eine Zeit hinweg verteidigt, in der es hiess: “Es kann nicht sein, dass ein Marktführer (Microsoft) die Standards vorgibt, und alle anderen hecheln dem hinterher”. Hier wurde ein Standard den Machtkämpfen geopfert, von einer Institution, die manchmal stark an eine Behörde erinnert.

Leider hat sich Microsoft im IE7 dem geltenden Standard gebeugt. Manchmal gibt eben der Klügere nach, diesmal hätte ich mir aber mehr Stehvermögen von Microsoft gewünscht. Wäre Microsoft standhaft geblieben, würden heute immerhin 50-70% aller Browser das korrekte Boxmodell anzeigen.

Die Frage ist allerdings, ob das W3C dann bereit gewesen wäre, das Boxmodell von CSS noch einmal zu überdenken. Schliesslich musste ja zuerst Microsoft in die Schranken gewiesen werden.

nach oben 

Die Renaissance des IE-Boxmodells in CSS 3

Nachdem es nun alle falsch machen, hat auch das W3C “erkannt”, dass das Boxmodell von CSS falsch ist. Einfach zurückrudern und den Standard berichtigen ist problematisch, da inzwischen wohl hunderttausende, wenn nicht gar Millionen Internetseiten existieren, die nach dem falschen Boxmodell erstellt sind.

Und so wird es wohl in CSS 3 einen Kompromiss geben. Es wird beide Boxmodelle geben, content-box (das alte, falsche Boxmodell) und border-box. Bei border-box liegen sowohl padding als auch border innerhalb von width. Somit beschreibt width die Gesamtbreite der Box, unabhängig von border und padding. Das ist genau das Layout-Instrument, das wir brauchen. In den CSS-Code eingebunden wird das so: (box-sizing: border-box;).

Unter Rücksichtnahme auf die vielen Jahre mit dem falschen Boxmodell und die vielen in dieser Zeit entstandenen Internetseiten wird das falsche Boxmodell wohl die Voreinstellung sein, wenn man das nicht definiert.

Bei den Webkrauts finden Sie einen ausführlichen Artikel zu CSS 3:

CSS 3 – alles wird gut?

nach oben 

Was tun, um Gottes willen?

Die Einführung von content-box und border-box in CSS 3 wäre sicher eine Lösung dieses Problems, aber woher um Gottes Willen soll ich denn in den nächsten Jahren wissen, was die Browser meiner Besucher können? Stellen die eine Box als content-box dar, als border-box oder können die CSS 3?

Wie soll ich nach Verabschiedung von CSS 3 meine Boxen deklarieren? Korrekt als border-box, damit die Anzeige stimmt? Dann habe ich aber wieder das Problem, dass “nicht CSS 3 fähige” Browser meine Boxen als content-box anzeigen.

Oder gar nicht deklarieren oder als content-box, damit alle Browser die Box zwar falsch, aber gleich anzeigen? Funktioniert auch nur, wenn es dann den IE5 nicht mehr gibt, denn der zeigt ja border-box an. Ausserdem würde ja so das falsche Boxmodell nie aussterben.

CSS ist also ein Standard, dessen Boxmodell fehlerbehaftet ist und der durch die unterschiedlichen Anzeigen in den verschiedenen Browsern auch nicht sicherer wird.

Und so einem Standard soll ich das Layout meiner Internetseiten anvertrauen?

Zur Zeit formatiere ich alles, was sicher geht, mit CSS, aber das Layout macht eine einfache, unverschachtelte Tabelle. 6 x padding und 6 x border, so viel Toleranz will ich meinen Seiten, z. B. bei einem klassischen 3-Spalten-Layout, einfach nicht geben.

Der Einsatz von div-Verschachtelungstechniken ist für mich an dieser Stelle auch keine Alternative. Warum soll ich ein Problem mit verschachtelten div lösen, mit ewig langen, komplizierten style-Anweisungen und vielleicht auch noch unter Einsatz von CSS-Hacks, wenn ich das gleiche mit einer einfachen, unverschachtelten Tabelle einfacher, sicherer und browserkompatibel erreichen kann? Da wollen wir doch mal sehen, welcher Code “leichter” ist!

Ist das noch modernes Webdesign? Nein, ist es nicht. Ich trage auch keine moderne Kleidung, und bin trotzdem gut angezogen. Besser jedenfalls als so mancher modebewusste Geck .

Es ist konservatives, sicheres Webdesign. Es funktioniert in allen, auch älteren Browsern, was man von einigen Internetseiten, die nach sogenannten “modernen Webstandards” erstellt sind, nicht behaupten kann.

Gerade im IE5/6, die zusammen immer noch mehr als 50% ausmachen, kommt es immer wieder zu Darstellungsfehlern, da rutscht der Inhalt unter die Navigation oder umgekehrt, da schieben sich Bereiche beim Vergössern übereinander usw.

Und wenn das auf Internetseiten passiert, die modernes Webdesign zum Thema haben, ist das besonders peinlich, aber auch besonders lustig und aussagekräftig.

Wenn alle diese Probleme gelöst sind, und wenn weitere 5-10 Jahre vergangen sind, damit die Browser auch bei den meisten Anwendern auf dem aktuellen Stand sind, dann denke ich nochmal über CSS-Layout nach. Solange lasse ich mir gerne Rückständigkeit vorwerfen, nicht aber, dass ich es nicht anders kann.

Ich mache meine Internetseiten für hier und heute, für die derzeit verbreiteten Browser incl. der etwas älteren, für meine Kunden, für deren (und meine) Besucher und am Ende wahrscheinlich doch zu über 90% für den Bildschirm.

nach oben 

An das W3C:

Bitte macht JETZT den notwendigen harten Schnitt, macht die korrekte border-box zum Standard (Vorgabe für die Voreinstellung), und entschuldigt Euch bei allen Webdesignern dieser Welt und bei Microsoft. Nur so kann das Chaos beim Boxmodell in absehbarer Zeit beseitigt werden.

Und bevor mich alle verprügeln, die davon betroffen wären: man muss dann eben, genau wie bei HTML und XHTML, eine DTD einführen. Dann muss man bei alten Projekten im Idealfall lediglich in die CSS-Datei eine Deklaration einfügen, dass es sich hier um CSS bis Level 2 handelt. Dann können diese Dokumente auch so angezeigt werden, wie sie geschaffen wurden.

Wer viel CSS in seine (X)HTML-Dateien geschrieben hat, muss dann eben auch diese deklarieren, das kann aber durchaus ein Programm erledigen.

PS: Mir ist klar, dass auch dieser Artikel nur an der Oberfläche kratzt. Auf die vielen Möglichkeiten, padding und margin relativ oder absolut zu formatieren, und das durchaus auch gemischt, will ich hier gar nicht eingehen. Solche “Problemlösungen” sind für mich schon die Vorstufe von CSS-Hacks.

Fakt ist: padding ist der innere und margin der äussere Abstand zur Grenze einer Box, dazu gibt es die beiden, so sind sie definiert (auch in vielen anderen Zusammenhängen) und so muss es auch dargestellt werden. CSS sollte da keine Ausnahme sein.

Und somit kann auf die gute alte, aber falsche content-box in CSS 3 getrost verzichtet werden. Ein Webdesigner sollte in der Lage sein, den verbleibenden Platz für die Inhalte auszurechnen.

Weiterer Artikel zum Thema: CSS Boxmodell Chaos – die Lösung

nach oben

Donnerstag, 8. März 2007, 20:40 Uhr

nach oben

zum Kommentar-Eingabeformular (Kommentare überspringen) »

4 Kommentare zu “CSS, die Browser und die Tücken des modernen WebDesign”

1. Sascha Altmann
   Am 30. April 2007 um 03:41 Uhr

   Hallo Gert,

   auf der Suche nach neuen Informationen zum running gag Boxmodell bin ich auf diesen Beitrag gestossen und habe mit einem Lächeln im Gesicht zur Kenntnis genommen, dass es auch noch ander Menschen auf dieser Welt gibt, die der ganzen Chaostheorie Webdesign wie Spartaner mit erhobenem Schild entgegentreten. Ich selber bin 33 und habe die ganzen Aufs und Abs im Bereich Webdesign nur zu oft am eigenen Leibe erfahren. Man hat sich angepasst, sich verbogen, man hat Browserweichen geschrieben und ist manches male fast schon in den Tiefen des Liquid Designs ertrunken. Ich teile Deine Meinung. Tabellen sind altmodisch, das mag sein. Aber die Webseiten die ich für meine Kunden gestalte laufen auf allen Browsern. Und CSS ist die Sahnehaube. PHP includes und einige andere nützliche PHP Befehle machen das Webdesign zu dem was eigentlich für uns Designer sein sollte: Spass! Und keine wissenschaftliche Evolution. Ich passe mich sehr gerne an. Zum jetzigen Zeitpunkt ist der Versuch sich anzupassen gleichzusetzen mit dem Versuch über Wasser zu laufen. Egal was man macht, früher oder später säuft man ab!
   In diesem Sinne, frohes Schaffen!

   Sascha -Soulsliver- Altmann

2. Mario
   Am 21. Mai 2007 um 10:13 Uhr

   Servus Gert,
   bin 44 und seit mitte der 90er Webdesigner. Seit 2 Monaten versuche ich auf Div´s, Box, barrierefrei etc. um zu steigen.

   Was ich hier lese geht mir seit den Umstellungsversuchen durch den Kopf. Anfang Dachte ich noch, wird schon werden. Ab und an stellte ich meinen Verstand in Frage. Glaubte ich es begriffen zu haben wurde ich auch schon durch ein Browsercheck eines anderen überzeugt. Browser Hack, doppelte Styles, weglassen, Kompromisse…!

   Mit Tabellen hätte ich in der Zeit schon zig Seiten produziert.

   Dem was du hier geschrieben hast kann man nur zu stimmen.

   Gruß Mario

3. GE
   Am 21. Mai 2007 um 13:15 Uhr

   Hallo,
   danke für die zustimmenden Kommentare, ich hatte eigentlich erwartet, dass mich die “Standardistas” zerreissen .

   Will aber nicht nur meckern. Es gibt eine ganz einfache Möglichkeit, mit den Macken der Browser bezüglich des CSS-Boxmodells zurechtzukommen:

   CSS Boxmodell Chaos – die Lösung

   Das ist nach meinem Wissen der einzige Weg, eine zuverlässige Anzeige in allen Browsern ohne Einsatz von CSS-Hacks zu erreichen.

4. Achim
   Am 18. Juli 2007 um 23:26 Uhr

   Hallo Gert,

   ich war gerade auf der Suche nach CSS und Tabellen gemischt und bin so auf diesen Artikel gestoßen.
   Na da versuch ich ‘Modernes Layout’ zu machen und dann les ich das hier
   Ich wollte es auch nie laut aussprechen, aber mit Tabellen, so wie ich es früher gemacht habe, wäre ich auch mit meinem Projekt schon fertig. Vor allem weil ich das ja dynamisch erstelle. Und nun hab ich das Problem, dass sich meine ‘Modernen Layouts’ nicht dem dynamischen Inhalt anpassen. Pfff…
   Vielleicht sollte ich wieder zu Tabellen wechseln..

   Gruß Achim

Schreibe einen Kommentar

Kommentare erscheinen erst nach manueller Freischaltung.

nach oben