Adobe – im Webumfeld ja oft mit Flash in Verbindung gebracht – wirkt wie viele andere Firmen auch am neuen CSS3 Standard mit. Unter Anderem hat Adobe einen Entwurf für ihre hauseigene Technik der CSS-Regions bei der W3C eingereicht. Hiermit soll es möglich werden, einzelne HTML5-Elemente miteinander zu verknüpfen und somit eine Dokumentenstruktur zu schaffen, die verknüpften Textfeldern aus InDesign, Pages oder Word ähnelt.
Angenommen eine HTML5-Section wird mit einer zweiten per CSS-Regions verknüpft und anschließend mit Text gefüllt. Füllt der Text mehr als die erste Section so würde der Fall “overflow” eintreten, dessen Verhalten man bisher mit CSS definieren konnte – entweder der Text wurde abgeschnitten, lieft über die Textbox hinaus oder die Box wurde scrollbar gemacht. Durch die Verknüpfung mit einer zweiten Section bricht der Text nun in diese zweite Box um und wird in dieser fortgesetzt. Somit lassen sich sehr einfach mehrspaltige Layouts realisieren.
Umbruch in neue Textbox mit CSS-Regions
Als weiteren Schritt legte Adobe einen weiteren Entwurf vor, der sich CSS-Exclusions nennt und bei dem sich die Form von CSS-Regions per Form definieren lassen. Der Text kann damit aus dem Raster der viereckigen Boxen ausbrechen und auch Formen wie einen Kreis oder ein Herz annehmen. Auch Negativ-Formen sollen damit möglich werden.
Geformter Text mir CSS-Regions
Negativformen mit CSS-Regions
Der Entwurf für CSS3-Regions und Exclusions wurde der W3C von Adobe vorgelegt und prototypisch in die Browserengine WebKit, die unter anderem von Chrome und Safari benutzt wird, integriert. Den Prototypen kann man sich zu Testzwecken in den Adobe Labs herunterladen.
Links
- CSS3-Regions: Rich page layout with HTML5 and CSS3
- W3C CSS-Regions Editor’s Draft
- W3C CSS-Exclusions Editor’s Draft