Colunas CSS3

  • Slug da revisão: Colunas_CSS3
  • Título da revisão: Colunas CSS3
  • ID da revisão: 189709
  • Criado:
  • Autor: DynoTiao
  • É revisão atual? Não
  • Comentário /* Introduction */

Conteúdo da revisão

Introdução

Pessoas têm problemas lendo textos se as linhas são longas; se as linhas são longas para os olhos moverem-se do fim para o começo de outra linha, elas perdem a linha em que estão. Por essa razão, faça o máximo para usar uma tela grande, os autores deveriam ter larguras limitadas de colunas para os textos colocados lado a lado, somente os jornais fazem isso. Infelizmente isso é impossível de fazer com o CSS e o HTML sem forçar a quebra de colunas numa posição fixada, ou severamente restringido a margem permitida no texto, ou usando um script heróico.

A CSS3 draft sugere algumas novidades nas propriedades do CSS para suportar essa característica. No Firefox 1.5 e posteriores nós implementamos um subconjunto dessas propriedades para comportar-se como descrito no “draft” (com uma exceção explicada abaixo).

Robert O'Callahan's blog usa o CSS colunas, verifique isto no Firefox 1.5

Using Columns

Column Count And Width

Two CSS properties control whether and how many columns will appear: -moz-column-count and -moz-column-width.

-moz-column-count sets the number of columns to a particular number. E.g.,

<div style="-moz-column-count:2">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>

will display the content in two columns (if you're using Firefox 1.5 or greater):

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.

-moz-column-width sets the minimum desired column width. If -moz-column-count is not also set, then the browser will automatically make as many columns as fit in the available width.

<div style="-moz-column-width:20em;">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>

becomes:

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.

The exact details are described in the CSS3 draft.

In a multicolumn block, content is automatically flowed from one column into the next as needed. All HTML, CSS and DOM functionality is supported within columns, as are editing and printing.

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 Degradation

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
{{ wiki.languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}

Fonte da revisão

<p>
</p>
<h3 name="Introdu.C3.A7.C3.A3o"> Introdução </h3>
<p>Pessoas têm problemas lendo textos se as linhas são longas; se as linhas são longas para os olhos moverem-se do fim para o começo de outra linha, elas perdem a linha em que estão. Por essa razão, faça o máximo para usar uma tela grande, os autores deveriam ter larguras limitadas de colunas para os textos colocados lado a lado, somente os jornais fazem isso. Infelizmente isso é impossível de fazer com o CSS e o HTML sem forçar a quebra de colunas numa posição fixada, ou severamente restringido a margem permitida no texto, ou usando um script heróico.
</p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">A CSS3 draft</a> sugere algumas novidades nas propriedades do CSS para suportar essa característica. No Firefox 1.5 e posteriores nós implementamos um subconjunto dessas propriedades para comportar-se como descrito no “draft” (com uma exceção explicada abaixo).
</p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">Robert O'Callahan's blog</a> usa o CSS colunas, verifique isto no Firefox 1.5
</p>
<h3 name="Using_Columns"> Using Columns </h3>
<h4 name="Column_Count_And_Width"> Column Count And Width </h4>
<p>Two CSS properties control whether and how many columns will appear: <code>-moz-column-count</code> and <code>-moz-column-width</code>.
</p><p><code>-moz-column-count</code> sets the number of columns to a particular number. E.g.,
</p>
<pre>&lt;div style="-moz-column-count:2"&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>
<p>will display the content in two columns (if you're using Firefox 1.5 or greater):
</p>
<div style="-moz-column-count:2">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>
<p><code>-moz-column-width</code> sets the minimum desired column width. If <code>-moz-column-count</code> is not also set, then the browser will automatically make as many columns as fit in the available width.
</p>
<pre>&lt;div style="-moz-column-width:20em;"&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>
<p>becomes:
</p>
<div style="-moz-column-width:20em;">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>
<p>The exact details are described in <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">the CSS3 draft</a>.
</p><p>In a multicolumn block, content is automatically flowed from one column into the next as needed. All HTML, CSS and DOM functionality is supported within columns, as are editing and printing.
</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_Degradation"> Graceful Degradation </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
</li></ul>
{{ wiki.languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}
Reverter para esta revisão