Member-only story
Creating Accessible Markups With CSS Display Contents
Improving your HTML markup with this CSS feature
The most common usage of the CSS display property is to define an element’s outer and inner layout. We most frequently use block, inline elements, flex, and grid.
All the specs for the display property can be found in the CSS Display Module Level 3. As of September 2021, a new property contents can be found there. Long before that, it was added to Firefox in what turned to be a successful experiment.
What is it? How does it work? Is it ready for production usage?
In this article, we will investigate why this addition is a game-changer and how it will impact the user and their usability.
How Does It Work?
Let’s first dig into the CSS specs to have a formal definition:
“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).” — csswg.org
TL;DR: by using display: contents the element won’t produce a specific box. It will instead replace its pseudo-box and child boxes to be the children of its parent.
Prior to contents, there was only one option to control whether an element would generate any boxes at all: display: none. Using it meant that the elements and their descendants will not generate boxes or text runs.
Basic behavior
To better understand this new display property value, let’s start with a trivial example. We will show the result by applying this new display to a div that has padding and background color.
Let’s see the code below:
