CSS Regions

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.

Workshop: CSS – The Next Level

Wir machen dich fit für die Zukunft des Web! In diesem Workshop lernst du die spannendsten neuen CSS-Techniken anhand praktischer Übungen kennen.

Berlin, 11. November 2016

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