Einführung
Das Web ist eine extrem leistungsstarke Plattform für Text – ein Bereich, in dem Adobe über viel Erfahrung und Fachwissen verfügt. Als Adobe nach Möglichkeiten suchte, das Web voranzubringen, schien es uns daher naheliegend, die Textfunktionen des Webs weiter zu verbessern. Im Web wird für Text im Allgemeinen eine einspaltige, vertikale Ausrichtung verwendet. Es ist zwar möglich, Text um Grafiken fließen zu lassen und Text mit CSS in mehrere Spalten zu formatieren, aber es ist immer noch sehr schwierig, ein echtes magazinähnliches Layout im Web zu erreichen. Mit CSS-Regionen und CSS-Ausschlüssen ist Adobe führend bei den Bemühungen, die Leistungsfähigkeit von Desktop-Publishing in moderne Browser zu bringen. Im Screenshot unten wird beispielsweise CSS Exclusions verwendet, um Text entlang der Kontur des Berges fließen zu lassen:
Im Dokument im Screenshot unten werden auch CSS-Ausschlüsse verwendet, damit der Text um Formen in den Bildern herumfließen kann, sowie CSS-Regionen, um Text in Spalten und um ein Zitat herum zu formatieren:
Preisvergleichsportal-Regionen
Bevor wir uns die Details zu CSS-Regionen ansehen, möchte ich erläutern, wie Regionen in Google Chrome aktiviert werden können. Sobald Sie CSS-Regionen aktiviert haben, können Sie einige der in diesem Artikel genannten Beispiele ausprobieren und eigene erstellen.
CSS-Regionen in Google Chrome aktivieren
Ab Version 20 von Chrome (genauer gesagt Version 20.0.1132.57) werden CSS-Regionen über die chrome://flags-Schnittstelle aktiviert. So aktivieren Sie CSS-Regionen:
- Öffnen Sie in Chrome einen neuen Tab oder ein neues Fenster.
- Geben Sie
chrome://flagsin die Adressleiste ein. - Verwenden Sie die Seitensuche (Strg + F bzw. Befehlstaste + F) und suchen Sie nach dem Abschnitt Experimental Web Platform features.
- Klicken Sie auf den Link Aktivieren.
- Klicke unten auf den Button Jetzt neu starten.
Weitere Informationen zu Chrome-Flags finden Sie in meinem Blogpost All About Chrome Flags.
Nachdem Sie den Browser neu gestartet haben, können Sie mit CSS-Regionen experimentieren.
Übersicht über CSS-Regionen
Mit CSS-Regionen kann ein Block mit semantisch markiertem Text automatisch in „Boxen“ (derzeit Elemente) fließen. Das folgende Diagramm zeigt die Trennung von Text (dem Fluss) und Feldern (den Regionen, in die der Text fließt):
Sehen wir uns einen tatsächlichen Anwendungsfall für CSS-Regionen an. Ich bin nicht nur Entwickler bei Adobe, sondern auch Science-Fiction-Autor. Ich veröffentliche meine Arbeit häufig online unter einer Creative-Commons-Lizenz. Damit sie auf möglichst vielen Geräten und in möglichst vielen Browsern funktioniert, verwende ich oft ein extrem einfaches Format wie dieses:
Mit CSS-Regionen konnte ich eine Website erstellen, die sowohl visuell interessanter als auch funktionaler ist, da sie einfacher zu navigieren und bequemer zu lesen ist:
Zu Demonstrationszwecken habe ich in diesem Prototyp die Möglichkeit hinzugefügt, CSS-Regionen anzuzeigen. Der Screenshot unten zeigt, wie die Regionen so angeordnet sind, dass sie den Eindruck von Spalten erwecken, die sich um eine Grafik und ein Zitat in der Mitte wickeln:
Hier können Sie mit diesem Prototyp experimentieren und den Quellcode ansehen. Verwenden Sie die Pfeiltasten, um zu navigieren, und drücken Sie die Taste Esc, um Regionen einzublenden. Frühere Prototypen sind ebenfalls hier verfügbar.
Benannten Ablauf erstellen
Das CSS, das erforderlich ist, um einen Textblock durch Regionen fließen zu lassen, ist extrem einfach. Im folgenden Snippet wird einem div-Element mit der ID „content“ ein benannter Fluss namens „article“ zugewiesen. Derselbe benannte Fluss „article“ wird allen Elementen mit der Klasse „region“ zugewiesen. Das Ergebnis ist, dass der Text im Element „content“ automatisch durch alle Elemente mit der Klasse „region“ fließt.
<!DOCTYPE html>
<html>
<head>
<style>
#content {
{ % mixin flow-into: article; % }
}
.region {
{ % mixin flow-from: article; % }
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 10px;
}
#box-a {
border: 1px solid red;
top: 10px;
left: 10px;
}
#box-b {
border: 1px solid green;
top: 210px;
left: 210px;
}
#box-c {
border: 1px solid blue;
top: 410px;
left: 410px;
}
</style>
</head>
<body>
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="box-c" class="region"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
</div>
</body>
</html>
Dies führt zu folgendem Ergebnis:
Der Text im „content“-div enthält keine Informationen zu seiner Darstellung. Mit anderen Worten: Sie kann semantisch vollständig intakt bleiben, auch wenn sie durch verschiedene Regionen fließt. Da Regionen nur Elemente sind, werden sie wie jedes andere Element mit CSS positioniert und dimensioniert und sind daher perfekt mit den Prinzipien des responsiven Designs kompatibel. Wenn Sie Elemente als Teil eines benannten Flusses festlegen, bedeutet das einfach, dass der angegebene Text automatisch durch sie fließt.
Das CSS-Objektmodell
Das CSS-Objektmodell (CSSOM) definiert JavaScript-APIs für die Arbeit mit CSS. Im Folgenden finden Sie eine Liste der neuen APIs im Zusammenhang mit CSS-Regionen:
document.webkitGetNamedFlows(): Eine Funktion, die die Sammlung der im Dokument verfügbaren benannten Abläufe zurückgibt.document.webkitGetNamedFlows().namedItem("article"): Eine Funktion, die einen Verweis auf einen bestimmten benannten Ablauf zurückgibt. Das Argument entspricht dem Namen, der als Wert der CSS-Eigenschaftenflow-intoundfrom-fromangegeben ist. Wenn Sie einen Verweis auf den im obigen Code-Snippet angegebenen benannten Ablauf erhalten möchten, übergeben Sie den String „article“.WebKitNamedFlow: Eine Objektdarstellung einer benannten Floe mit den folgenden Attributen und Funktionen:firstEmptyRegionIndex: Ein Ganzzahlwert, der auf den Index der ersten leeren Region verweist, die dem benannten Ablauf zugeordnet ist. UntergetRegions()erfahren Sie, wie Sie die Sammlung von Regionen abrufen.name: Ein Stringwert mit dem Namen des Ablaufs.overset: Ein boolesches Attribut, das:false, wenn der Inhalt des benannten Ablaufs in die zugehörigen Regionen passttrue, wenn der Inhalt nicht passt und mehr Regionen erforderlich sind, um den gesamten Inhalt aufzunehmen.
getContent(): Eine Funktion, die eine Sammlung mit Verweisen auf die Knoten zurückgibt, die in den benannten Ablauf fließen.getRegions(): Eine Funktion, die eine Sammlung mit Verweisen auf Regionen zurückgibt, die den Inhalt des benannten Ablaufs enthalten.getRegionsByContentNode(node): Eine Funktion, die einen Verweis auf die Region zurückgibt, die den angegebenen Knoten enthält. Das ist besonders nützlich, um Regionen mit Elementen wie benannten Ankern zu finden.
webkitregionoversetchange-Ereignis. Dieses Ereignis wird für einWebkitNamedFlowausgelöst, wenn sich das Layout des zugehörigen Inhalts aus irgendeinem Grund ändert (Inhalt wird hinzugefügt oder entfernt, die Schriftgröße ändert sich, die Form der Region ändert sich usw.) und sich die EigenschaftwebkitRegionOverseteiner Region ändert. Dieses Ereignis ist nützlich, um grobe Layoutänderungen zu erfassen. Es ist ein Indikator dafür, dass etwas Wichtiges passiert ist und das Layout möglicherweise Aufmerksamkeit erfordert, z. B. dass mehr Regionen erforderlich sind oder einige Regionen leer sind.webkitregionfragmentchange-Ereignis. Zum Zeitpunkt dieser Bearbeitung nicht implementiert. Dieses Ereignis wird für einWebkitNamedFlowausgelöst, wenn sich das Layout des zugehörigen Inhalts aus irgendeinem Grund ändert. Es ähneltwebkitregionoversetchange, wird aber unabhängig von Änderungen anwebkitRegionOverset-Eigenschaften ausgelöst. Dieses Ereignis ist nützlich, um auf detaillierte Layoutänderungen zu warten, die sich nicht unbedingt auf das gesamte Layout des benannten Ablaufs auswirken. Beispielsweise werden Inhalte von einer Region in eine andere verschoben, aber der gesamte Inhalt passt immer noch in alle Regionen.Element.webkitRegionOverset: Elemente werden zu Regionen, wenn ihnen die CSS-Propertyflow-fromzugewiesen ist. Diese Elemente haben einwebkitRegionOverset-Attribut, das, wenn sie Teil eines benannten Flusses sind, angibt, ob Inhalte aus einem Fluss über die Region hinausgehen. Mögliche Werte für „webkitRegionOverset“:- „overflow“, wenn mehr Inhalt vorhanden ist, als in die Region passt
- „fit“, wenn der Inhalt vor dem Ende des Bereichs endet
- „empty“, wenn der Inhalt die Region nicht erreicht hat
Eine der Hauptanwendungen für das CSSOM ist das Abhören von webkitregionoversetchange-Ereignissen und das dynamische Hinzufügen oder Entfernen von Regionen, um unterschiedliche Textmengen zu berücksichtigen. Wenn beispielsweise die Menge des zu formatierenden Textes unvorhersehbar ist (z. B. von Nutzern generiert), wenn die Größe des Browserfensters geändert wird oder wenn sich die Schriftgröße ändert, kann es erforderlich sein, Regionen hinzuzufügen oder zu entfernen, um die Änderung im Fluss zu berücksichtigen. Wenn Sie Ihre Inhalte außerdem in Seiten organisieren möchten, benötigen Sie einen Mechanismus, mit dem Sie das DOM und Ihre Regionen dynamisch ändern können.
Das folgende JavaScript-Code-Snippet zeigt, wie das CSSOM verwendet wird, um Regionen nach Bedarf dynamisch hinzuzufügen. Der Einfachheit halber werden das Entfernen von Regionen oder das Definieren der Größe und Position von Regionen nicht behandelt. Der Code dient nur zu Demonstrationszwecken.
var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);
function onLayoutUpdate(event) {
var flow = event.target;
// The content does not fit
if (flow.overset === true) {
addRegion();
} else {
regionLayoutComplete();
}
}
function addRegion() {
var region = document.createElement("div");
region.style = "flow-from: article";
document.body.appendChild(region);
}
function regionLayoutComplete() {
// Finish up your layout.
}
Weitere Demos finden Sie auf der Beispielseite für CSS-Regionen.
Seitenvorlagen für Preisvergleichsportale
Die Nutzung des CSSOM ist wahrscheinlich die leistungsstärkste und flexibelste Methode, um Dinge wie Paging und responsives Layout zu implementieren. Adobe arbeitet jedoch schon lange genug mit Text- und Desktop-Publishing-Tools, um zu wissen, dass Designer und Entwickler auch eine einfachere Möglichkeit für relativ allgemeine Paging-Funktionen wünschen. Daher arbeiten wir an einem Vorschlag namens „CSS-Seitenvorlagen“, mit dem das Paging-Verhalten vollständig deklarativ definiert werden kann.
Sehen wir uns einen gängigen Anwendungsfall für CSS-Seiten-Templates an. Im folgenden Code-Snippet wird gezeigt, wie mit CSS zwei benannte Abläufe erstellt werden: „article-flow“ und „timeline-flow“. Außerdem wird ein dritter Selektor namens „combined-articles“ definiert, in dem die beiden Abläufe enthalten sind. Durch das einfache Einfügen des Attributs overflow-style in den Selektor „combined-articles“ wird angegeben, dass der Inhalt automatisch entlang der x-Achse oder horizontal auf Seiten aufgeteilt werden soll:
<style>
#article {
{ % mixin flow-into: article-flow; % }
}
#timeline {
{ % mixin flow-into: timeline-flow; % }
}
#combined-articles {
overflow-style: paged-x;
}
</style>
Nachdem die Abläufe definiert und das gewünschte Überlaufverhalten festgelegt wurden, können wir die Seitenvorlage selbst erstellen:
@template {
@slot left {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
@slot time {
width: 25%;
float: left;
{ % mixin flow-from: timeline-flow; % }
}
@slot right {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
}
Seitenvorlagen werden mit der neuen „at“-Syntax definiert. Im obigen Code-Snippet definieren wir drei Slots, die jeweils einer Spalte entsprechen. Der Text aus dem „article-flow“ wird in den Spalten links und rechts angezeigt, der Text aus dem „timeline-flow“ in der mittleren Spalte. Das Ergebnis könnte so aussehen:
Der Artikeltext in der linken und rechten Spalte ist auf Englisch, die Zeitleiste in der Mitte auf Deutsch. Außerdem wird das Dokument horizontal geblättert, ohne dass JavaScript-Code erforderlich ist. Alles wurde vollständig deklarativ in CSS erledigt.
CSS-Seitenvorlagen sind noch ein Vorschlag, aber wir haben einen Prototyp, der ein JavaScript-„Shim“ (auch Polyfill genannt) verwendet, damit Sie jetzt schon damit experimentieren können.
Weitere Informationen zu CSS-Regionen im Allgemeinen finden Sie auf der Seite zu CSS-Regionen auf html.adobe.com.
Ausschlüsse für Preisvergleichsportale
Um ein echtes Magazin-Layout zu erreichen, reicht es nicht aus, Text durch Regionen fließen zu lassen. Ein wichtiges Element für hochwertiges und visuell ansprechendes Desktop-Publishing ist die Möglichkeit, Text um unregelmäßige Grafiken und Formen herum oder innerhalb dieser fließen zu lassen. Mit CSS-Ausschlüssen wird diese Produktionsqualität auf das Web übertragen.
Der folgende Screenshot stammt aus einem CSS-Exclusions-Prototyp und zeigt Text, der dynamisch um einen Pfad fließt, der der Kontur einer großen Felsformation entspricht:
Der nächste Screenshot zeigt das Gegenteil: Text, der innerhalb unregelmäßig geformter Polygone fließt:
Der erste Schritt, um Text um oder innerhalb beliebiger Formen fließen zu lassen, besteht darin, die erforderlichen Algorithmen zu entwickeln und zu optimieren. Adobe arbeitet derzeit an Implementierungen, die direkt in WebKit einfließen werden. Sobald diese Algorithmen optimiert sind, bilden sie die Grundlage für die restlichen CSS-Ausschlüsse.
Weitere Informationen zu CSS-Ausschlüssen finden Sie auf der Seite zu CSS-Ausschlüssen auf html.adobe.com. Eine detailliertere Beschreibung der Arbeit von Adobe an der zugrunde liegenden Technologie für CSS-Ausschlüsse finden Sie im Blogpost von Hans Muller mit dem Titel Horizontal Box: Polygon Intersection for CSS Exclusions.
Der Status von CSS-Regionen und CSS-Ausschlüssen (2012)
Das erste Mal, dass ich öffentlich über CSS-Regionen und CSS-Ausschlüsse gesprochen habe, war beim Adobe Developer Pod auf der Google I/O 2011. Damals habe ich Demos in unserem eigenen benutzerdefinierten Prototyp-Browser gezeigt. Die Resonanz war extrem positiv, aber es gab auch eine spürbare Enttäuschung, als die Zuschauer feststellten, dass keine der von mir gezeigten Funktionen in einem der gängigen Browser verfügbar war.
Ich war dieses Jahr (2012) wieder bei der Google I/O, diesmal als Referent zusammen mit meinem Kollegen Vincent Hardy und Alex Danilo von Google (hier kannst du dir die Präsentation ansehen). Nur ein Jahr später sind etwa 80 % der CSS-Regions-Spezifikation in WebKit implementiert und bereits in der neuesten Version von Google Chrome enthalten. Beachten Sie, dass CSS-Regions derzeit über chrome://flags aktiviert werden muss. Eine vorläufige Unterstützung für CSS-Regions ist sogar in Chrome für Android verfügbar:
Außerdem sind sowohl CSS-Regionen als auch CSS-Ausschlüsse in der Vorabversion von Internet Explorer 10 implementiert und stehen derzeit auf der Roadmap von Mozilla für Firefox für 2012. Die nächste Hauptversion von Safari sollte den Großteil der CSS-Regions-Spezifikation unterstützen, und nachfolgende Updates sollten den Rest enthalten.
Im Folgenden finden Sie einen detaillierten Zeitplan der Fortschritte, die wir seit unserem ersten Vorschlag an das W3C im April 2011 mit CSS-Regionen und CSS-Ausschlüssen gemacht haben:
Fazit
Adobe hat mit Tools wie InDesign sehr viel Erfahrung mit Text, Schriftarten und Desktop-Publishing im Allgemeinen. Das Web ist bereits eine sehr leistungsstarke Plattform für Text, aber wir möchten unser Wissen und unsere Erfahrung nutzen, um die Textdarstellung noch weiter zu verbessern. CSS-Regionen und CSS-Ausschlüsse ermöglichen es, Inhalte semantisch strukturiert zu halten, während gleichzeitig ein echtes magazinähnliches Layout und letztendlich ein viel ausdrucksstärkeres Web möglich sind.