An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
A Short Introduction to Display: Contents
Sometimes, we need an element to be in our HTML for semantic reasons, but our life would be much easier if it just wasnt there.
In some cases, we do not even have control over the HTML.
That is when display: contents come to the rescue.
In this short post, well examine how this property behave and what are its limitations.
An Undesired HTML element can be tricky to work with when using flex
or grid
items.
Using display: contents
on an element will make the container disappear, and its children will act as the children of the elements parent.
Lets take a timeline view displaying each year using display: flex
, if we need to highlight the years after 2000, we might want to group them into a div
with a class, but that container would break the flex!
We can use display: contents
on this element to avoid that side effect:
<div class="years"> <div class="year">1996</div> <div class="year">1997</div> <div class="year">1998</div> <div class="year">1999</div> <div class="recent"> <div class="year">2000</div> <div class="year">2001</div> <div class="year">2002</div> <div class="year">2003</div> </div></div><style>.years{ display: flex;}.recent{ display: contents; font-weight: bold;}</style>
Having the .recent
container set to display: contents
will essentially make all .year
behave like children of .years
.
With display: contents
the box disappear, so you cannot stylize it, meaning no background, padding. You can however use color, font size and all the inline style properties.
Also, modern browsers supports it!
I'm Tom Quinonero, I write about design systems and CSS, Follow me on twitter for more tips and resources
Original Link: https://dev.to/tomquinonero/a-short-introduction-to-display-contents-16pj
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To