Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 8

Ein Ausblick auf CSS3: Layout hoch drei

    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.

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.

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.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst