CSS 2.1 ::Referenz ::Eigenschaften

CSS 2.1: display

Erläuterungen

Die Eigenschaft display wurde vor allem im Hinblick auf Auszeichnungssprachen wie XML geschaffen. Anders als in HTML ist dort die Darstellung der Elemente nicht vordefiniert. So ist z. B. für das Element TD in HTML eindeutig definiert, wie und in welchem Kontext es dargestellt wird. Ebenso ist für alle anderen HTML-Elemente festgelegt, ob sie z. B. einen Kontext zur Inline- Formatierung oder einen Kontext zur Blockformatierung erzeugen.

Deshalb ist diese Eigenschaft für die Darstellung von herkömmlichen HTML-Seiten am Bildschirm im Grunde genommen nicht notwendig und sollte nur mit Vorsicht angewandt werden. Zusätzlich ist die Implementierung der display-Werte durch die Browser noch uneinheitlich, deshalb sollte man gründlich testen, wenn man display anwenden will.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'display' inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Die für display möglichen Werte lassen sich grundsätzlich in zwei Kategorien einteilen: Werte, die sich auf Tabellen beziehen und andere Werte, die innerhalb des Elementflusses die Stellung der Elemente zueinander verändern, ohne jedoch die Floating- oder Positionierungseigenschaften eines Elements anzutasten. Andererseits wird der berechnete Wert für display von den Eigenschaften position und float beeinflusst. Im Grundlagenteil dieser Website ist der Zusammenhang zwischen display, position und float genau erklärt.

Außerhalb von Tabellen:

inline
Dieser Wert bedingt, dass ein Element anhand des Kontexts zur Inline- Formatierung dargestellt wird, d.h. es paßt sich in einen laufenden Textabsatz ein. Die Abmessungen eines Inline- Level- Elements lassen sich nur durch die font- und die border-Eigenschaften sowie padding beeinflussen. Die Eigenschaften width, height und margin haben keine Wirkung.
block
Durch diesen Wert wird ein Element allgemein im Kontext zur Blockformatierung, d.h. als Block- Level- Element, dargestellt.
list-item

Der Wert run-in korrekt dargestellt.
Oben: normale Darstellung einer Überschrift h2.
Mitte: h2 { display: run-in } mit nachfolgender Block- Box.
Unten: h2 { display: run-in } mit nachfolgender Inline- Box.

Dieser Wert bedingt, dass ein Element im Kontext zur Blockformatierung als Punkt einer Liste dargestellt wird.
run-in
Dieser Wert verwandelt zuerst die Box des eingeschlossenen Elements in eine Run-In-Box. Wenn eine Block-Box (die nicht mit position oder float formatiert ist) der Run-In-Box als unmittelbarer Nachbar folgt, dann wird die Run-In-Box zur ersten Inline-Box dieser Block-Box.
In allen anderen Fällen wird die Run-In-Box zur Block-Box.
compact
Dieser Wert wurde nicht von CSS 2 in den Entwurf für CSS 2.1 mit übernommen. Er sollte bewirken, dass das Element seitlich neben das folgende (Block-Level-)Element plaziert wird.
marker
Dieser Wert wurde nicht von CSS 2 in den Entwurf für CSS 2.1 mit übernommen. Er sollte in Verbindung mit den Pseudoelementen :before und :after dazu dienen, eine Markierung neben dem Text anzubringen.
inline-block
Dieser Wert wurde mit CSS 2.1 neu eingeführt. Er bewirkt, dass das Element äußerlich wie eine Inline- Box innerhalb der Textzeile formatiert ist, ähnlich einem replazierten Element. Das Innere einer Inline-Block- Box ist jedoch wie eine Block- Box formatiert. Das Element innerhalb der Box ist wie ein replaziertes Element formatiert. Damit lassen sich für ein Element im Kontext zur Inline- Formatierung die Eigenschaften width, height und margin deklarieren.
none
Dieser Wert generiert nicht eine unsichtbare Box, sondern überhaupt kein Element.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Es gibt zwei Unterschiede zwischen den Deklarationen visibility:hidden; und display:none;. Display:none; bewirkt, dass die so deklarierte Box überhaupt nicht generiert wird und der Browser die Seite so aufbaut, als wenn diese Box nicht vorhanden wäre. Durch visibility:hidden; dagegen wird die Box samt Inhalt nur 'durchsichtig', ihre Fläche bleibt freigestellt.
Der zweite Unterschied bezieht sich auf die Nachkommenelemente. Kindelemente eines mit display:none deklarierten Elementes können nicht ausgegeben werden, auch dann nicht, wenn sie anders als mit none deklariert werden. Nachkommenelemente von mit visibility:hidden deklarierten Elementen erben diese Deklarierung, können aber selbst durch den Wert visible wieder sichtbar sein.

Ausschließlich in Tabellen:

table
Definiert, dass sich das Element im Kontext zur Blockformatierung wie das HTML-Element <table> verhält, d.h. innerhalb des Elementflusses wird es wie ein eigener Block dargestellt.
inline-table

Wert inline-table:
korrekte Darstellung (siehe Basislinie)

Definiert das Element als Tabelle in einem Kontext zur Inline- Formatierung, d.h. es wird nicht wie ein eigener Block dargestellt, sondern kann innerhalb eines Blockes Text integriert werden.
table-row
Definiert, dass sich das Element wie das HTML-Element <tr> verhält.
table-row-group
Definiert, dass sich das Element wie das HTML-Element <tbody> verhält, d.h. eine oder mehrere Tabellenreihen zusammenfaßt.
table-header-group
Definiert, dass sich das Element wie das HTML-Element <thead> verhält, d.h. eine oder mehrere Tabellenzellen zusammenfaßt, die dann vor allen anderen Tabellenzellen und nach einer evtl. auftretenden Tabellenüberschrift ausgegeben werden. Bei der Druckausgabe kann ein Anwenderprogramm dieses Element am Kopf jeder Seite ausgeben, über die die Tabelle sich hinzieht.
table-footer-group
Definiert, dass sich das Element wie das HTML-Element <tfoot> verhält, d.h. eine oder mehrere Tabellenzellen zusammenfaßt, die dann nach allen anderen Tabellenzellen und vor einer evtl. auftretenden Tabellenunterschrift ausgegeben werden. Bei der Druckausgabe kann ein Anwenderprogramm dieses Element am Fuß jeder Seite ausgeben, über die die Tabelle sich hinzieht.
table-column
Definiert, dass sich das Element wie das HTML-Element <col> verhält: die so definierten Werte wirken auf alle Zellen einer senkrecht untereinander angeordneten Spalte. Da Tabellenspalten nicht im Dokumentstammbaum auftauchen, werden sie nicht als Element dargestellt. Dennoch können sie Attribute aufweisen, die sich bei der Darstellung der Tabellenzellen auswirken.
table-column-group
Definiert, dass sich das Element wie das HTML-Element <colgroup> verhält, d.h. die Definitionen für eine oder mehrere Spalten einer Tabelle zusammenfaßt.
table-cell
Definiert, dass sich das Element wie das HTML-Element <td> verhält, d.h. wie eine einzelne Zelle einer Tabelle.
table-caption
Definiert, dass sich das Element wie das HTML-Element <caption> verhält, d.h. eine Tabellenunterschrift oder -überschrift generiert.

Zusammenhänge zwischen display, position und float

Diese drei Eigenschaften sind verantwortlich für das Layout und die Generierung der Boxes eines Webdokuments. Sie arbeiten folgendermaßen zusammen:

  • Wenn für das display eines Elementes der Wert none deklariert ist, dann sind position und float nicht relevant und das Element generiert keine Boxes.
  • Wenn der Wert für display nicht none ist, gilt folgendes:
    • Wenn der Wert für position entweder absolute oder fixed ist, dann ist die Box absolut positioniert und der Berechnete Wert für float ist immer none (der Ausgangswert), auch wenn er anders spezifiziert wurde. Der Berechnete Wert für display wird entsprechend der unten stehenden Tabelle gesetzt. Die Position der Box wird in diesem Fall festgelegt durch die Eigenschaften top, right, bottom und left und den umschließenden Block der Box.
    • Wenn der Wert für position entweder static oder relative ist, dann gilt:
      • Wenn float einen der Werte left, right oder inherit enthält, dann gilt die Box als floatiert. Auch in diesem Fall wird der Berechnete Wert für display nach der unten stehenden Tabelle gesetzt.
      • Wenn für float der Wert none deklariert ist, wird unterschieden:
        • Ist das Element das Stammelement html, dann wird der Berechnete Wert für display nach der unten stehenden Tabelle gesetzt.
        • Anderenfalls wird der Spezifizierte Wert als Berechneter Wert verwendet.
Spezifizierter Wert Berechneter Wert
inline-table table
inline, run-in, inline-block,
table-column, table-column-group, table-row, table-row-group, table-header-group, table-footer-group, table-cell, table-caption
block
table, block, list-item, compact, marker, none, inherit Spezifizierter Wert

Code-Beispiel:

DIV.tabelle { display:table; color:blue; } DIV.tbzelle { display:table-cell; border:1px solid; }

Browserunterstützung

Die Eigenschaft display wird von den modernen Browsern zum größten Teil unterstützt:

Firefox 1, Mozilla 1.7, etc.
Die Gecko-Engine erkennt nicht die Werte inline-block, compact und run-in.
Folgende Werte für Tabellen werden durch die Gecko-Browser unterstützt: table, inline-table, table-column-group, table-column, table-cell und table-caption.
IE/Win 5.x, IE/Win 6, IE 7
IE/Win erkennt nicht die Werte run-in, compact und marker sowie inline-block nur an Inline- Level- Elementen.
Die Werte für Tabellen werden durch IE/Win nicht unterstützt.
IE/Mac 5.x
IE/Mac erkennt nur den Wert run-in nicht.
Die Werte für Tabellen werden durch IE/Mac nicht unterstützt.
Opera 8 & 9
Opera erkennt alle Werte außerhalb von Tabellen, bis Version 8 wird der Inhalt von mit display:inline-block deklarierten Elementen bis an die Oberkante des margin-top hochgeschoben.
Die Werte für Tabellen werden vom Opera bis Version 9 alle mit Ausnahme von table-column-group und table-column erkannt.
Safari 1.3
Safari unterstützt nicht den Wert compact, der aber nicht mehr Bestandteil von CSS 2.1 ist.
Konqueror 3.5
Konqueror bis Version 3.5 erkennt nicht die Werte run-in, compact und marker.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

speak, visibility

Besonderheiten im Medientyp handheld:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Die Deklaration display:none ist die wichtigste Deklaration, wenn Webdokumente für verschiedene Medien konzipiert werden sollen.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs-
wert:
Berechneter
Wert:
Vererbung: Anwendbar-
keit:
%-Bezugs-
wert:
Medien-
gruppe(n):
inline Spezifizierter Wert (mit Ausnahme des Stammelements); für floatierte und positionierte Elemente siehe Text Nein Auf alle Elemente Nicht zutreffend Alle

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

 TOP


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: www.thestyleworks.de/ref/display.shtml
Gedruckt am Donnerstag, dem 23. Oktober, 2014.
© Copyright All Contents 2002- 2014 K. Langenberg.
Commercial Use prohibited.


Notizen: