CSS Regions lassen das Layout überall fließen
Kommentare

CSS Regions ist ein W3C Working Draft, das es ermöglicht, Text in verschiedene Bereiche innerhalb einer Seite fließen zu lassen. Das besondere daran ist, dass diese Regionen keine Einschränkungen mehr

CSS Regions ist ein W3C Working Draft, das es ermöglicht, Text in verschiedene Bereiche innerhalb einer Seite fließen zu lassen. Das besondere daran ist, dass diese Regionen keine Einschränkungen mehr in ihrer Position oder Größe haben. Daher würde man mit einem Spaltenlayout gerade einmal an der Oberfläche des vollen Leistungsumfangs der neuen Spezifikation kratzen. Es folgt ein kleiner Überblick über die schönen, neuen Möglichkeiten von CSS Regions, wie sie Blogger Lee Mallabone zusammengefasst hat.

Wo und wann? Tatsache ist, dass CSS Regions in vielen Browsern leider noch nicht sichtbar sind. Zwar schlägt die caniuse page einen IE10+ oder eine Beta von Safari vor, doch gibt es diverse Einschränkungen, die zu beachten sind:

  • IE10+ funktioniert zwar, erfordert aber, dass der Content aus einem iFrame kommt.
  • Safari 6.1 funktioniert mit dem –webkit-Präfix, ebenso MobileSafari in iOS7.
  • Google Chrome Canary (oder Version 29+ ) arbeitet sobald die experimental Web Platform features aktiviert sind sowie unter Verwendung des Präfix –webkit.
  • Opera funktioniert nur, wenn Sie eine WebKit-basierten Version verwenden sowie das Präfix –webkit.
  • Firefox wird derzeit noch nicht unterstützt und nutzt stattdessen das CSS Overflow Draft.

Einen feingranularen Blick auf die Rendering-Engine –Unterstützung bietet die Testsuite-Ergebnisseite der CSS –Arbeitsgruppe.

Wie? Regions bestehen aus zwei einfache Komponenten: einem Block aus Content, von dem der Inhalt fließt und einem oder mehreren Blöcken, in die eben dieser Inhalt hineinfließt. In Styling und Struktur der Regionen sind Wenentwickler völlig frei: Spalten hinzufügen, flexible Boxen und flüssiges Layout – alles möglich. Ein interaktives Beispiel gibt es hier.

Warum? Mit CSS Regions können wir mehr Spalten hinzufügen oder Transformationen, Übergänge und Animationen verwenden, um vollrotierenden Inhalt zu kreieren, der sich mit der Fenstergröße erweitert und neu ausrichtet. Wir können Responsive Layouts erstellen, die sich Smartphone-, Tablet- oder Desktop- Layouts anpassen und unsere Fluid Layouts auf super-massive Displays anpassen, anstatt die Breite zu limitieren oder absurd zu strecken. Book.js gibt uns bereits einen Ausblick darauf, wenn sich der Browser-Support für CSS Regions weiter verfestigt: Book.js ist eine experimentelle JavaScript-Bibliothek, die unser semantisches Mark-up mit einer simplen Konfiguration nutzt, um Web Pages wie Buchseiten aussehen zu lassen. Unter der Haube steckt CSS Regions. Sobald MobileSafari in Aktion tritt (wie in der iOS7 WWDC Keynote angekündigt), wird die Kombination von Gesten auf Touch-Geräte mit den Regions die Möglichkeit hergeben, interaktive, Magazin-artige Erfahrungen für das Web zu bauen.

Eine einfache Demonstration der Mächtigkeit von CSS Regions ist eine Fenster-Anpassung. Das Beispiel aus dem Demo-Video enthält ein einzelnes div an Inhalten, das über vier Regionen fließt. Der Re-Flow zwischen den Regionen erfolgt mit der Anpassung der Fenstergröße und stellt sicher, dass jedes Wort nahtlos in die richtige Region wandert. Wer es einmal selbst versuchen will, kann dies auf http://codepen.io/guybrush0/pen/ExyJf.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -