Colonnes CSS3

  • Raccourci de la révision : Colonnes_CSS3
  • Titre de la révision : Colonnes CSS3
  • ID de la révision : 50710
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire one or more formatting changes

Contenu de la révision

 

Introduction

La lecture de textes dont les lignes sont trop longues pose souvent des difficultés ; si les yeux mettent trop de temps pour aller de la fin d'une ligne au début de ligne suivante, ils perdent le fil du texte. Aussi, pour utiliser au maximum un écran large, les auteurs devraient utiliser des colonnes de texte de largeur limitée et placées côte-à-côte comme le font les journaux. Malheureusement, c'est impossible à faire avec CSS et HTML sans imposer le placement de sauts de colonne à des endroits déterminés, restreindre fortement les balises permises dans le texte, ou se lancer dans des opérations de script héroïques.

Un brouillon de discussion sur les colonnes CSS3 suggère quelques nouvelles propriétés CSS pour supporter cette fonctionnalité. Un sous-ensemble des ces propriétés se comportant comme dans ce brouillon (à une exception près, voir ci-dessous) a été implémenté dans Firefox 1.5 et les version ultérieures.

Le blog de Robert O'Callahan utilise les colonnes CSS ; vous pouvez le tester avec une version de Firefox 1.5.

Utilisation des colonnes

Nombre et largeur de colonnes

Deux propriétés CSS contrôlent la présence et le nombre de colonnes qui seront affichées : {{ Cssxref("-moz-column-count") }} et {{ Cssxref("-moz-column-width") }}.

{{ Cssxref("-moz-column-count") }} définit un nombre précis de colonnes, par exemple,

<div style="-moz-column-count:2">Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, 
l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). 
À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 
dont la sortie est programmée pour jeudi.</div>

affichera le contenu dans deux colonnes (si vous utilisez Firefox 1.5 ou une version suivante) :

Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée pour jeudi.

{{ Cssxref("-moz-column-width") }} définit la largeur minimale souhaitée pour une colonne. Si {{ Cssxref("-moz-column-count") }} n'est pas défini également, le navigateur créera automatiquement autant de colonnes qu'il est possible d'adapter dans la largeur disponible.

<div style="-moz-column-width:20em;">Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, 
l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). 
À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 
dont la sortie est programmée pour jeudi.</div>

devient :

Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée pour jeudi.

Les détails précis sont décrits dans le brouillon CSS3.

Dans un bloc multi-colonnes, le contenu est automatiquement réparti d'une colonne vers la suivante si nécessaire. Toutes les fonctionnalités HTML, CSS et DOM sont supportées à l'intérieur des colonnes, ainsi que l'édition et l'impression.

Équilibrage de la hauteur

Le brouillon CSS3 précise que les hauteurs de colonnes doivent être équilibrées, c'est-à-dire que le navigateur définit automatiquement la hauteur maximale d'une colonne permettant aux hauteurs des contenus de chaque colonne d'être sensiblement identiques. Firefox réalise cette opération.

Toutefois, dans certaines situations, il peut être utile de définir la hauteur des colonnes explicitement, et laisser la mise en page commencer par remplir la première colonne en créant ensuite autant de colonnes que nécessaire vers la droite. Par exemple, les articles sur http://iht.com/ procèdent ainsi (en utilisant un script). De ce fait, nous avons étendu les spécifications du brouillon de telle façon que si une propriété CSS {{ Cssxref("height") }} est définie sur un bloc multi-colonnes, chaque colonne peut alors s'agrandir jusqu'à cette hauteur avant qu'une nouvelle colonne ne soit ajoutée. Ce mode est beaucoup plus efficace pour la mise en page.

Écart entre colonnes

Par défaut, chaque colonne est directement adjacente à la suivante. La représentation n'est généralement pas très bonne. Vous pouvez améliorer la situation en utilisant un style CSS {{ Cssxref("padding") }} à l'intérieur des colonnes, mais il est plus facile d'appliquer la propriété {{ Cssxref("-moz-column-gap") }} au bloc multi-colonnes :

<div style="-moz-column-width:20em; -moz-column-gap:2em;">Pour la sortie prochaine 
de Mozilla Firefox 1.5 Beta 1, l'arbre sera verrouillé ce soir à 11:59pm 
Pacific Daylight Time (UTC -0700). À partir de ce point, aucune vérification ou 
entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est 
programmée pour jeudi.</div>
Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée pour jeudi.

Dégradation élégante

Les propriétés {{ Cssxref("-moz-column") }} seront simplement ignorées par les navigateurs qui ne supportent pas les colonnes multiples. Ainsi, il est relativement facile de réaliser une mise en page qui affiche une seule colonne pour ces navigateurs et des colonnes multiples pour Firefox 1.5.

Conclusion

Les colonnes CSS3 représentent une nouvelle approche pour la mise en page qui aidera les développeurs du Web à utiliser au mieux la surface disponible à l'écran. Les développeurs imaginatifs peuvent y trouver de nombreux usages, en particulier avec l'équilibrage automatique des hauteurs.

Voir également

{{ CSS_Reference:Columns() }}, Référence CSS, Référence CSS:Extensions Mozilla

Références supplémentaires

{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}

Source de la révision

<p> </p>
<h3 id="Introduction" name="Introduction">Introduction</h3>
<p>La lecture de textes dont les lignes sont trop longues pose souvent des difficultés ; si les yeux mettent trop de temps pour aller de la fin d'une ligne au début de ligne suivante, ils perdent le fil du texte. Aussi, pour utiliser au maximum un écran large, les auteurs devraient utiliser des colonnes de texte de largeur limitée et placées côte-à-côte comme le font les journaux. Malheureusement, c'est impossible à faire avec CSS et HTML sans imposer le placement de sauts de colonne à des endroits déterminés, restreindre fortement les balises permises dans le texte, ou se lancer dans des opérations de script héroïques.</p>
<p><a class="external" href="http://www.w3.org/TR/css3-multicol/">Un brouillon de discussion sur les colonnes CSS3</a> suggère quelques nouvelles propriétés CSS pour supporter cette fonctionnalité. Un sous-ensemble des ces propriétés se comportant comme dans ce brouillon (à une exception près, voir ci-dessous) a été implémenté dans Firefox 1.5 et les version ultérieures.</p>
<p><a class="external" href="http://weblogs.mozillazine.org/roc/">Le blog de Robert O'Callahan</a> utilise les colonnes CSS ; vous pouvez le tester avec une version de Firefox 1.5.</p>
<h3 id="Utilisation_des_colonnes" name="Utilisation_des_colonnes">Utilisation des colonnes</h3>
<h4 id="Nombre_et_largeur_de_colonnes" name="Nombre_et_largeur_de_colonnes">Nombre et largeur de colonnes</h4>
<p>Deux propriétés CSS contrôlent la présence et le nombre de colonnes qui seront affichées : {{ Cssxref("-moz-column-count") }} et {{ Cssxref("-moz-column-width") }}.</p>
<p>{{ Cssxref("-moz-column-count") }} définit un nombre précis de colonnes, par exemple,</p>
<pre>&lt;div style="-moz-column-count:2"&gt;Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, 
l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). 
À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 
dont la sortie est programmée pour jeudi.&lt;/div&gt;
</pre>
<p>affichera le contenu dans deux colonnes (si vous utilisez Firefox 1.5 ou une version suivante) :</p>
<div style="-moz-column-count:2">Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée pour jeudi.</div>
<p>{{ Cssxref("-moz-column-width") }} définit la largeur minimale souhaitée pour une colonne. Si {{ Cssxref("-moz-column-count") }} n'est pas défini également, le navigateur créera automatiquement autant de colonnes qu'il est possible d'adapter dans la largeur disponible.</p>
<pre>&lt;div style="-moz-column-width:20em;"&gt;Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, 
l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). 
À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 
dont la sortie est programmée pour jeudi.&lt;/div&gt;
</pre>
<p>devient :</p>
<div style="-moz-column-width:20em;">Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée pour jeudi.</div>
<p>Les détails précis sont décrits dans <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">le brouillon CSS3</a>.</p>
<p>Dans un bloc multi-colonnes, le contenu est automatiquement réparti d'une colonne vers la suivante si nécessaire. Toutes les fonctionnalités HTML, CSS et DOM sont supportées à l'intérieur des colonnes, ainsi que l'édition et l'impression.</p>
<h4 id=".C3.89quilibrage_de_la_hauteur" name=".C3.89quilibrage_de_la_hauteur">Équilibrage de la hauteur</h4>
<p>Le brouillon CSS3 précise que les hauteurs de colonnes doivent être équilibrées, c'est-à-dire que le navigateur définit automatiquement la hauteur maximale d'une colonne permettant aux hauteurs des contenus de chaque colonne d'être sensiblement identiques. Firefox réalise cette opération.</p>
<p>Toutefois, dans certaines situations, il peut être utile de définir la hauteur des colonnes explicitement, et laisser la mise en page commencer par remplir la première colonne en créant ensuite autant de colonnes que nécessaire vers la droite. Par exemple, les articles sur <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> procèdent ainsi (en utilisant un script). De ce fait, nous avons étendu les spécifications du brouillon de telle façon que si une propriété CSS {{ Cssxref("height") }} est définie sur un bloc multi-colonnes, chaque colonne peut alors s'agrandir jusqu'à cette hauteur avant qu'une nouvelle colonne ne soit ajoutée. Ce mode est beaucoup plus efficace pour la mise en page.</p>
<h4 id=".C3.89cart_entre_colonnes" name=".C3.89cart_entre_colonnes">Écart entre colonnes</h4>
<p>Par défaut, chaque colonne est directement adjacente à la suivante. La représentation n'est généralement pas très bonne. Vous pouvez améliorer la situation en utilisant un style CSS {{ Cssxref("padding") }} à l'intérieur des colonnes, mais il est plus facile d'appliquer la propriété {{ Cssxref("-moz-column-gap") }} au bloc multi-colonnes :</p>
<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap:2em;"&gt;Pour la sortie prochaine 
de Mozilla Firefox 1.5 Beta 1, l'arbre sera verrouillé ce soir à 11:59pm 
Pacific Daylight Time (UTC -0700). À partir de ce point, aucune vérification ou 
entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est 
programmée pour jeudi.&lt;/div&gt;
</pre>
<div style="-moz-column-width:20em; -moz-column-gap:2em;">Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée pour jeudi.</div>
<h4 id="D.C3.A9gradation_.C3.A9l.C3.A9gante" name="D.C3.A9gradation_.C3.A9l.C3.A9gante">Dégradation élégante</h4>
<p>Les propriétés {{ Cssxref("-moz-column") }} seront simplement ignorées par les navigateurs qui ne supportent pas les colonnes multiples. Ainsi, il est relativement facile de réaliser une mise en page qui affiche une seule colonne pour ces navigateurs et des colonnes multiples pour Firefox 1.5.</p>
<h3 id="Conclusion" name="Conclusion">Conclusion</h3>
<p>Les colonnes CSS3 représentent une nouvelle approche pour la mise en page qui aidera les développeurs du Web à utiliser au mieux la surface disponible à l'écran. Les développeurs imaginatifs peuvent y trouver de nombreux usages, en particulier avec l'équilibrage automatique des hauteurs.</p>
<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3>
<p>{{ CSS_Reference:Columns() }}, <a href="/fr/CSS/Référence_CSS" title="fr/CSS/Référence_CSS">Référence CSS</a>, <a href="/fr/CSS/Référence_CSS/Extensions_Mozilla" title="fr/CSS/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a></p>
<h3 id="R.C3.A9f.C3.A9rences_suppl.C3.A9mentaires" name="R.C3.A9f.C3.A9rences_suppl.C3.A9mentaires">Références supplémentaires</h3>
<ul> <li><a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
</ul>
<p>{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}</p>
Revenir à cette révision