Régions

Les régions CSS (Cascading Style Sheets) sont une fonctionnalité de disposition de page pour les applications du Windows Store en JavaScript dans Windows 8 et pour Internet Explorer 10. Le W3C (World Wide Web Consortium) définit les régions CSS dans la spécification CSS Regions, qui est actuellement en phase d’ébauche. Grâce à ces régions CSS, les développeurs et les concepteurs peuvent prendre un seul flux de contenu HTML de texte et d’images et segmenter ce flux dans plusieurs conteneurs vides définis dans un modèle HTML standard. Les modèles HTML sont des documents en grande partie vides de contenu d’origine. Ils se composent essentiellement de conteneurs vides dimensionnés et positionnés de façon à fournir au contenu entrant une disposition spécifique.

Cela permet la restructuration continue du flux de contenu dans une mise en forme plus adaptée, par exemple, pour la consommation d’une tablette.

Dans une seule page, les régions CSS permettent aux développeurs Web de développer des dispositions de contenu complexes équivalentes à celles d’un magazine ou d’un journal, où plusieurs régions du même flux de contenu (texte, images associées, vidéo, etc.) sont mises en forme autour d’éléments de contenu non liés, tels que d’autres témoignages ou publicités.

Implémentation des régions CSS

Pour implémenter des régions CSS, vous avez besoin d’un fichier HTML qui servira de flux de contenu. Il s’agit d’un document HTML autonome qui contient son propre modèle d’objet de document (DOM, Document Object Model) et son propre style CSS. Dans le diagramme suivant, le flux de contenu est représenté par le fichier « content.html ».

Vous avez ensuite besoin d’un document HTML, qui servira d’hôte pour le flux de contenu. Ce document hôte, ou page maître, est chargé du dimensionnement et du positionnement des régions CSS, ainsi que de la définition de l’identificateur du flux dans lequel le flux de contenu passera. Dans le diagramme suivant, la page maître est représentée par le fichier « master.html ».

Une fois le rendu de la page maître généré, la page contient des régions connectées intégrant le contenu du flux. N’oubliez pas que cette fragmentation n’est destinée qu’à des fins de présentation et n’affecte pas la structure DOM du document de flux de contenu.

Création d’une source de données

Les régions CSS nécessitent deux nouvelles propriétés CSS pour permettre au contenu de passer d’une source de données à une région, puis à une autre, et ainsi de suite. Une source de données et un identificateur sont nécessaires pour définir le flux de contenu. Pour commencer, placez une source de données sur un élément iframe à charger dans un document HTML distinct. Dans votre page maître, créez un iframe ayant un ID unique, par exemple :

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

Créez ensuite un sélecteur CSS qui spécifie la source de données utilisant la propriété -ms-flow-into :

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

Notez que, en plaçant la propriété -ms-flow-into sur l’élément iframe, l’élément agit comme si la propriété display était définie sur "None". Cet élément iframe n’était pas destiné à être rendu et il ne participera à la fragmentation ou à la disposition du contenu. Cet élément est uniquement destiné à identifier la source de données servant à créer un flux.

Création d’un conteneur de régions CSS

Tous les éléments non remplacés peuvent être utilisés en tant que conteneur de régions CSS. Toutefois, les éléments div sont les éléments les plus couramment utilisés à cette fin.

Pour créer un conteneur de régions CSS, sur la page maître, attribuez d’abord aux éléments que vous souhaitez utiliser comme conteneurs un nom de classe unique, par exemple :

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

Créez ensuite un sélecteur CSS qui spécifie la source de données à partir de laquelle accepter le flux de contenu utilisant la propriété -ms-flow-from :

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

Le contenu des éléments désignés comme conteneurs de régions CSS sera restitué dans l’ordre de la source DOM sur la page principale. Si les régions sont définies de façon statique, le contenu sera fragmenté entre les éléments du conteneur défini dans le DOM.

Extension des régions CSS

Vous pouvez utiliser des fonctionnalités de disposition indépendantes de l’ordre de la source pour créer des scénarios de disposition plus complexes. Par exemple, la nouvelle fonctionnalité Alignement de grille peut être utilisée pour créer une disposition de contenu complexe. Considérons, par exemple, le balisage suivant :

<!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>

Ce balisage assure le flux du contenu comme le montre le diagramme suivant. Les flèches indiquent le sens du flux de contenu.

Inversons l’ordre des deux premiers cadres et des deux derniers :

<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" />

Le flux est changé comme le montre ce nouveau diagramme :

Cela vous permet de spécifier d’un point de vue visuel la disposition de votre page sans modifier radicalement le balisage du modèle et sans bouleverser le DOM du contenu source.

Autres scénarios de régions CSS

En plus des deux exemples donnés précédemment, les régions CSS autorisent plusieurs autres scénarios utiles :

• Créer dynamiquement des régions de contenu en ajoutant un nouveau div à la page maître lorsque le div utilisé est plein.
• Permettre à l’utilisateur de modifier le document de contenu et relancer le flux du contenu mis à jour comme prévu. Par exemple, un utilisateur peut décider d’augmenter la taille du texte. Chaque div est alors recréé pour que tout le texte soit visible.
• Accéder à une plage de fragments associé à une région de contenu spécifique.

Informations de référence sur les API

Regions

Exemples et didacticiels

Exemple de régions CSS

Démonstrations du site Internet Explorer Test Drive

Hands On: CSS3 Regions

Billets IEBlog

Création de pages riches en texte dans Internet Explorer 10

Spécification

CSS Regions Module Level 3