Anzeige
Anzeige
UX & Design
Artikel merken

Ein Ausblick auf CSS3: Layout hoch drei

Die Entwicklung von Cascading Stylesheets (CSS) bleibt nicht stehen – bereits seit längerem liegt der Entwurf für CSS3 auf dem Tisch des World Wide Web Consortium (W3C). Die nächste Generation der Layout-Sprache beinhaltet zahlreiche Verbesserungen, die entscheidenden Einfluss auf die Layoutentwicklung haben werden. Ein neues Box-Modell soll Design-Schwächen beseitigen und auch der Spaltensatz findet Einzug in den CSS-Standard.

5 Min. Lesezeit
Anzeige
Anzeige

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 vornherein stark einschränkt.

Anzeige
Anzeige

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, also mit zusätzlichem Markup.

Neue Möglichkeiten mit CSS3

Mit der Eigenschaft „box-sizing“ hält ein alternatives Box-Modell Einzug in CSS3. 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. Das neue Box-Modell stellt keinen Ersatz, sondern lediglich eine Alternative dar. Zwischen dem alten Box-Modell von CSS1 (box-sizing:content-box) und dem alternativen Modell von CSS3 (box-sizing:border-box) kann beliebig umgeschaltet werden.

Anzeige
Anzeige

Der aktuelle Entwurf für CSS3 enthält noch einen weiteren interessanten Ansatz, um 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:

Anzeige
Anzeige
CSS3
#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 );
}

Listing 1

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

Noch heute basieren viele Layouts auf Tabellenkonstrukten – dem Gestaltungsmittel der 90er Jahre des letzten Jahrhunderts. CSS2 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 CSS3 wird der allseits beliebte Spaltensatz über die Eigenschaft „column“ nun endlich Einzug in den CSS-Standard finden.

Anzeige
Anzeige
CSS3
#3col_container {
column-count: 3;
column-gap: 20px;
...
}

Listing 2

Ü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 CSS3-Spaltensatzes machen, wenn Sie den beiden Links [1] und [2] 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 sich immer klarer abzeichnen. 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 Internet Explorer 5 bot eine recht ordentliche CSS2-Unterstützung, doch erst mit dem frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei. Dazwischen liegen sechs Jahre. Auch andere Browser haben Zeit für den Reifeprozess benötigt.

Anzeige
Anzeige

Die Neuerungen von CSS3 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 diese jeweils in zahlreichen, mindestens zwei oder sogar mehr Generationsstufen unterstützen. Dies wird sich auch nach der Einführung von CSS3 nicht ä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 CSS3 selbst aufwändige CSS-Layouts auf nur wenige erforderliche Container zusammenschrumpfen. Die Möglichkeiten von CSS3 lassen sich vermutlich erst dann voll ausschöpfen, wenn auf CSS2 (bei dem zusätzliches Markup benötigt würde) keine Rücksicht mehr genommen werden braucht.

Wer in dem neuen Box-Modell das Konzept der alten Internet-Explorer-Versionen erkannt hat, liegt nicht falsch. Microsoft hat bereits beim Internet Explorer 5 die Probleme erkannt und ein fortschrittlicheres Box-Modell implementiert. Leider verstieß es zum damaligen Zeitpunkt gegen den W3C-Standard und hat damit die Layoutentwicklung erschwert. Der Internet Explorer 6 hat das Box-Modell zumindest im standardkonformem Darstellungsmodus korrekt interpretiert, im Internet Explorer 7 funktioniert es endlich auch im Quirks-Modus (Modus zur Sicherung der Abwärtskompatibilität).

Anzeige
Anzeige

Ausblick

CSS3 bringt spannende und hilfreiche Neuerungen für die Entwicklung von CSS-Layouts. Auf Grund der bisher ungelösten Probleme für den Übergang von CSS2 auf CSS3 erscheint es sinnvoll, dass der Wechsel noch eine Weile auf sich warten lässt. 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 CSS3-Browser geholfen. Einige der wichtigsten Browser werden vermutlich mehr als nur einen Generationswechsel benötigen, um den neuen Standard zu unterstützen.

Bereits heute unterstützten zumindest einige moderne Browser einzelne der zahlreichen neuen CSS3-Funktionen. In den weiterführenden Links, die Sie über den Softlink am Ende des Artikels erreichen, finden Sie einige Beispielseiten, auf denen Sie in Verbindung mit dem Firefox-Browser schon mal CSS3-Luft schnuppern können.

Der Artikel wurde urspünglich am 10.12.2006 im Adventskalender der
Webkrauts

[3] veröffentlicht.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige