Colonnes CSS3

  • Raccourci de la révision : Colonnes_CSS3
  • Titre de la révision : Colonnes CSS3
  • ID de la révision : 50695
  • Créé :
  • Créateur : Chbok
  • Version actuelle ? Non
  • Commentaire /* Column Count And Width */ 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.

Height Balancing

The CSS3 draft specifies that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.

However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. For example, articles at http://iht.com/ do this (using script). Therefore we extend the draft so that if the CSS height property is set on a multicolumn block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

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="Height_Balancing"> Height Balancing </h4>
<p>The CSS3 draft specifies that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.
</p><p>However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. For example, articles at http://iht.com/ do this (using script). Therefore we extend the draft so that if the CSS <code>height</code> property is set on a multicolumn block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.
</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