Colonnes CSS3

  • Raccourci de la révision : Colonnes_CSS3
  • Titre de la révision : Colonnes CSS3
  • ID de la révision : 50696
  • Créé :
  • Créateur : Chbok
  • Version actuelle ? Non
  • Commentaire /* Height Balancing */ suite de la traduction

Contenu de la révision

Introduction

Les gens ont des difficultés à lire des textes dont les lignes sont trop longues ; 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 large écran, les auteurs devraient limiter la largeur des colonnes et placer le texte côte-à-côte comme le font les journaux. Malheureusement il est impossible de le faire avec du CSS ou du HTML sans imposer une césure dans la colonne, ou de restreindre fortement les balises permises dans le texte, ou par un script héroïque.

Un brouillon de discussion sur les colonnes CSS3 suggère quelques nouvelles propriétés CSS pour supporter cette fonctionnalité. Nous avons implémenté sous Firefox 1.5 et les version ultérieures un sous ensemble des ces propriétés se comportant comme dans ce brouillon (à une exception expliquée si dessous).

Le blog de Robert O'Callahan utilise les colonnes CSS ; testez le avec une version de Firefox 1.5

Utilisations des colonnes

Nombre et largeur de colonnes

Deux propriétés CSS contrôlent la présence et le nombre de colonnes qui doivent apparaître : -moz-column-count et -moz-column-width.

-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 vérouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). 
Après ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 
dont la sortie est programmée à 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 vérouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). Après ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée à Jeudi.

-moz-column-width définit la largeur minimale souhaitée pour une colonne. Si -moz-column-count n'est pas en plus défini, le navigateur créera automatiquement autant de colonnes s'adaptant dans la largeur disponible.

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

devient :

Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, l'arbre sera vérouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). Après ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée à 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ée, 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 vouloir 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 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.

Column Gaps

By default each column is directly adjacent to the next column. This usually doesn't look good. You can use CSS padding within the columns to improve the situation, but it's often easier to apply the -moz-column-gap property to the multicolumn block:

<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for
the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
will be accepted for Firefox 1.5 Beta 1, which is set for release on
Thursday.</div>
In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

Graceful Degredation

The -moz-column properties will just be ignored by non-columns-supporting browsers. Therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in Firefox 1.5.

Conclusion

CSS3 columns are a new layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.

Additional References

  • http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html Catégorie à supprimer ensuite
{{ wiki.languages( { "en": "en/CSS3_Columns" } ) }}

Source de la révision

<h3 name="Introduction"> Introduction </h3>
<p>Les gens ont des difficultés à lire des textes dont les lignes sont trop longues ; 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 large écran, les auteurs devraient limiter la largeur des colonnes et placer le texte côte-à-côte comme le font les journaux. Malheureusement il est impossible de le faire avec du CSS ou du HTML sans imposer une césure dans la colonne, ou de restreindre fortement les balises permises dans le texte, ou par un script héroïque.
</p><p><a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">Un brouillon de discussion sur les colonnes CSS3</a> suggère quelques nouvelles propriétés CSS pour supporter cette fonctionnalité. Nous avons implémenté sous Firefox 1.5 et les version ultérieures un sous ensemble des ces propriétés se comportant comme dans ce brouillon (à une exception expliquée si dessous).
</p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">Le blog de Robert O'Callahan</a> utilise les colonnes CSS ; testez le avec une version de Firefox 1.5
</p>
<h3 name="Utilisations_des_colonnes"> Utilisations des colonnes </h3>
<h4 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 doivent apparaître : <code>-moz-column-count</code> et <code>-moz-column-width</code>.
</p><p><code>-moz-column-count</code> 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 vérouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). 
Après ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 
dont la sortie est programmée à 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 vérouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). Après ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée à Jeudi.</div>
<p><code>-moz-column-width</code> définit la largeur minimale souhaitée pour une colonne. Si <code>-moz-column-count</code> n'est pas en plus défini, le navigateur créera automatiquement autant de colonnes s'adaptant 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 vérouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). 
Après ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 
dont la sortie est programmée à 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 vérouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). Après ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 dont la sortie est programmée à 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 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ée, 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 vouloir 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 <code>height</code> 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 name="Column_Gaps"> Column Gaps </h4>
<p>By default each column is directly adjacent to the next column. This usually doesn't look good. You can use CSS padding within the columns to improve the situation, but it's often easier to apply the <code>-moz-column-gap</code> property to the multicolumn block:
</p>
<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap:2em;"&gt;In preparation for
the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
will be accepted for Firefox 1.5 Beta 1, which is set for release on
Thursday.&lt;/div&gt;
</pre>
<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
<h4 name="Graceful_Degredation"> Graceful Degredation </h4>
<p>The -moz-column properties will just be ignored by non-columns-supporting browsers. Therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in Firefox 1.5.
</p>
<h3 name="Conclusion"> Conclusion </h3>
<p>CSS3 columns are a new layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.
</p>
<h3 name="Additional_References"> Additional References </h3>
<ul><li> http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html <span class="comment">Catégorie à supprimer ensuite</span>
</li></ul>
{{ wiki.languages( { "en": "en/CSS3_Columns" } ) }}
Revenir à cette révision