kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Regions

Es ist durchaus eine anspruchsvolle Aufgabe eine Website inhaltlich interessant, optisch ansprechend und responsive herzustellen. Komplexe und flexible Magazin-Layouts mit Infografiken, verschiedenen Text-Boxen, Marginalien usw. sind oft nur mit erheblichem Aufwand zu realisieren. Das Problem: Wir haben keine Möglichkeit zusammenhängende Inhalte nacheinander durch mehrere divs oder article-Elemente fließen zu lassen. CSS Regions bieten eine Lösung.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

Was sind CSS Regions?

CSS Regions sind eine von Adobe entwickelte Technologie für flexible Web-Layouts. Wenn ihr euch mit InDesign auskennt, sind euch die Überhangtexte sicher ein Begriff. Sobald in InDesign in einem Textrahmen mehr Inhalt untergebracht werden soll, als Platz zur Verfügung steht, hat man als Layouter die Wahl. Entweder der Text wird abgeschnitten, oder man verkettet mehrere Textrahmen miteinander und lässt den Inhalt von einem Rahmen in den nächsten fließen. Das ermöglicht dann auch das problemlose Hinzufügen von weiteren Texten am Anfang eines Dokuments.

Textverkettungen in InDesign
Textverkettungen in InDesign

CSS-Regions sind mit Überhangtexten sehr vergleichbar. Im HTML-Markup befindet sich ein Quell-Container mit dem gesamten Inhalt, sowie verschiedene Strukturelemente in die der Inhalt hineinfließt. Per CSS kann der Inhalt in einer beliebigen Reihenfolge durch die Strukturelemente geleitet werden. Komplexen Layouts mit nicht-linearem Aufbau steht somit nichts mehr im Weg.

Browser-Support für CSS-Regions

Zum Zeitpunkt dieses Beitrags ist der Browser-Support noch extrem eingeschränkt. Kein einziger Desktop-Browser unterstützt die Funktion standardmäßig. Im Safari unter iOS7+ sind Regions allerdings verfügbar, was insbesondere für Magazin-Layouts auf Tablets interessant werden dürfte.
In Chrome (Desktop) können CSS-Regions im Rahmen der »experimentellen Webplattformfunktionen«, einem Teilbereich der Entwickler-Tools, aktiviert werden. Genau das wollen wir nun tun.

CSS-Regions in Chrome aktivieren

Öffnet Chrome und gebt in die Adresszeile: chrome://flags ein. Ich nutze parallel zu Chrome auch die Entwickler-Variante Chrome Canary, damit ich meinen Haupt-Browser nicht mit experimentellen Funktionen belasten muss.

Chrome Canary
Chrome Canary

Nachdem ihr den o.g. Befehl eingegeben habt, erscheint ein Tab mit Entwickler-Funktionen. Aktiviert hier das Feature »Experimentelle Webplattformfunktionen aktivieren«. Anschließend startet ihr den Browser neu. Ab jetzt versteht euer Chrome CSS Regions.

CSS Regions in anderen Browsern aktivieren

Auf der Adobe-Website findet ihr eine Anleitung für Opera & Co: Enable Cutting-Edge Graphical & Layout Features

CSS Regions Polyfill

Auf seiner Web-Plattform stellt Adobe ein experimentelles Polyfill für CSS-Regions bereit.

CSS Regions einsetzen

Schauen wir uns nun den CSS-Code an. CSS-Regions arbeiten mit einer Quelle (Region) und verschiedenen Ziel-Containern (Region Chains). Verknüpft werden alle Elemente über einen gemeinsamen Bezeichner (Named Flow), denn es ist möglich verschiedene unabhängige Verkettungen herzustellen.

flow-into: name-des-flows;
kennzeichnet die Quelle (Region), von der die Inhalte in die Ziel-Container laufen sollen.
flow-from: name-des-flows;

kennzeichnet einen Ziel-Container (Region Chain) in welchen Inhalte hineinfließen

Ich habe ein sehr elementares Praxis-Beispiel konstruiert um die Basis-Funktionalität zu verdeutlichen.


<div class="region">Hier steht ganz viel Text … </div>

<div class="region-chain"></div>
<div class="region-chain"></div>
<div class="region-chain"></div>
<div class="region-chain"></div>
<div class="region-chain"></div>
<div class="region-chain"></div>

.region {
  -webkit-flow-into: demo-flow;
  flow-into: demo-flow;
  border:2px solid #F09;
  padding:10px;
  background:#FCF;
}

.region-chain {
  -webkit-flow-from: demo-flow;
  flow-from: demo-flow;
  width: 23%;
  height: 350px;
  float: left;
  margin: 10px;
  background:#CFF;
  border:1px solid #0FF;
  padding:15px;
}

Das war schon alles. Wichtig für CSS Regions sind in beiden Selektoren lediglich die ersten beiden Zeilen. Alle anderen CSS-Eigenschaften sollten nachvollziehbar sein. Sie dienen dem Aufbau des Beispiels. Für die nachfolgende Demo habe ich noch ein Bild eingebaut und das alternative Box-Modell verwendet.

Beispiel anzeigen

CSS Regions Experiment

Zur Veranschaulichung habe ich noch eine zweites, interaktives Experiment erstellt. Das »Design« ist angelehnt an die momentane CSS-Regions-Website von Adobe. Tippt auf der linken Seite etwas Text in das Eingabefeld und schaut dabei zu, wie sich das Layout nach und nach mit Inhalt füllt.

Experiment anzeigen

Screenshot des Experiments
Screenshot des Experiments

CSS-Regions in Edge Reflow CC

CSS Regions werden auch von Adobes Design-Tool Edge Reflow unterstützt. Eine Einführung zu Reflow habe ich hier veröffentlicht, wenn euch interessiert wie Regions in Reflow aktiviert und eingesetzt werden, lest bitte meinen Artikel CSS Regions mit Adobe Edge Reflow.

Links / Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

11 Kommentare

  1. Aneas Nemorosus

    Verfasst am 11. Oktober 2013 um 12:05 Uhr.

    Ich verstehe tatsächlich nicht, warum ich ein „Spaltenkonzept“, dass aus der Notwendigkeit eines „Textumbruches“ und der Schwierigkeit des Textflusses bei Zeitungen entwickelt wurde, auch im Web umsetzen sollte. In Spalten „lesen“ ist doch mehr als unnötig im Web!

    Ich hoffe es zieht nicht in die normalen Browser ein, denn ich sehe mich schon „nach unten lesen“ und dann „nach oben scrollen“, damit ich „weiterlesen“ kann…

    Kann mir denn jemand verraten, welchen Sinn das machen sollte?!

    • Jonas Hellwig

      Verfasst am 11. Oktober 2013 um 12:33 Uhr.

      Spalten sind mit Multi-Column-Layouts ja bereits möglich. Regions verfolgen da eher einen Magazin-ähnlichen Ansatz denke ich. Also vielleicht so etwas hier. Für Tablets kann ich mir einen seitenbasierten Aufbau durchaus vorstellen. Die gleichen Inhalte würden dann für andere Geräte medienspezifisch aufbereitet.

    • Ria Elliger

      Verfasst am 11. Oktober 2013 um 12:34 Uhr.

      Also mir fällt spontan ein Footer-Text ein, der über 2 Spalten gehen soll. Also eher bei kurzen Texten wo es kein scrollen geben soll, aber man eben die Zeilenlänge verkürzen will. Beispiel:

      Beispiel: http://wissenschaft.dresden.de/calendar/day/1381487846/2013

      Aber ich gebe zu, es wird Seiten geben die diese Funktion für eine unnutzbare Zeitungs-Variante misbrauchen. Aber das gibt es doch für alles (Farben können ja auch nix dafür, dass Leute sie zu Augenkrebs-Stylings kombinieren).

      • hans

        Verfasst am 13. Oktober 2013 um 17:20 Uhr.

        das mit dem footer text (2 spalten) hat man doch schon mit „css columns“ ;)

        okay ich stelle mir gerade vor ich habe bei einer breite von 800 pixel 2 textboxen in denen sich 500 wörter lümmeln, dann ziehe ich das browserfenster auf eine breite von 1100 und dann habe ich 3 textboxen, die 500 wörtern verteilen sich nun auf die 3 boxen und die boxen werden niedriger. tjo … nett ist das schon, da sich die spaltenbreite dann nicht bis ins unermessliche zieht und der text somit besser lesbar bleibt.

    • Carina

      Verfasst am 11. Oktober 2013 um 13:37 Uhr.

      …. “nach unten lesen” und dann “nach oben scrollen”, damit ich “weiterlesen” kann…

      Genau dass muss ich jetzt wenn der Text länger ist oder eben „ellenlang“ von links nach rechts wenn der Bildschirm sehr breit ist.

      Mit CSS-Regions hab ich die Möglichkeit Spalten nebeneinander zu setzen und kann die Höhe selbst festlegen, das klingt doch genial.

  2. Ria Elliger

    Verfasst am 11. Oktober 2013 um 12:30 Uhr.

    Ich freue mich schon drauf, wenn das endlich soweit von den Desktop-Browsern unterstützt wird, dass man es tatsächlich auch praktisch einsetzen kann.

  3. Marcus Franke

    Verfasst am 11. Oktober 2013 um 12:53 Uhr.

    Ich freue mich auch über diese Möglichkeit. Beispielsweise werden länge Texte unterschiedlich in den Browsern dargestellt. So kann sich der Inhalt in den vorgegeben Regionen dann frei entfallten und der optische Gesamteindruck würde in meinen Augen verbessert werden. Gerade um Coloumns bei Übersichten wie in Infografiken auf die Webseite zu bringen, wird es ein große Fortschritt sein.

  4. Rainer

    Verfasst am 4. Januar 2014 um 12:36 Uhr.

    … interessanter Artikel, behalte ich mir im Hinterkopf ;-)

  5. Andreas Greif

    Verfasst am 5. Februar 2014 um 11:44 Uhr.

    Ich fürchte, so schnell wird das nix, wenn überhaupt: http://t3n.de/news/css-regions-aus-google-opera-525432/
    Auch caniuse zeigt eindeutig, dass das Feature zumindest ausm Chrome wieder entfernt wurde. http://caniuse.com/#feat=css-regions

  6. Christian

    Verfasst am 22. August 2014 um 13:56 Uhr.

    Die CSS-Regions finde ich unsinnig. Mehrspaltige Texte kann ich mit column-count anlegen. Will ich Bilder umfließen lassen ist das auch kein Problem. Mir fällt kein Beispiel ein, wo man das wirklich braucht.

    • Jonas Hellwig

      Verfasst am 22. August 2014 um 14:34 Uhr.

      Es geht beim Regions-Konzept um mehr als diese beiden Punkte. Texte und andere Inhalte können z. B. Von oben nach unten oder umgekehrt durch verschiedene HTML-Elemente fließen. Damit wären komplexe Layouts möglich die weder mit floats noch mit columns noch mit Flexbox möglich sind.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.