[an error occurred while processing this directive][an error occurred while processing this directive] [an error occurred while processing this directive] Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : CAPTION-SIDE } [an error occurred while processing this directive]
[an error occurred while processing this directive][an error occurred while processing this directive]

Welche Entwicklungen gibt es im Bereich CSS und auf dem Büchermarkt? Die Autoren einiger beliebter CSS-Bücher haben sich bereit erklärt, die Entwicklung am Markt aus ihrer Sicht kurz darzustellen, hier auf der Buchseite.

CSS 2.1 ::Referenz ::Eigenschaften

CSS 2.1: caption-side

Erläuterungen

Die Eigenschaft caption-side dient der Positionierung einer Tabellenüber- bzw. -unterschrift. Diese kann entweder durch das Element caption oder durch display:table-caption in einem beliebigen Element definiert sein.

Erlaubte Werte

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

'caption-side' top | bottom | inherit

top (Ausgangswert), bottom
caption-Elemente vor oder nach table-Elementen werden wie eigenständige Block- Level- Elemente über oder unter Tabellen formatiert. Von dieser Regel gibt es zwei Ausnahmen:
  1. Sie übernehmen alle vererbbaren Eigenschaften aus der zugehörigen Tabelle.
  2. compact- oder run-in-Elemente, die der Tabelle direkt vorausgehen, integrieren sich nicht in caption-Elemente so wie in gewöhnliche Block- Level- Elemente.
Die Breite eines caption-Elementes berechnet sich genauso wie die Breite eines Block- Level- Elementes abhängig von der Breite des umschließenden Elements. Text innerhalb der Tabbellenunterschrift lässt sich mit text-align ausrichten.
left, right
Die Plazierung der Tabellenüberschrift links oder rechts der Tabelle wurde nicht in CSS 2.1 übernommen.
Da die Elemente caption vor oder nach einer Tabelle eigenständige Block- Level- Elemente sind, können sie im normalen Elementfluß nicht neben anderen Block- Level- Elementen, wie z. B. table, stehen. Ein korrekt arbeitender Browser muss diese beiden Werte ggf. ignorieren und dafür den Ausgangswert top einsetzen.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

Hier wird eine Tabellenunterschrift erzeugt, die ebenso breit ist wie das Elternelement der Tabelle, mit links justiertem Text (aus den CSS-2.1-Specs entnommen).

caption { caption-side: bottom; width:auto; text-align:left }

Browserunterstützung

Die Eigenschaft caption-side wird von einigen der modernen Browsern unterstützt. Dabei triit jedoch eine kleine Mehrdeutigkeit auf:

Mozilla 1.7, Camino, Firefox 1
Die Gecko-Engine stellt die Werte left und right aus CSS 2 noch dar, die in CSS 2.1 nicht mehr vorhanden sind. Da CSS 2.1 bis jetzt nicht offiziell normativ ist, kann das Verhalten dieser Browser streng genommen nicht als falsch bezeichnet werden. Dennoch entspricht es nicht dem zukünftigen Standard.
IE/Mac 5, IE/Win 5.x, IE/Win 6, IE 7
Internet Explorer ignoriert diese Eigenschaft völlig bzw. stellt immer den
Ausgangswert dar.
Opera 8.x
Opera verhält sich hier einmal nicht wie der IE 6+, sein Verhalten ist identisch dem des
Safari.
Safari 1.3:
Safari ersetzt die Werte left und right durch den Ausgangswert top. Dies entspricht bereits der zukünftigen Norm CSS 2.1.
Konqueror 3.5
Auch der Konqueror ignoriert diese Eigenschaft völlig bzw. stellt immer den Ausgangswert dar.

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:

display, text-align

Besonderheiten im Medientyp handheld:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Das CSS-Tabellenmodell ist für das Medium handheld nicht anwendbar. Die Eigenschaften border-collapse, border-spacing, caption-side und empty-cells sind nicht Teil des Standards 'CSS Mobile'.

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):
top Spezifizierter Wert Ja Siehe oben Nicht zutreffend Visual

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: thestyleworks.de/ref/caption-side.shtml
Gedruckt am [an error occurred while processing this directive] Sonntag, dem 24. [an error occurred while processing this directive] Januar, 2017.
© Copyright All Contents 2002- 2017 K. Langenberg.
Commercial Use prohibited.


Notizen: