CSS display:contents

Ein Block mit display:contents wird mitsamt seinen Eigenschaften völlig außer Acht gelassen, so als wären sein öffnendes und schließendes HTML-Tag gar nicht vorhanden. Das Element wird sozusagen unsichtbar im Layout. Seine Kinder bleiben unangetastet und verhalten sich, als säßen sie direkt im übergeordneten Container.

CSS GRID–Layout

display: contents – Element-Eigenschaften eliminieren, Kind-Elemente erhalten

Das Layout von Webseiten soll einerseits semantisch sein, andererseits soll der Aufwand für das CSS möglichst gering bleiben. Dabei ummanteln immer wieder viele HTML-Elemente Inhalte, damit das CSS jedes Element erreicht.

<nav id="site-navigation" class="main-navigation" aria-label="Top Menu">
	<div class="menu-topmenu-container">
		<ul id="menu-topmenu" class="main-menu">
			<li id="menu-item-3806" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-3806">…</li>
			<li id="menu-item-3804" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3804">…</li>
			…
		</ul>
	</div>		
</nav>

Um die li-Elemente »in Form zu bringen«, muss das Layout die Eigenschaften des ul-Elements unterdrücken: In diesem Beispiel die Eigenschaften des nav- und des div-Elements sowie des ul-Elements mit seinen Listenkugeln (bullet) sowie das Einrücken der Listenelemente.

Das reicht schon, um die Eigenschaften der umfassenden Elemente – der Wrapper – zu versenken:

#site-navigation,
.menu-topmenu-container,
#menu-topmenu { display: contents}

CSS Grid mit Zeilenraster

Das CSS kann die Eigenschaft display: contents nutzen, um einem Grid-Container ein Zeilenraster zu verleihen. So liegen zwar aufeinander folgende Elemente im Grid, aber innerhalb der einzelnen Grid-Elemente ist die Verteilung des Platzangebots »wie's grad passt«. Die Bilder sind unterschiedlich hoch.

<div class="gridblock">
	<div class="gridgroup">
		<img src="fraisier.webp" width="420" height="176" >
		<h4>1 Erdbeertörtchen …</h4>
	</div>

	<div class="gridgroup">
		<img src="palmier.webp" width="420" height="327" >
		<h4>2 Palmier –</h4>
	</div>

	<div class="gridgroup">
		<img src="sable.webp" width="420" height="280">
		<h4>3 Sablé …</h4>
	</div>
</div>

Geben wir den Grid-Elementen der Klasse gridgroup ein display: contents, verschwinden sie sozusagen – jedenfalls aus der Sicht des CSS. Die Grid-Elemente unter dem Grid-Container werden nicht mehr beachtet, stattdessen werden ihre Elemente zu Grid-Elementen, obwohl sie weiterhin als Gruppe logisch und semantisch im HTML-Markup stehen.

fraisier-420

1 Erdbeertörtchen mit Sahne

palmier-420

2 Palmier oder Schweineöhrchen, wie wir sie hier nennen

sable-420

3 Sablé, ein geschichtetes Sandgebäck mit Himbeermarmelade-Klecks

display:contents Aus / An

Mit gridgroup { display: contents } lösen sich die CSS-Eigenschaften der Grid-Elemente sozusagen in Luft auf – Hintergrundfarbe und border sind weg. Der Grid-Container hat weiterhin drei Spalten, aber die Spalten werden jetzt horizontal in der Reihenfolge besetzt, in der die Elemente im HTML stehen. Der Grid-Container braucht nun noch zwei zusätzliche Eigenschaften, um die Elemente in Spalten und Zeilen zu setzen:

.gridblock {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
}

.gridgroup {
	display: contents;
}

Die Kinder der entmachteten gridgroup sind quasi eine Stufe im DOM nach oben gerutscht.

Wert Bedeutung
Die wichtigsten Werte
block Blockelement (nimmt gesamte Breite ein, z. B. <div>)
inline Inline-Element (im Textfluss, z. B. <span>)
inline-block Wie inline, aber mit eigener Breite/Höhe
none Element wird gar nicht angezeigt
Layout
flex Flexbox-Container
inline-flex Wie flex, aber inline im Textfluss
grid Grid-Container
inline-grid Wie grid, aber inline im Textfluss
subgrid (für Kinder eines Grids, geerbt von Eltern-Grid)
Semantische Gruppen
table Verhalten wie eine HTML-Tabelle
table-row, table-cell, table-column etc. Einzelteile eines Tabellensystems
list-item Wie ein <li> – erzeugt Aufzählungszeichen
Spezielle Werte
contents Entfernt das Element aus dem Layout, aber nicht seine Kinder
run-in Veraltet (IE11) / nicht konsistent unterstützt
flow-root Wie block, aber startet neuen Block-Formatting-Context
inherit Erbt den display-Wert vom Eltern-Element
initial Setzt display auf den Standardwert
revert Setzt auf den vom Browser oder Stylesheet erwarteten Wert zurück
Suchen auf mediaevent.de