CSS Regions

written by devangelist on Dezember 4, 2013 in Allgemein and CSS3 and HTML with 3 comments

Content ist King. Soviel sagt(e) jedenfalls Google zu seinen Nutzern. Ein design-technisches Problem, welches zu einem großen Teil dem Hype der responsiven Webseiten zu verdanken ist. Auf einem großen Display ist es einfach, viel Content darzustellen, auf mobilen Devices umso schwieriger. Hierbei wird vorausgesetzt, sich auf das Wesentliche zu konzentrieren. Insbesondere dann, wenn das Layout gewisse Limitierungen an die Höhe des Designs setzt, gibt es oft keine andere Lösung, als ewig lange, scrollbare Texte darzustellen. Eines vorneweg: Das Prinzip hinter den Regions ist sehr einfach und angemessen der Tatsache, dass sich viel brumbrum hinter dieser neuen CSS-Eigenschaft verbirgt, gibt es einen Screenshot, welcher zu 90% das verratet, was dieser Beitrag sagen soll:

css-region-content-flow

Die restlichen 10% dienen also dem reinen Zeitvertreib ;-) Oder der Erklärung, wie die Regions funktionieren: Prinzipiell geben sie die Möglichkeit, Content auf mehrere Elemente aufzuteilen. Sie bieten also einen flow, welcher aus Content, verteilt auf mehrere Elemente, besteht. Dieser Region-Chain ist also eine Sammlung von Elementen, auf welcher der Flow verteilt ist. Die daran beteiligten Elemente können nach belieben gestyled werden, ohne dabei das Risiko einzugehen, dass der Text abgeschnitten wird, da er sich einfach in das nächste Element aus der Kette frisst. Dies schreit doch quasi nach komplett neuen Möglichkeiten in der Gestaltung von Webseiten, denn der Content ist erstmals unabhängig von den Elementen, in denen er beinhaltet ist. Es kann also ein zentrales Element vorhanden sein, das den wichtigsten Inhalt darstellt und alles weitere, was nicht Platz hat, kann auf weniger wichtige Elemente ausgelagert werden. Um diese Regions nun verwenden zu können, reicht ein benannter Flow. Soll heißen, eine CSS-Eigenschaft flow-into für das content-Element, welches den Flow-Namen beinhaltet. Anschließend, vom Element ausgehend, welches den Content beinhaltet, ein flow-from.

#content {
	flow-into: eigenerFlow;
}

.region {
	flow-from: eigenerFlow;
}

Wenn CSS-Regions verwendet werden, ist das originale Element, in dem Falle #content, nicht sichtbar, sondern nur die Placeholder, welche die Klasse .eineRegion angeben.

<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<div id="content">...</div>

Ein Region-Beispiel in CSS:

#content {
    -webkit-flow-into: meinFlow;
}

.region {
    -webkit-flow-from: meinFlow;
    width: 500px;
    height: 200px;
    margin: 5px;
    padding: 5px;
}

#region1 {
    border: 2px dashed darkred;
}

#region2 {
    border: 2px dashed darkgreen;
    margin-left: 100px;
}

#region3 {
    border: 2px dashed darkorange;
    margin-left: 200px;
    height: auto;
}

Auch wenn der Text innerhalb der Regionen steht, wird dieser nicht als Kind-Element betrachtet. Es wird also nur kontrolliert, wo der Inhalt dargestellt wird. So wie im DOM angegeben, bleibt alles das Selbe und der Text erbt nicht die Styles von der Region, in der er angezeigt wird. Dafür gibt es einen CSS pseudo-selector, ::region(), welcher es ermöglicht, den Text nach den eigenen Wünschen innerhalb einer Region zu stylen.

.eigeneRegion::region(p){
    /* Styles für alles innerhalb der Regionen */
}

Angaben wie height:auto gehören somit der Vergangenheit, denn hierbei wird sichergestellt, dass der Inhalt passt und, dass nicht der Content das Layout vorgibt, sondern sich dem Design anpasst. Natürlich sollte ein height:auto wenigstens dem letzten Element in der Kette überlassen werden, sodass kein Inhalt spurlos verschwindet.

JavaScript

Es kann natürlich auch mittels clientseitigem JavaScript kontrolliert werden, ob der Content richtig dargestellt wird. Zum Beispiel das von der Spezifikation vorgegebene regionoversetchange Event wird ausgeführt, wenn sich die regionOverset Eigenschaft für eine bestimmte Region ändert. Dies kann auftreten, wenn der Benutzer die Seite vergrößert oder verkleinert und somit der Textinhalt nicht länger in ein bestimmtes Element passt. Der Wert von regionOverset kann fit, overset oder empty sein. Empty beispielsweise sagt, dass sich kein Inhalt innerhalb der Region befindet. Die regionOverset Eigenschaft wird auf overset gesetzt, wenn der letzten Region in der Kette nicht möglich ist, alles darzustellen und somit ein gewisser Teil des Textes nicht lesbar ist. Der fit Wert, wie der Name schon sagt, passt den Content genau an die Region an. Entweder komplett (wenn es nicht das letzte Element ist) oder teilweise (wenn es die letzte Region in der Kette ist). Wie auf diese Ereignisse reagiert werden kann, hängt vom Design, Content und andere Aspekte des Layouts ab. Diese Ereignisse können unter anderem dafür genutzt werden, dynamisch Regionen hinzuzufügen oder zu entfernen.

Media Queries

Regionen werden nur in CSS definiert und sind somit in Kombination mit MediaQueries einfach verwendbar. Ebenfalls eine Region mit display:none auszublenden ist möglich. Dabei wird das Element in der Kette richtigerweise nicht nur ausgeblendet, sondern auch übersprungen. Es ist also einfach, bestimmte Regionen im Layout zu entfernen, ohne sich damit zu beschäftigen zu müssen,  was mit dem Content passiert.

Break properties

Regionen implementieren das Verhalten der multi-column-layouts Spezifikation, welche definiert, wie der Content in den Regionen umbricht. Diese Eigenschaften können an Elementen angewendet werden, um immer oder nie umzubrechen. Beispielweise kann mit dem Wert region für break-before oder break-after sichergestellt werden, dass de Region vor oder nach dem Element umgebrochen wird. Diese Technik ist hilfreich um Elemente gruppiert zu behalten und davor zu schützten, getrennt zu werden. Ebenfalls Bilder profitieren von diesen Angaben, um sie zum Beispiel auf kleineren Bildschirmen unter- oder oberhalb des Textes anzuzeigen.

Kompatibilität

All jene (so wie ich auch), die sich beim ersten Anblick dieser neuen Möglichkeit gefreut haben, müssen sich leider noch etwas gedulden. Momentan gibt es laut Adobe nur Unterstützung für iOS7 Safari und Safari 6.1+. Die Regionen können allerdings auch in Webkit nightly verwendet werden. Um die Funktion in Chrome zu aktivieren, reicht es in die Adresszeile chrome://flags einzutippen und die Option “Experimentelle Webplattformfunktionen” zu aktivieren und anschließend den Browser neuzustarten.
Hinweis: Es wird empfohlen, für Experimentelle Features die Entwicklerversion Chrome Canary zu verwenden. Dieser kann problemlos parallel zum normalen Chrome verwendet werden.

CSS Regions: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkte, 4 abgegebene Stimmen.
Loading ... Loading ...

About the Author

Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.