#1 Hodnota contents
Hodnota contents, patřící k vlastnosti display, je novější hodnotou této vlastnosti, která způsobuje, že prvek není nijak vykreslován, avšak vnořené prvky, ale i dědičné vlastnosti daného prvku vykresleny budou.
Proč a k čemu vznikla
Hodnota contents, zveřejněná v roce 2017, řeší zásadní problém. Do té doby, pokud chtěl web-developer mít vícero prvků ve flexboxu nebo rozložení grid vedle sebe, musely být tyto prvky sourozenci (musely býti na stejné HTML úrovni). Hodnota contents řeší tento problém, kdy prvek, kterému je přidána, bude ignorován a jako sourozenci na stejné úrovni se budou brát jeho vnořené prvky.
Jak funguje
Již částečně popsané chování výše – prvek, kterému je definována vlastnost display: contents pro JavaScript a HTML „neexistuje“, pouze slouží jako jakýsi obal vnořených prvků; ty pomocí této vlastnosti povýší o jednu HTML úroveň.
Prvek s touto hodnotou má také jednu zásadní vlastnost oproti tomu, pokud by byly vnořené prvky normálními sourozenci, bez toho aby se nacházely v dalším prvku – vnořené prvky jsou pořád v „boxu“, ze kterého dědí vlastnosti a ovlivňují jeho strukturu; „box“ není vykreslen a neexistuje ani pro DOM.
Prvek s display: contens; není nijak zobrazován – jeho odsazení (vnitřní ani vnější) neplatí, není vidět jeho barva pozadí atp.
V tomto příkladu je toto chování znázorněno:
<div id="obal">
Text, který je obsahem
<p>Další text, který je vnořeným prvkem</p>
</div>
#obal {
display: contents;
background-color: red;
padding: 30px;
}
#obal p {
background-color: blue;
padding: 30px;
}