display: contents bei Gridlayout & Flexbox
Geschrieben am:
Eines haben Gridlayout und Flexbox gemeinsam: Wenn man die Grid/Flexbox-Darstellung aktiviert, so lassen sich dann nur die echten Kindelemente anordnen, aber keine weiteren Nachkommen. Das diktiert einem aber auch eine entsprechende Struktur und manchmal passt es nicht ... Abhilfe bietet die Eigenschaft display: contents.
Bei der Recherche für einen Artikel zum Thema CSS3-Layouts für web & mobile developer, der im Heft 8 2017 erscheint, bin ich auf die Eigenschaft display: contents gestoßen. Sie ist ähnlich wie display: none, mit einem entscheidenden Unterschied. Mit display: none blendet man das Element mit allen Nachkommen aus. display: contents dient ebenfalls dazu, ein Element auszublenden - aber nur das Element selbst, nicht die Kindelemente. Und das ist gerade bei Flexbox/Gridlayout praktisch.
Angenommen, wir haben folgende HTML-Struktur:
<section>
<header>Kopfbereich</header>
<main>
<article>Artikel</article>
<aside>Aside</aside>
</main>
<footer>Fußbereich</footer>
</section>Wenn wir jetzt section zum Gridcontainer machen:
section { display: grid; }... dann können wir damit header, main und footer anordnen - aber wir erreichen article und aside nicht, da sie sich ja innerhalb von main befinden. Wenn wir allerdings
main { display: contents; }nutzen, ist main ausgeblendet und Gridlayout-technisch verhält sich so, als hätten wir die folgende Struktur:
<section>
<header>Kopfbereich</header>
<article>Artikel</article>
<aside>Aside</aside>
<footer>Fußbereich</footer>
</section>Und damit können wir header, article, aside und footer in unser Raster einbeziehen. Ähnliche Fälle lassen sich auch mit Flexbox konstruieren.
Die nützliche Eigenschaft wird in Chrome ab 89 und Firefox ab 62 unterstützt.
Was ich gerade gemerkt habe: Der Selektor section > * wählt trotzdem nur header und footer aus - nicht article und aside, ist vielleicht auch ganz logisch.