1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
title: CSS3 Spalten
slug: Web/CSS/CSS_Columns/Using_multi-column_layouts
tags:
- CSS
- CSS3
translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
original_slug: CSS3_Columns
---
<p>Viele Benutzer haben Schwierigkeiten Texte zu lesen, wenn die Zeilen sehr lang sind. Es dauert dann zu lange für das Auge vom Ende der Zeile zum Anfang einer Neuen zu springen. Sie verrutschen unter Umständen in der Zeile und der Lesefluss wird unterbrochen. Um dennoch das Maximum an Bildfläche von großen Bildschirmen zu nutzen, sollten Autoren eine begrenzte Spaltenbreite verwenden, die den Text dann nebeneinander platziert (vergleichbar mit dem Spaltensatz in Zeitungen). Unglücklicherweise ist es mittels HTML und CSS 2.1 nicht möglich Spaltenumbrüche festzulegen, ohne dass diese an festen Positionen gebunden sind. Das erlaubte Markup im Text muss stark eingeschränkt werden oder die Spalten müssen durch die Verwendung von Scripts erstellt werden.</p>
<p>Die <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Spezifikation</a> schlägt einige neue CSS Eigenschaften vor, die diese Funktionen mittels CSS ermöglichen. In Firefox 1.5 und später wurde ein Teil dieser Eigenschaften implementiert, um das Verhalten, so wie es in der Spezifikation beschrieben ist (mit einer Ausnahme; siehe unten), zu realisieren.</p>
<p>In <a class="external" href="http://weblogs.mozillazine.org/roc/">Robert O'Callahans Blog</a> kann man den Einsatz von CSS Columns mit einem Firefox 1.5 oder später betrachten.</p>
<h2 id="Verwendung_von_Spalten">Verwendung von Spalten</h2>
<h3 id="Spaltenanzahl_und_-breite">Spaltenanzahl und -breite</h3>
<p>Zwei CSS Eigenschaften steuern, ob und wie viele Spalten erscheinen werden: <a href="/de/CSS/-moz-column-count" title="de/CSS/-moz-column-count"><code>-moz-column-count</code></a> und <a href="/de/CSS/-moz-column-width" title="de/CSS/-moz-column-width"><code>-moz-column-width</code></a>.</p>
<p><code>-moz-column-count</code> legt die Anzahl an Spalten auf eine bestimmte Zahl fest, z.B.:</p>
<pre class="brush: html"><div style="-moz-column-count:2">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
da dieser am Donnerstag released werden soll.</div></pre>
<p>Dieser Codeschnipsel wird den Inhalt in zwei Spalten anzeigen (funktioniert nur unter Firefox 1.5 oder höher):</p>
<div style="">
In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div>
<p> </p>
<p><code>-moz-column-width</code> legt die minimal erwünschte Spaltenbreite fest.<br>
Wenn <code>-moz-column-count</code> nicht ebenfalls festgelegt wurde, wird der Browser automatisch so viele Spalten erstellen, wie in die verfügbare Breite passen.</p>
<pre class="brush: html"><div style="-moz-column-width:20em;">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
da dieser am Donnerstag released werden soll.</div></pre>
<p>Wird so angezeigt:</p>
<div style="-moz-column-width: 20em;">
In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div>
<p> </p>
<p>Die genauen Details dazu sind in der <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 Spezifikation</a> beschrieben.</p>
<p>In einem mehrspaltigen Block, wird der Inhalt (wenn nötig) automatisch von der einen in die nächste Spalte transportiert. Alle HTML, CSS und DOM Funktionen werden innerhalb von Spalten unterstützt, auch beim Bearbeiten und Drucken des Textes.</p>
<h3 id="Höhenausgleich">Höhenausgleich</h3>
<p>In der CSS3 Spezifikation ist festgelegt, dass sich die Spaltenhöhen ausgleichen müssen: Das bedeutet, dass der Browser die maximale Höhe automatisch festlegt, sodass die Höhe jeder Spalte ungefähr gleich sind. Firefox macht genau das.</p>
<p>Es ist jedoch in einigen Situationen nützlich eine maximale Höhe der Spalten explizit festzulegen, den Inhalt in die erste Spalte zu legen und dann soviele Spalten wie nötig zu erstellen, die sich nach rechts austrecken. Daher wurde das Spaltenmodel erweitert. Wenn die <a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a> Eigenschaft in einem mehrspaltigen Block festgelegt wurde, kann jede Spalte nur so hoch wie diese Höhenangabe werden und nicht größer, bevor dann eine neue Spalte hinzugefügt wird. Dieser Modus ist effizienter für das Layout.</p>
<h3 id="Spaltenlücken">Spaltenlücken</h3>
<p>Seit Firefox 3 gibt es standardmäßig eine Lücke von <code>1em</code> zwischen den einzelnen Spalten (vorher war jede Spalte direkt neben der nächsten Spalte).<br>
Es ist einfach das Standardverhalten zu ändern, in dem man die <a href="/de/CSS/-moz-column-gap" title="de/CSS/-moz-column-gap"><code>-moz-column-gap</code></a> Eigenschaft einsetzt:</p>
<pre class="brush: html"><div style="-moz-column-width:20em; -moz-column-gap:2em;">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
da dieser am Donnerstag released werden soll.</div></pre>
<div style="-moz-column-width: 20em;">
In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div>
<p> </p>
<h3 id="Graceful_Degradation_(Abwärtskompatibilität_und_Fehlertoleranz)">Graceful Degradation (Abwärtskompatibilität und Fehlertoleranz)</h3>
<p>Die <a href="/de/CSS/-moz-column" title="de/CSS/-moz-column"><code>-moz-column</code></a> Eigenschaft wird von Browsern, die Spalten nicht unterstützen, einfach ignoriert. Daher ist es relativ einfach ein Layout zu erstellen, dass den Inhalt in diesen Browsern in einer einzigen Spalte anzeigt, während in Firefox 1.5 und später mehrere Spalten angezeigt werden.</p>
<h2 id="Fazit">Fazit</h2>
<p>CSS3 Spalten bieten eine neue Möglichkeit für Webentwickler das Beste aus der Bildfläche herauszuholen. Fantasievolle Entwickler finden vielleicht weitere Verwendungsmöglichkeiten, bei denen die Funktion des automatischen Höhenausgleichs zum Einsatz kommen könnte.</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/CSS/-moz-column-width" title="de/CSS/-moz-column-width"><code>-moz-column-width</code></a>, <a href="/de/CSS/-moz-column-count" title="de/CSS/-moz-column-count"><code>-moz-column-count</code></a>, <a href="/de/CSS/-moz-column-gap" title="de/CSS/-moz-column-gap"><code>-moz-column-gap</code></a>, <a href="/de/CSS/-moz-column-rule" title="de/CSS/-moz-column-rule"><code>-moz-column-rule</code></a>, <a href="/de/CSS/-moz-column-rule-width" title="de/CSS/-moz-column-rule-width"><code>-moz-column-rule-width</code></a>, <a href="/de/CSS/-moz-column-rule-style" title="de/CSS/-moz-column-rule-style"><code>-moz-column-rule-style</code></a>, <a href="/de/CSS/-moz-column-rule-color" title="de/CSS/-moz-column-rule-color"><code>-moz-column-rule-color</code></a></li>
<li><a href="/de/CSS_Referenz" title="de/CSS_Referenz">CSS Referenz</a>, <a href="/de/CSS_Referenz/Mozilla_CSS_Erweiterungen" title="de/CSS_Referenz/Mozilla_CSS_Erweiterungen">Mozilla CSS Erweiterungen</a></li>
</ul>
<h2 id="Zusätzliche_Referenzen">Zusätzliche Referenzen</h2>
<ul>
<li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html">Robert O'Callahan: »Gecko 1.8 For Web Developers: Columns«</a></li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "en": "en/CSS/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}</p>
|
