kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Content Choreography mit caption-side: bottom;

Das HTML-Element <caption> beschreibt den Inhalt einer Tabelle. Leider wird das dazugehörige align-Attribut in HTML5 nicht länger unterstützt. Doch wir haben mit CSS die Möglichkeit einem HTML-Element das Verhalten bestimmter Tabellen-Elemente zuzuweisen. Im Umfeld von Content Choreography ist hier die Eigenschaft caption-side interessant. Mit ihr können zwei aufeinander folgende Inhalte getauscht werden – und das funktioniert in allen relevanten Browsern funktioniert in allen modernen Browsern, außer dem Internet Explorer.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

display: table-caption + caption-side: top/bottom;

Die display-Eigenschaften von CSS erlauben es uns jedem HTML-Element das Verhalten von Tabellen-Elementen zuzuweisen. Mit display: table; beispielsweise verhält sich ein Element wie eine Tabelle, mit display: table-cell; wie eine Tabellen-Zelle, und mit display: table-caption; wie die Beschreibung einer Tabelle.
Sobald ein Element die table-caption-Eigenschaft erhalten hat, steht ein weiterer Befehl zur Verfügung: caption-side. Mit caption-side kann festgelegt werden ob die Beschreibung der Tabelle über oder unter der Tabelle dargestellt wird; unabhängig davon ob sie im HTML-Markup davor oder danach notiert wurde. Dieses Verhalten macht caption-side im Umfeld von Content-Choreography extrem interessant.

Inhalte tauschen

Das folgende Beispiel zeigt den Praxiseinsatz von caption-side. Mit caption-side:top; wird die Beschreibung über der Tabelle angezeigt, mit caption-side:bottom; darunter.
Das Beispiel zeigt dazu einen Blog-Beitrag mit sehr großem Header-Bild. In der Smartphone-Version – und das Beispiel ist Mobile First aufgebaut – sehen wir die Reihenfolge des HTML-Codes: Zuerst kommt die Headline 1, dann das Header-Bild, dann der Inhalt.
Mit einem Breakpoint wird diese Reihenfolge dann geändert. Dazu muss ein Container-Element existieren dem display:table; zugewiesen wurde. Das Beispiel verwendet dazu das HTML-Element <header>. Innerhalb von <header> verhält sich die <h1> wie eine Tabellen-Beschreibung (display: table-caption;) und mit caption-side:bottom; wird die Darstellung in größeren Breakpoints unter den Header verschoben.

Beispiel anzeigen

Reduzierter Code des Beispiels


<header>
  <h1>Caption</h1>
  <div class="header-image"></div>
</header>
<article> … </article>

header {
  display: table;
  width: 100%;
}

h1 {
  display:table-caption;
}


@media screen and (min-width:800px) {
	
  h1 {
    caption-side:bottom;
  }
		
}

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Tom

    Verfasst am 21. März 2014 um 8:48 Uhr.

    Hallo Jonas,

    Ich finde deine Beiträge immer sehr interessant :-) Jedoch muss ich dir sagen, dass in meinem IE 11 dein Beispiel nicht funktioniert.

    Ich habe auf CanIUse Caption-side gesucht, jedoch nicht gefunden!

    Beste Grüße

    Tom

    • Jonas Hellwig

      Verfasst am 21. März 2014 um 9:27 Uhr.

      Zu meinem größten Bedauern hast du recht – ich habe die table-spec von caniuse missverstanden. Der IE kann die Eigenschaft tatsächlich nicht. Was allerdings nicht so schlimm ist, da es gute automatische Fallback-Lösungen gibt.

  2. Daniele

    Verfasst am 22. März 2014 um 10:27 Uhr.

    Danke für deinen Beitrag, wie immer sehr nützlich!

    Viele Grüße aus dem Saarland,
    Daniele

  3. Mat

    Verfasst am 25. März 2014 um 15:51 Uhr.

    Also das Caption-Element gibt es doch auch unter HTML5 noch wie gehabt: http://www.w3.org/TR/html5/tabular-data.html#the-caption-element
    Nur das zugehörige align-Attribut wurde in HTML5 entfernt.

    • Jonas Hellwig

      Verfasst am 27. März 2014 um 9:30 Uhr.

      Korrekt. Ich habe die Formulierung im Artikel entsprechend korrigiert. Vielen Dank für deine Info!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.