Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

CSS3 - Alles wird gut?

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

CSS3 - Alles wird gut?

Die nächste Generation der Cascading Style Sheets steht bereits seit einiger Zeit in den Startlöchern. Manche Browser haben bereits einige neue CSS 3-Features eingebaut. Dirk Jesse zeigt, wie der aktuelle Entwurf für CSS 3 das Layout von Webseiten in der Zukunft beeinflussen wird.

Die Entwicklung von Cascading Stylesheets (CSS) bleibt nicht stehen und so liegt der Entwurf für CSS 3 bereits seit längerem auf dem Tisch des World Wide Web Consortium (W3C). Diese nächste Generation beinhaltet zahlreiche Verbesserungen, die die Layoutentwicklung entscheidend beeinflussen werden.

Das Box-Modell und seine Grenzen

Bei dem bestehenden, mit CSS1 eingeführten Box-Modell ergibt sich die Gesamtbreite einer Box aus der Addition des Inhaltsbereiches (width), der Innenabstände (padding) und der Rahmen (border). Aus dieser Regelung ergeben sich für die moderne Layoutgestaltung jedoch einige Nachteile. So lässt sich beispielsweise die Gesamtbreite einer Box nur dann im Vorfeld ermitteln, wenn innerhalb der einzelnen Bestandteile (width, padding und border) keine unterschiedlichen Maßeinheiten verwendet werden. Sollen alle Bestandteile des Box-Modells zum Einsatz kommen, so reduzieren sich die sinnvoll verwendbaren Maßeinheiten auf [px] und [em], denn Rahmenbreiten in Prozentangaben sind bisher nicht erlaubt. Die Freiheiten des Seitenerstellers sind damit von vorn herein stark einschränkt.

Verwendet man hingegen unterschiedliche Maßeinheiten – Breite des Inhaltsbereiches als Prozentwert, Innenabstände in [em] und Rahmenbreiten in [px] – lässt sich mit dem derzeitigen Box-Modell die Gesamtbreite einer Box nicht mehr exakt bestimmen. Während die Breite des Inhaltsbereiches des Containers direkt angegeben werden kann, kann die Gesamtbreite der Box (der für die Layoutgestaltung wichtigere Wert) erst beim Rendering dynamisch vom Browser ermittelt werden. Dieser Umstand verkompliziert derzeit die Erstellung flexibler Layouts noch unnötig. Beseitigen lässt sich diese Designschwäche von CSS bisher nur durch die Verschachtelung mehrerer Boxen und damit mit zusätzlichem Markup.

Neue Möglichkeiten mit CSS 3

box-sizing – ein alternatives Box-Modell

Mit der Eigenschaft box-sizing hält ein alternatives Box-Modell Einzug in CSS 3. Dieses soll die oben beschriebene Desginschwäche beseitigen, indem nach Aktivierung durch box-sizing:border-box die Angaben für width als Gesamtbreite interpretiert werden. Innenabstände und Rahmen werden von dieser Gesamtbreite subtrahiert. Damit kann die Gesamtbreite direkt vorgegeben werden und die effektiv verbleibende Nutzbreite im Innenraum der Box wird vom Browser dynamisch festgelegt. Durch diese Änderungen haben padding und border keinen Einfluss mehr auf die Gesamtbreite einer Box, was den Umgang mit verschiedenen Einheiten und flexiblen Breiten enorm vereinfacht.

Dieses neue Box-Modell stellt keinen Ersatz, sondern lediglich eine Alternative dar. Zwischen dem alten Box-Modell von CSS 1 (box-sizing:content-box) und dem alternativen Modell von CSS 3 (box-sizing:border-box) kann beliebig umgeschaltet werden.

calc() – Rechnen innerhalb von CSS

Der aktuelle Entwurf für CSS 3 enthält noch einen weiteren interessanter Ansatz, dem zu Beginn beschriebenen Designproblem Herr zu werden. Dieser Ansatz sieht vor, dass es in Zukunft möglich sein wird, neben konkreten Größenangaben auch eine Rechenvorschrift zu übergeben. Ein Beispiel für zwei nebeneinander liegende flexible Boxen:

#left {
float:left;
padding: 0 1em;
border-right: 1px #888 dotted
width: calc( 30% - 2*1em - 1px );

}

#right {
float:right;
padding: 0 1em;
width: calc( 70% - 2*1em );
}

Durch die Möglichkeiten der neuen Funktion calc() ist es eigentlich egal, mit ob mit dem alten oder dem neuen Box-Modell gearbeitet wird. Durch die Rechenvorschrift können verschiedene Einheiten beliebig miteinander kombiniert werden. Für der Gestaltung von Boxen mit flexibler Breite steht damit gleich noch ein zweiter Lösungsansatz bereit.

Column – Spaltensatz mit CSS

Noch heute basieren viele Layouts auf Tabellenkonstrukten – dem Gestaltungsmittel der 90er Jahre des letzten Jahrhunderts. CSS 2 sieht keinen Spaltensatz vor und erfordert ein Umdenken des Designers bei der Layoutentwicklung. Die Schwierigkeiten, die sich aus dieser Entscheidung des W3C ergeben, sind Webdesignern bestens vertraut. Nur sehr langsam haben sich moderne CSS-basierte Layouttechniken entwickelt, die dieses Manko des CSS-Standards mit zunehmend fehlerfreier Unterstützung der Browser vergessen lassen. In CSS 3 wird der allseits beliebte Spaltensatz über die Eigenschaft column nun endlich Einzug in den CSS-Standard finden.

#3col_container {
column-count: 3;
column-gap: 20px;

...
}

Über die Eigenschaften column-count wird die Anzahl der Spalten innerhalb eines Containers festgelegt. Der Wert für column-gap regelt den horizontalen Abstand zwischen den einzeln Spalten. Auf diese Weise wird die effektive Breite der Spalte durch den Browser ermittelt. Der Designer gibt lediglich die Anzahl der gewünschten Spalten vor. In erster Linie eignet sich diese Eigenschaft zur Aufteilung von Texten in mehrere nebeneinander liegende Spalten. Ob die Flexibilität dieser Eigenschaft jedoch ausreicht, die mittlerweile recht hohen Ansprüche an CSS-basierte Spaltenlayouts zu erfüllen, um die derzeitigen Techniken ersetzen zu können, wird sich erst noch zeigen müssen.

Unabhängig davon können Sie sich auch schon heute ein Bild von den Möglichkeiten des CSS 3-Spaltensatzes machen, wenn Sie den folgenden Links mit dem Firefox Browser folgen, der die Eigenschaft bereits unterstützt.

Wohin geht die Reise und wer bleibt zurück?

Im ersten Moment sieht die Zukunft aus wie ein Schlaraffenland. Wenn da nicht die Bedenken wären, die – je mehr ich über das Thema nachdenke – sich immer klarer abzeichnen.

Browserweichen für CSS3

Der Umstand, dass sich CSS-Layouts langsam in der breiten Masse durchsetzen ist zu einem großen Teil dem Fakt geschuldet, dass sich an dem etablierten Standard seit vielen Jahren nichts geändert hat. Bereits der IE5.0 bot eine recht ordentliche CSS2-Unterstützung doch erst mit frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei. Dazwischen liegen 6 Jahre. Auch andere Browser haben Zeit für den Reifeprozess benötigt.

Die Neuerungen von CSS 3 ermöglichen eine völlig neue Denkweise bei der Layouterstellung. Der Spaltensatz und die Möglichkeiten des neuen Box-Modells können zu erheblichen Vereinfachungen der Quelltextstruktur einer Webseite führen. Doch in der Realität müssen Webdesigner auch jetzt schon eine Vielzahl an Browsern und dabei jeweils in zahlreichen mindestens zwei oder mehr Generationsstufen unterstützen. Das wird sich auch nach der Einführung von CSS3 nicht großartig ändern.

Doch wie soll man die neuen Techniken einsetzen, wenn gleichzeitig ältere Browsergenerationen noch mit dem gleichen CSS klar kommen sollen? Eine theoretische Möglichkeit wären CSS-Browserweichen. Auf diese Weise ließen sich alte Browser mit reiner CSS2.x-Unterstützung gezielt mit gesonderten Stylesheets versorgen. Ob das reicht, ist dabei noch fraglich denn beispielsweise beim Spaltensatz könnten mit CSS 3 selbst aufwändige CSS-Layouts auf nur wenige erforderliche Container zusammen schrumpfen. Die Möglichkeiten von CSS 3 lassen sich vermutlich erst dann voll ausschöpfen, wenn auf CSS 2 (bei dem zusätzliches Markup benötigt würde) keine Rücksicht mehr genommen werden braucht.

Box-Modell-Chaos

Wer in dem neuen Box-Modell das Konzept der alten Internet Explorer-Versionen erkannt hat, liegt nicht daneben. Microsoft hat bereits beim IE5 die Probleme erkannt und ein fortschrittlicheres Box-Modell implementiert. Leider verstieß es zum damaligen Zeitpunkt gegen den W3C-Standard und hat damit die Layoutentwicklung nicht wirklich vereinfacht. Der Internet Explorer 6 hat das Box-Modell zumindest im Standardkonformen Darstellungsmodus korrekt interpretiert und im IE7 funktioniert es endlich auch im Quirks Modus.

Und jetzt, wo der Browser endlich macht, was der Standard vorgibt, wird mit CSS 3 das "fehlerhafte" Box-Modell des IE plötzlich offiziell eingeführt. Ich bin gespannt, welche Hack-Konstrukte allein aus dieser Problematik in der Versionsfolge dieses Browsers entstehen.

Ausblick

Auf Grund der bisher ungelösten Probleme für den Übergang von CSS 2 auf CSS 3 wäre es wohl das Beste, wenn der Wechsel noch ein Weilchen auf sich warten lassen würde. Die Browser-Entwickler benötigen ausreichend Zeit, um die Funktionalität in ihre Software zu integrieren und ausgiebig zu testen. Niemandem ist mit einem fehlerbehafteten CSS 3-Browser geholfen. Wir werden zudem damit rechnen müssen, dass auch unter den wichtigen Browsern der ein- oder andere sein wird, der mehr als nur einen Generationswechsel benötigt, um den kommenden neuen Standard zu unterstützen. Wenn es schneller geht, wird es allen zugute kommen. Allerdings glauben – das hat die Erfahrung gelehrt – mag ich an einen schnellen Umstieg nicht.

Bereits heute unterstützten zumindest einige moderne Browser einzelne der zahlreichen neuen Funktionen von CSS 3. In den weiterführenden Links am Ende des Beitrags finden Sie daher einige Beispielseiten, auf denen Sie in Verbindung z.B. mit dem Firefox schonmal CSS 3-Luft schnuppern können.

Fazit

CSS 3 bringt spannende und hilfreiche Neuerungen für die Entwicklung von CSS-Layouts. Allerdings sind wir von der Einführung vermutlich noch weit entfernt und auch dann ist noch ein gutes Stück zu gehen bis die breite Anwendung sinnvoll möglich wird. Vielleicht sehe ich den kommenden Weg aber auch einfach zu pessimistisch. In diesem Punkt würde ich mich jedenfalls gerne irren.

Quellen:

  1. SelfHTML: Das Box-Modell
  2. webkrauts.de: CSS der Zukunft
  3. webkrauts.de: Festes vs. flexibles Layout
  4. A List Apart: Introducing the CSS3 Multi-Column Module
  5. Joost de Valk: CSS 3 Preview
  6. CSS4You: Darstellungsmodi der Webbrowser

Kommentare

Felix
am 10.12.2006 - 00:18

So schön, wie's alles klingt... Ich muss Dirk zustimmen, bis CSS3 Alltag wird, bin selbst mit meinem Studium fertig :-)

Permanenter Link

BenediktRB
am 10.12.2006 - 12:37

Insgesamt ein schöner Artikel.
Die column Eigenschaft und die calc Funktion sind wirklich sehr nützlich.
Auch wenn es noch dauern wird, freuen kann man sich wohl auf ein leichteres Arbeiten.

Permanenter Link

Zen
am 10.12.2006 - 18:11

CSS3 ist doch noch garnicht veröffentlich?

http://www.w3.org/Style/CSS/current-work

Das beste Feature ist für mich die Möglichkeit mehrere Hintergrundbilder gleichzeitig zu definieren. Dann kann man endlich fluid Boxen mit runden Ecken ohne ineinander verschachtelte div's lösen.

Permanenter Link

Dirk
am 10.12.2006 - 20:04

Hallo Zen,

ja, CSS3 ist noch weit entfernte Zukunftsmusik. Selbst CSS2.1 hat noch nicht finalen Status und bisher lassen sich aufgrund der fehlenden Unterstützung durch den IE nicht einmal diese Erweiterungen in vollem Umfang nutzen.

Permanenter Link

Jens Meiert
am 10.12.2006 - 21:15

Für Interessierte: Der letztjährige Adventskalender stellte bereits einige dieser sowie weitere Neuerungen in CSS 3 vor. Natürlich noch aktuell.

Permanenter Link

.carsten
am 10.12.2006 - 22:10

Was mir nicht in den Sinn kommen will ist, warum man auf einmal beim Boxmodell in die umgekehrte Richtung umschwenkt. Ich sehe das nicht gerade mit Freuden, denn es ergeben sich vermutlich Abwärtskompatibilitäts-Probleme. Konnte man noch Hacks für einen Browser schreiben, so ist das dann vermutlich für mehrere nötig.

Die Spalten sind zwar außerhalb des Printbereiches nicht mein Ding, da ich meine, daß es noch weniger zum Lesen am Bildschirm verleitet als es Text derzeit eh schon tut. Aber es ergeben sich mehr und einfacherere Möglichkeiten.

Permanenter Link

Dirk
am 10.12.2006 - 22:59

Hallo Jens,

Dein Artikel ist als 2. Punkt in den angegebenen Quellen bereits verlinkt gewesen. Da deine letztjährige Zusammenfassung sehr ausführlich war, habe ich mich auch bei diesem Artikel auf die Diskussion des Boxmodells beschränkt.

@Carsten
Das geänderte Box-Modell macht schon Sinn, da es bei der Layoutgestaltung viele Dinge vereinfacht. Das Kompatibilitätschaos lässt sich nur vermeiden, wenn bis zur Einführung noch ausreichend Zeit bleibt, um die Browser dafür fitt zu machen.

Permanenter Link

Elmar
am 10.12.2006 - 23:04

Die erweiterten Print-Fähigkeiten hätte ich jetzt schon gerne, insbesondere Kopf- und Fußzeilen mit variabel berechneten Texten sowie Querverweise und Inhaltsverzeichnisse mit berechneten Seitenzahlen.

Ich habe den Eindruck, das Printlayout wird meist vernachlässigt, selbst die aktuellen Möglichkeiten sind in den Browsern nicht sauber umgesetzt, z.B. Orphans und Widows sowie Verbot von Seitenumbrüchen z.B. nach einer Überschrift.

P.S. Kennt jemand eine gute Lib zum Erzeugen von PS aus HTML, die CSS 2 beherrscht? Die aktuelle Variante Firefox -> PostScript-Datei -> PDF ist zeitaufwändig (oder lässt sich das automatisieren für Skripte?).

Permanenter Link

Daniel Reckling
am 11.12.2006 - 08:37

ereits der IE5.0 bot eine recht ordentliche CSS2-Unterstützung doch erst mit frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei.

Sehr gewagte Aussage ;-)

Permanenter Link

Dirk
am 11.12.2006 - 08:47

Hallo Daniel,

Sehr gewagte Aussage ;-)

nach meinen Erfahrungen mit YAML ist die CSS2-Unterstützung des IE7 deutlich verbessert. Probleme im Webdesign-Alltag ergeben sich eher aus der fehlenden Unterstützung für CSS2.1.

Wenn Du Hinweise zu neuen CSS-Bugs des IE7 hast, immer her damit.

Permanenter Link

.carsten
am 11.12.2006 - 12:58

@Dirk
Also ich brauche keine Umstellung, weil ich das bisherige Modell recht unkompliziert fand. Es ist mir dann doch ein zu merkwürdiger Schritt, jetzt das Gegentail von dem für richtig zu empfinden, was man früher meinte. Aber das scheint niemanden so recht zu jucken - es muß wohl alle paar Jahre mal alles ins Gegenteil verkehrt werden, damit die Langeweile verfliegt, weil sich gerade mal alle Browser endlich aneinander annähern...

Permanenter Link

Dirk
am 12.12.2006 - 09:25

@Carsten

die Grenzen des Box-Modells habe ich im Artikel grob umrissen. Moderne, flexible oder elastische Layouts werden dadurch unnötig kompliziert, bzw. der Gestaltungsfreiraum wird eingeschränkt. Die Grenzen des Box-Modells bekommt man sehr schnell zu spüren, sobald man sich von der pixelgenauen, fixen Layoutgestaltung löst.

Permanenter Link

Mathias
am 12.12.2006 - 18:59

Das Multicolumn-Modul ist, soweit ich das verstanden habe, weniger für die klassischen Spaltenlayouts gedacht und geeignet. Es soll da wohl nur um fließenden Text gehen, der automatisch in Spalten layoutet wird (eben Spaltensatz), weniger um eine Alternative zu den jetzt üblichen float-Layouts. Dafür ist m.W. das Advanced Layout Module geplant.

Permanenter Link

Mati
am 13.12.2006 - 14:23

Ja, bei dem Multicolumn-Modul kann man ja so weit ich jetzt gesehen habe gar keine spaltenbreiten angeben.

Ist aber so trotzdem ein nettes feature... habe schon oft erlebt, dass Leute genau nach so was gesucht haben.

Finde das mit dem zusätzlichen Boxmodell super, weil ich mich da echt schon öfters rumgequält habe.

Es ist mir dann doch ein zu merkwürdiger Schritt, jetzt das Gegentail von dem für richtig zu empfinden, was man früher meinte. Aber das scheint niemanden so recht zu jucken

Das herkömmliche Boxmodell bleibt ja bestehen und wird auch der Default sein... es gibt halt nur ne zusätzliche Möglichkeit. Wers nicht nutzen will, lässts halt.

Permanenter Link

Susanne Jäger
am 14.12.2006 - 10:59

Für mich sind ja die Media Queries eine der vielversprechendsten Entwicklungen. Opera kann sie schon lange, Safari bald, wenn erst einmal die Geckos nachziehen, werde ich sicher anfangen, die ernsthaft einzubeziehen. Zumal ich mir gut vorstellen kann, das ebenso "unobstrusive" aber sehr viel beherrschbarer zur Kontrolle flexibler Layouts zu nutzen, wie bisher irgendwelche min-/max-width Konstruktionen.
Sehr schade, dass die bisher fast ausschließlich als Opera-Hacks genutzt werden.

Permanenter Link

Heinz
am 06.04.2007 - 06:39

People use CSS2 all the time, and they even already use parts of WHATWG HTML5 (like the CANVAS element, or contentEditable).
I do not believe that the W3C HTML WG will complete recommendation status by 2008; and neither do I believe that that WG shall be disbanded late 2010.
Specification are usable before being finished but not before those parts are incorporated into User Agents, e.g., browsers. Safari, Mozilla and Opera (since they’re the copyright holders) may be the first to include HTML5 elements and attributes once they become stable, Right?

Permanenter Link

Tobi
am 25.09.2007 - 12:47

Ich verstehe echt die Probleme der Browswer Programmierer nicht, egal aus welchem Hause. Und die Inkompatibilität und das Anpassen einer CSS an X beliebige Browser geht mir schon ordentlich am Keks. Nicht nur dass fast alle Browser irgendwie ihre eigene Interpretation haben, das derzeitige CSS Box Modell ist ein Graus! CSS3 scheint spannend und vernünftig zu sein.

Das vernünftigste wäre eigentlich, dass von nun an sich alle neuen Browser auf CSS3 konzentrieren und maximal bis zu 1 Generation abwärts ein Update oder sowas herausgeben. Man sollte keine Rücksicht auf allzu weit zurückliegende Versionen oder Generationen nehmen, denn genau deswegen geht vieles so schleppend voran. Radikalkur. Dann hätten auch die Designer weniger unnötige Grübel- und Experimentier- und Anpassungsarbeit und es würde endlich mal was weitergehen.

MFG

Permanenter Link

Gerald Martin
am 24.10.2007 - 20:23

Hallo Dirk,
bei meinen Recherchen zum Thema Border-Box-Modell bin ich auf Deinen Artikel gestossen. Habe ihn mit Begeisterung gelesen.
Vielen Dank für die interessanten und detailreichen Infos. Weiter so.
So habe ich nun ein weiteres RSS-Abo ;-)

Gerald

Permanenter Link

Die Kommentare sind geschlossen.