Veit Schiele Communications

Veit Schiele Communications

Regions

CSS-Regions erlaubt die Verteilung von Inhalten auf mehrere Container.
erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:12 © Veit Schiele Communications GmbH, 2013–2017

CSS-Regions

Browser Support

Solche Effekte werden sich zukünftig auch erstellen lassen mit CSS Regions, die nun in Webkit implementiert wurden. Mobile Safari unterstützt diese CSS- Anweisung nun erstmals, wenn auch mit -webkit--Präfix. Und in Google Chrome 30 wird die Anweisung unterstützt sofern chrome://flags/#enable-experimental-web-platform-features aufgerufen und aktiviert wurde. Eine vollständige Liste der Browser-Unterstützung erhalten Sie in Can I use CSS Regions? und Adobe support charts.

Beispiele

Beispiele für CSS-Regions erhalten Sie in Road Trip und CSS-Tricks: Demo for Ad Folding.

How to

CSS-Regions bestehen aus zwei neuen CSS-Eigenschaften:

flow-into
gibt das Element an, das die Daten für eine bestimmte Region unter einem Namen enthält.
flow-onto
gibt die Regionen an, die die unter einem bestimmten Namen vorhandenen Daten anzeigen

Im Folgenden ein einfaches Beispiel:

HTML

<div id="source">
        <p>Lorem ipsum dolor sit amet, consectetur, adipisci velit, …</p>
</div>

<div id="column1" class="region"></div>
<div id="column2" class="region"></div>
<div id="column3" class="region"></div>

CSS

#source {
    flow-into: thread;
}
.region {
    flow-from: thread;
}

Update (18. Juni 2014)

Die Produce & Publish-Plattform zur vollautomatischen Generierung von PDF-Dokumenten aus HTML oder XML-Dokumenten unterstützt nun zusammen mit der PDFreactor 7-Bibliothek ebenfalls CSS-Regions. Da auch die CSS3-Anweisungen für Running Elements unterstützt werden, bleiben hier kaum noch Gestaltungswünsche offen.