Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
These keywords define whether an element generates display boxes at all.
Syntax
Valid
values:
contents
-
These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the
contents
value should affect "unusual elements" — elements that aren't rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility section below for more details.
none
-
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the
visibility
property instead.
Accessibility
Current implementations in most browsers will remove from the accessibility tree any element with a display
value of contents
. This will cause the element — and in some browser versions, its descendant elements — to no longer be announced by screen reading technology. This is incorrect behavior according to the CSSWG specification.
Formal syntax
=
contents |
none
Examples
In this first example, the paragraph with a class of secret is set to display: none
; the box and any content is now not rendered.
display: none
HTML
Visible text
Invisible text
CSS
p.secret {
display: none;
}
Result
display: contents
In this example the outer More accessible markup with display: contents by Hidde de Vries (2018)display: contents
specified therefore this HTML
CSS
.outer {
border: 2px solid red;
width: 300px;
display: contents;
}
.outer > div {
border: 1px solid green;
}
Result
Specifications
Specification CSS Display Module Level 3
# valdef-display-contentsBrowser compatibility
See also
display