MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 189719 of Colunas CSS3

  • Slug da revisão: Colunas_CSS3
  • Título da revisão: Colunas CSS3
  • ID da revisão: 189719
  • Criado:
  • Autor: Toyux
  • É revisão atual? Não
  • Comentário /* Using Columns */

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

Usando Colunas

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.

Balanceamento de Altura

O rascunho do CSS3 especifica que as alturas de colunas devem ser balanceadas: isto é, o navegador define automaticamente a altura máxima da coluna, então as alturas do conteúdo em cada coluna são aproximadamente iguais. O Firefox faz isto.

Contudo, em algumas situações também é útil definir a altura máxima das colunas explicitamente, 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.

Graciosa Degradação

A propriedade "-moz-columm" somente será ignorada pelos navegadores que não tenham suporte a colunas. Por essa razão é relativamente fácil para criar um layout que aparecerá numa simples coluna naqueles navegadores e usará multiplas colunas no Firefox 1.5

Conclusão

CSS3 colunas é um novo layout primitivo que ajudará desenvolvedores da Web a fazer um melhor uso do real tamanho da tela do computador. Desenvolvedores poderão encontrar muitos usos para ele, especialmente com a caracteristica de altura automática.

Referências adicionais

  • 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="Usando_Colunas"> Usando Colunas </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="Balanceamento_de_Altura"> Balanceamento de Altura </h4>
<p>O rascunho do CSS3 especifica que as alturas de colunas devem ser balanceadas: isto é, o navegador define automaticamente a altura máxima da coluna, então as alturas do conteúdo em cada coluna são aproximadamente iguais. O Firefox faz isto.
</p><p>Contudo, em algumas situações também é útil definir a altura máxima das colunas explicitamente, 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="Graciosa_Degrada.C3.A7.C3.A3o"> Graciosa Degradação </h4>
<p>A propriedade "-moz-columm" somente será ignorada pelos navegadores que não tenham suporte a colunas. Por essa razão é relativamente fácil para criar um layout que aparecerá numa simples coluna naqueles navegadores e usará multiplas colunas no Firefox 1.5
</p>
<h3 name="Conclus.C3.A3o"> Conclusão </h3>
<p>CSS3 colunas é um novo layout primitivo que ajudará desenvolvedores da Web a fazer um melhor uso do real tamanho da tela do computador. Desenvolvedores poderão encontrar muitos usos para ele, especialmente com a caracteristica de altura automática.
</p>
<h3 name="Refer.C3.AAncias_adicionais"> Referências adicionais </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