Regionen

CSS-Regionen (Cascading Stylesheets) ist eine Seitenlayoutfunktion für Windows Store-Apps mit JavaScript für Windows 8 und für Internet Explorer 10. CSS-Regionen sind vom W3C in der Spezifikation der CSS-Regionen definiert, die derzeit noch als Arbeitsentwurf vorliegt. Mit CSS-Regionen können Entwickler und Designer einen HTML-Inhaltsdatenstrom mit Text und Bildern nutzen und auf mehrere leere Container aufteilen, die in einer Standard-HTML-Vorlage definiert sind. HTML-Vorlagen sind Dokumente, die größtenteils keinen ursprünglichen Inhalt enthalten und sich stattdessen primär aus leeren Containern zusammensetzen, die so dimensioniert und positioniert sind, dass sie eingehenden Inhalt ein bestimmtes Layout bieten.

Fortlaufende Inhaltsdatenströme können so in ein Layout umstrukturiert werden, das beispielsweise besser für Tablets geeignet ist.

Auf einer einzelnen Seite ermöglichen CSS-Regionen Webentwicklern das Entwickeln komplexer Inhaltslayouts, die denen in Zeitschriften oder Zeitungen entsprechen, wo mehrere Regionen desselben Inhaltsflusses (Text, dazu gehörende Bilder, Videos usw.) um nicht dazu gehörende Inhaltselemente angeordnet werden, wie etwa andere Geschichten oder Werbung.

Implementieren von CSS-Regionen

Um CSS-Regionen zu implementieren, benötigen Sie zuerst eine HTML-Datei, die als Inhaltsdatenstrom fungiert. Diese ist ein eigenständiges HTML-Dokument, das sein eigenes Document Object Model (DOM) und seine eigenen CSS-Formatvorlagen enthält. Im folgenden Diagramm steht die Datei "content.html" für den Inhaltsdatenstrom.

Dann benötigen Sie ein HTML-Dokument, das als Host für den Inhaltsdatenstrom fungiert. Dieses Hostdokument oder diese Gestaltungsvorlage ist verantwortlich für die Dimensionierung und Positionierung der CSS-Regionen sowie die Definition des Flussbezeichners, in den der Inhaltsdatenstrom fließt. Im folgenden Diagramm steht die Datei "master.html" für die Gestaltungsvorlage.

Ein Diagramm mit einer konzeptionellen Gleichung: Die Datei "master.html" mit mehreren Frames plus die Datei "content.html" mit einem HTML-Content-Datenstrom entspricht der Datei "master.html", deren Frames mit Content aus dem Datenstrom gefüllt werden.

Wenn die Gestaltungsvorlage vollständig gerendert wird, enthält sie die verbundenen Regionen mit dem Inhalt dieses Datenstroms. Beachten Sie, dass diese Fragmentierung nur Präsentationszwecken dient und sich nicht auf die DOM-Struktur des Inhaltsdatenstrom-Dokuments auswirkt.

Erstellen einer Datenquelle

CSS-Regionen erfordern zwei neue CSS-Eigenschaften, die den Inhaltsfluss von der Datenquelle zu einer Region, anschließend zur nächsten usw. ermöglichen. Sowohl die Datenquelle als auch ein Bezeichner sind für die Gestaltung des Inhaltsflusses erforderlich. Platzieren Sie zunächst eine Datenquelle in einem iframe-Element, um dieses in einem eigenen HTML-Dokument zu laden. Erstellen Sie auf Ihrer Gestaltungsvorlage ein iframe mit einer eindeutigen ID, z. B. den folgenden:


<iframe id="flow1-data-source" src="content-source.html"></iframe>

Erstellen Sie anschließend mit der -ms-flow-into-Eigenschaft eine CSS-Auswahl, die die Datenquelle angibt:


#flow1-data-source {
  -ms-flow-into: flow1;
}

Beachten Sie, dass nach dem Platzieren der -ms-flow-into-Eigenschaft im iframe-Element, dieses so agiert, als wenn die display-Eigenschaft auf "none" festgelegt worden wäre. Dieses iframe-Element ist nicht für das Rendering vorgesehen und ist daher nicht Teil der Inhaltsfragmentierung oder des Layouts. Dieses Element ist ausschließlich für die Identifizierung der Datenquelle vorgesehen, aus der der Fluss erstellt wird.

Erstellen eines CSS-Regionencontainers

Alle nicht ersetzten Elemente können als CSS-Regionencontainer verwendet werden, meistens werden zu diesem Zweck aber div-Elemente verwendet.

Weisen Sie zum Erstellen eines CSS-Regionencontainers zunächst in der Gestaltungsvorlage den Elemente, die Sie als Container verwenden möchten, einen eindeutigen Klassennamen zu. Beispiel:


<div class="flow1-container"></div>
<div class="flow1-container"></div>
<div class="flow1-container"></div>


Erstellen Sie anschließend mit der -ms-flow-from-Eigenschaft eine CSS-Auswahl, die die Datenquelle angibt, aus der der Inhaltsfluss erfolgen soll:


.flow1-container {
  -ms-flow-from: flow1;
}

Der Inhalt in Elementen, die als CSS-Regionencontainer definiert sind, wird auf der Gestaltungsvorlage in der DOM-Ausgangsreihenfolge gerendert. Wenn Regionen statisch definiert wurden, wird der Inhalt auf die im DOM definierten Containerelemente aufgeteilt.

Erweitern von CSS-Regionen

Für komplexere Layouts können Sie Layoutfeatures verwenden, die von der Quellreihenfolge unabhängig sind. Mithilfe des neuen Features zur Rasterausrichtung können Sie z. B. ein komplexes, fließendes Layout erzeugen. Nehmen wir folgendes Markup:


<!DOCTYPE html>
<html lang="en-us">
<head>
<style type="text/css">
#data-source {
  -ms-flow-into: flow1;
}
.flow-container {
  -ms-flow-from: flow1;
}
#grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 384px 384px;
}
.A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row-span: 2;
}
.B {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.C {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.D {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}
.E {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
}
</style>
</head>
<body>
  <iframe id="data-source" src="content-source.html"></iframe>
  <div id="grid">
    <div id="region1" class="A flow-container"></div> 
    <div id="region2" class="B flow-container"></div>
    <div id="region3" class="C flow-container"></div> 
    <div id="region4" class="D flow-container"></div>
    <img class="E" src="image.png" />  
  </div>
</body>
</html>


Damit fließt der Inhalt wie im folgenden Diagramm dargestellt. Die Pfeile geben die Richtung des Inhaltsflusses an.

Das Diagramm zeigt den Inhaltsfluss von Frame zu Frame in einem Rasterlayout.

Vertauschen wir nun die Reihenfolge der ersten beiden und der letzten beiden Frames:


<iframe id="data-source" src="content-source.html"></iframe>
<div id="region1" class="B flow-container"></div>
<div id="region2" class="A flow-container"></div> 
<div id="region3" class="C flow-container"></div>
<div id="region4" class="E flow-container"></div>
<img class="D" src="image.png" />

Damit ändert sich der Fluss wie im aktualisierten Diagramm gezeigt:

Das Diagramm zeigt den Inhaltsfluss von Frame zu Frame in einem Rasterlayout, bei dem die Frames vertauscht wurden. Der Inhalt fließt weiter in einer festgelegten Reihenfolge, auch wenn sich die Frames im Raster an unterschiedlichen Positionen befinden.

Auf diese Weise können Sie visuell das Layout Ihrer Seite festlegen, ohne das Markup der Vorlage erheblich verändern zu müssen oder das DOM des Ausgangsinhalts zu stören.

Weitere Szenarien mit CSS-Regionen

Neben den beiden gezeigten Beispielen ermöglichen CSS-Regionen noch eine Reihe anderer hilfreicher Szenarios:

  • Erstellen Sie dynamisch Inhaltsregionen, indem Sie der Gestaltungsseite ein neues div hinzufügen, wenn das aktuelle div voll ist.
  • Ermöglichen Sie Benutzern das Ändern des Inhaltsdokuments, und sorgen Sie dafür, dass der geänderte Inhalt wie erwartet fließt. Ein Benutzer könnte sich z. B. entscheiden, die Textgröße zu ändern. Daraufhin werden alle div neu generiert, damit der gesamte Inhalt sichtbar bleibt.
  • Greifen Sie auf den Fragmentbereich einer bestimmten Inhaltsregion zu.

API-Referenz

Regions

Beispiele und Lernprogramme

Beispiel für CSS-Regionen

Demos für die Internet Explorer-Testversion

So geht's: CSS3-Regionen

IEBlog-Beiträge

Erstellen attraktiver textorientierter Seiten in IE10

Spezifikation

CSS3-Modul (Level 3) für Regionen

 

 

Anzeigen:
© 2014 Microsoft