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 58 (hinter einem Flag – danke an Maren Lange für den Hinweis!) und Firefox ab 53 unterstützt. Das Flag, das in Chrome aktiviert werden muss, sind die „Experimentellen Webplattform-Funktionen“.
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.
In Chrome wird es standardmäßig aber noch nicht unterstützt (gerade getestet mit Chrome 58). Vielleicht wenn irgendwelche Flags gesetzt sind?
danke Maren für den Hinweis!