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.