Cette page vous a-t-elle été utile ?
Votre avis sur ce contenu est important. N'hésitez pas à nous faire part de vos commentaires.
Vous avez d'autres commentaires ?
1500 caractères restants
Exporter (0) Imprimer
Développer tout

Disposition multicolonne

Internet Explorer 10, ainsi que les applications du Windows Store en JavaScript dans Windows 8, introduisent la prise en charge du module Disposition multicolonne CSS. À l’heure où nous écrivons, le module Disposition multicolonne n’est qu’une proposition de recommandation du W3C (World Wide Web Consortium). La disposition multicolonne permet de disposer le contenu dans plusieurs colonnes qui conservent un espacement et une règle facultative entre elles. Elle permet aussi de moduler le nombre de colonnes en fonction de la taille de la fenêtre du navigateur.

Un élément multi-colonne est défini par le W3C comme un élément dont la propriété column-width ou column-count n’a pas la valeur "auto" et par conséquent, agit comme un conteneur pour la disposition multicolonne. La disposition multicolonne introduit la zone de colonne, qui est définie comme un nouveau type de conteneur entre la zone de contenu et le contenu. Les zones de colonne contiennent des lignes, qui sont triées dans le sens de l’élément multicolonne. Chaque colonne a une propriété column height et une propriété column width. Les zones de colonne adjacentes sont séparées par une propriété column gap, qui peut éventuellement contenir une propriété column rule.

Spécification de la largeur des colonnes et de leur nombre

Vous devez, au moins, spécifier une largeur pour les colonnes dans un élément multicolonne. Internet Explorer 10 affichera le plus de colonnes possible avec la largeur que vous spécifiez dans la fenêtre du navigateur. Pour spécifier la largeur des colonnes, utilisez la propriété suivante :

PropriétéDescription

column-width

Spécifie la largeur optimale des colonnes dans un élément multicolonne.

Les valeurs possibles de cette propriété sont les suivantes :

auto

Indique que la largeur de colonne optimale est déterminée par les valeurs des autres propriétés de l’élément multicolonne, comme la propriété column-count. Il s’agit de la valeur par défaut.

<length>

Une valeur de longueur relative ou absolue comme il est spécifié dans Référence concernant les unités et les valeurs CSS.

 

Par exemple, le sélecteur suivant a ajouté la propriété column-width et l’a définie sur 200 pixels. Internet Explorer 10 remplira la fenêtre du navigateur avec autant de colonnes d’une largeur de 200 pixels ou plus qu’il peut contenir.


<style type="text/css">
#multicol1 {
  column-width: 200px;
}
</style>


Vous pouvez afficher ce sélecteur appliqué à un grand bloc de texte. (Internet Explorer 10 ou un navigateur compatible avec des propriétés multicolonnes CSS3 non préfixées est requis pour que cette page s’affiche correctement.)

Vous pouvez également spécifier le nombre de colonnes qu’un élément multicolonne doit avoir. Pour spécifier le nombre des colonnes, utilisez la propriété suivante :

PropriétéDescription

column-count

Spécifie le nombre optimal de colonnes dans un élément multicolonne.

Les valeurs possibles de cette propriété sont les suivantes :

auto

Indique que le nombre de colonnes est déterminé par les valeurs des autres propriétés de l’élément multicolonne, comme la propriété column-width. Il s’agit de la valeur par défaut.

<integer>

Spécifie le nombre de colonnes.

 

Par exemple, le sélecteur suivant a ajouté la propriété column-count et l’a définie sur "2". Internet Explorer 10 remplira la fenêtre du navigateur avec exactement deux colonnes.


<style type="text/css">
#multicol1 {
  column-count: 2;
}
</style>


Vous pouvez afficher ce sélecteur appliqué à un grand bloc de texte. (Internet Explorer 10 ou un navigateur compatible avec les propriétés multicolonne CSS3 sans préfixe est nécessaire pour générer correctement le rendu de cette page.)

La largeur et le nombre des colonnes peuvent également être exprimés à l’aide de la propriété raccourcie suivante :

PropriétéDescription

columns

Une valeur raccourcie qui spécifie des valeurs pour les propriétés column-width et column-count d’un élément multicolonne.

 

La syntaxe de cette propriété est la suivante :

columns: <column-width> <column-count>;

La syntaxe suivante est également valide :

columns: <column-count> <column-width>;

Si seul un entier est spécifié, column-width est définie sur auto et column-count est définie sur cet entier. Si seule une valeur de longueur est spécifiée, column-width est définie sur la valeur de longueur et column-count est définie sur auto. Si seule la valeur auto est spécifiée, column-width et column-count sont définies sur auto

Par exemple, le sélecteur suivant a ajouté la propriété columns et l’a définie comme étant égale à "auto 12em". Cela signifie que l’élément multicolonne aura une propriété column-width avec une valeur de 12 ems et une propriété column-count avec la valeur auto.


<style type="text/css">
#multicol3 {
  columns: auto 12em;
}
</style>


Vous pouvez afficher ce sélecteur appliqué à un grand bloc de texte. (Internet Explorer 10 ou un navigateur compatible avec les propriétés multicolonne CSS3 sans préfixe est nécessaire pour générer correctement le rendu de cette page.)

Spécification des espacements et des règles des colonnes

Des espacements et des règles sont placés entre les colonnes d’un élément multicolonne sur toute sa longueur. Les espacements créent de l’espace entre les colonnes pour faciliter la lecture. Une règle est placée au milieu d’un espacement de colonne et elle apparaît uniquement entre les colonnes qui ont du contenu.

Les propriétés suivantes spécifient les espacements et les règles des colonnes :

PropriétéDescription

column-gap

Spécifie la largeur de l’espacement entre les colonnes dans un élément multicolonne.

Les valeurs possibles pour cette propriété sont :

normal

La largeur par défaut de 1 em.

<length>

Une valeur de longueur relative ou absolue comme il est spécifié dans Référence concernant les unités et les valeurs CSS.

column-rule-color

Spécifie la couleur de toutes les règles de colonne dans un élément multicolonne. Cette propriété peut être définie avec n’importe quelle valeur de couleur prise en charge.

column-rule-style

Spécifie le style de toutes les règles de colonne dans un élément multicolonne. Cette propriété accepte les mêmes valeurs que la propriété border-style.

column-rule-width

Spécifie la largeur de toutes les règles de colonne dans un élément multicolonne. Cette propriété accepte les mêmes valeurs que la propriété border-width.

column-rule

Une valeur raccourcie qui spécifie des valeurs pour les propriétés column-rule-width, column-rule-style et column-rule-color d’un élément multicolonne.

La syntaxe de cette propriété est la suivante :

column-rule: <column-rule-width> <column-rule-style> <column-rule-color>;

 

Voici un exemple de plusieurs de ces propriétés dans un sélecteur :


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1em;
  column-rule-style: solid;
  column-rule-color: black;
}
</style>


Dans ce cas, les propriétés d’espacement et de règle des colonnes ont été spécifiées avec une largeur de 1 em. La règle de colonne est noir uni. Vous pouvez afficher ce sélecteur appliqué à un grand bloc de texte. (Internet Explorer 10 ou un navigateur compatible avec les propriétés multicolonne CSS3 sans préfixe est nécessaire pour générer correctement le rendu de cette page.)

Notez que l’exemple précédent aurait également pu être spécifié comme suit à l’aide de la propriété raccourcie column-rule :


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule: 1em solid black;
}
</style>


Spécification des sauts de colonnes

Vous pouvez spécifier quand du contenu doit être réparti entre des colonnes. Cela afin d’éviter que de contenu soit couper au milieu d’un paragraphe, d’une section, etc. Le concept de sauts de colonne est similaire à celui des sauts de page à l’impression et peut être déterminé par CSS (Cascading Style Sheets, feuilles de style en cascade) de la même manière.

Les propriétés suivantes déterminent les sauts de colonne :

PropriétéDescription

break-before

Spécifie le comportement du saut de colonne qui précède un bloc de contenu dans un élément multicolonne.

Cette propriété accepte les mêmes valeurs que la propriété page-break-before, plus les valeurs suivantes :

page

Toujours appliquer un saut de page avant la zone générée.

column

Toujours appliquer un saut de colonne avant la zone générée.

avoid-page

Éviter un saut de page avant la zone générée.

avoid-column

Éviter un saut de colonne avant la zone générée.

break-after

Spécifie le comportement du saut de colonne qui suit un bloc de contenu dans un élément multicolonne.

Cette propriété accepte les mêmes valeurs que la propriété page-break-after, plus les valeurs suivantes :

page

Toujours appliquer un saut de page après la zone générée.

column

Toujours appliquer un saut de colonne après la zone générée.

avoid-page

Éviter un saut de page après la zone générée.

avoid-column

Éviter un saut de colonne après la zone générée.

break-inside

Spécifie le comportement du saut de colonne qui se produit au sein d’un bloc de contenu dans un élément multicolonne.

Cette propriété accepte les mêmes valeurs que la propriété page-break-inside, plus les valeurs suivantes :

avoid-page

Éviter un saut de page à l’intérieur de la zone générée.

avoid-column

Éviter un saut de colonne à l’intérieur de la zone générée.

 

Voici un exemple de plusieurs de ces propriétés dans un sélecteur :


<style type="text/css">
#multicol5 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol5 h2 {
  column-span: all;
  background: lightgreen;
}
#multicol5 blockquote {
  break-inside: avoid-column;
}
</style>


Dans cet exemple, tous les éléments h2 sont précédés par un saut de colonne et par une marge de 2-em et aucun saut de colonne ne peut apparaître dans un élément blockquote. Vous pouvez afficher ces sélecteurs appliqués à un grand bloc de texte. (Internet Explorer 10 ou un navigateur compatible avec les propriétés multicolonne CSS3 sans préfixe est nécessaire pour générer correctement le rendu de cette page.)

Spécification de l’étendu d’un contenu sur les colonnes

Vous pouvez spécifier qu’un bloc de contenu s’étende sur plusieurs colonnes. Un élément qui est étendu sur plusieurs colonnes tient lieu de saut entre le contenu qui le précède et celui qui vient après. La propriété suivante détermine l’étendue du contenu sur les colonnes :

PropriétéDescription

column-span

Spécifie le nombre de colonnes sur lesquelles du contenu peut s’étendre dans un élément multicolonne.

Les valeurs possibles pour cette propriété sont :

all

Le bloc de contenu s’étend sur toutes les colonnes sur une page. Tout le contenu qui est déclaré avant le bloc de contenu apparaît avant ce dernier.

"1"

Il s’agit de la valeur par défaut. Le bloc de contenu ne s’étend pas sur plusieurs colonnes.

 

Voici un exemple de cette propriété dans un sélecteur :


<style type="text/css">
#multicol6 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol6 h2 {
  column-span: all;
  background: lightgreen;
}
</style>


Dans ce cas, tous les éléments h2 s’étendent sur toutes les colonnes et leur arrière-plan est en vert clair.

Vous pouvez afficher ces sélecteurs appliqués à un grand bloc de texte. (Internet Explorer 10 ou un navigateur compatible avec les propriétés multicolonne CSS3 sans préfixe est nécessaire pour générer correctement le rendu de cette page.)

Équilibrage du contenu des colonnes

Vous pouvez spécifier que vous souhaitez équilibrer le contenu des colonnes—c’est-à-dire, minimiser les variations de longueur des colonnes. Autrement, les colonnes seront remplies de façon séquentielle et auront différentes longueurs.

La propriété suivante détermine le remplissage des colonnes :

PropriétéDescription

column-fill

Spécifie l’influence du flux du contenu sur la longueur des colonnes dans un élément multicolonne.

Les valeurs possibles de cette propriété correspondent aux mots clés suivants :

balance

Les colonnes sont remplies de façon séquentielle de sorte que leurs hauteurs sont le plus possible équilibrées, en fonction des valeurs des autres propriétés de colonne.

auto

Il s’agit de la valeur par défaut. Les colonnes sont remplies de façon séquentielle de sorte que leur longueur peut différer, en fonction des valeurs des autres propriétés de colonne.

L’équilibrage des colonnes dépend également des valeurs des propriétés orphans et widows, si elles sont définies.

 

Voici un exemple de cette propriété dans un sélecteur :


<style type="text/css">
#multicol7 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
  column-fill: balance;
}
</style>


Dans ce cas, la propriété column-fill a été définie sur balance, ce qui signifie que les longueurs des colonnes sont le plus possible équilibrées.

Vous pouvez afficher ces sélecteurs appliqués à un grand bloc de texte. (Internet Explorer 10 ou un navigateur compatible avec les propriétés multicolonne CSS3 sans préfixe est nécessaire pour générer correctement le rendu de cette page.)

Informations de référence sur les API

Multi-column Layout

Exemples et didacticiels

Exemple de disposition multicolonne CSS
Concevoir des sites Web adaptatifs

Démonstrations du site Internet Explorer Test Drive

Tweet Columns
Hands On: Multi-column layout

Billets IEBlog

Aperçu de la plateforme IE10 et fonctionnalités CSS pour les dispositions adaptatives

Spécification

CSS Multi-column Layout Module

 

 

Afficher:
© 2015 Microsoft