Here's an answer from the future… some 8 years after you asked the question. While there's still no opposite value for display: none
, read on… There's something even better.
The display
property is so overloaded it's not funny. It has at least three different functions. It controls the:
- outer display type (how the element participates in the parent flow layout, e.g.
block
, inline
)
- inner display type (the layout of child elements, e.g.
flex
, grid
)
- display box (whether the element displays at all, e.g.
contents
, none
).
This has been the reality for so long, we've learnt to live with it, but some long-overdue improvements are (hopefully!) coming our way.
Firefox now supports two-value syntax (or multi-keyword values) for the display
property which separates outer and inner display types. For example, block
now becomes block flow
, and flex
becomes block flex
. It doesn't solve the problem of none
, but the explicit separation of concerns is a step in the right direction I think.
Chromium (85+), meanwhile, has given us the content-visibility
property, and announced it with some fanfare. It aims to solve a different problem—speeding up page load times by not rendering an element (and its child layouts) until it approaches the viewport and really needs to be seen, while still being accessible for 'Find' searches, etc. It does this automatically just by giving it the value auto
. This is exciting news in itself, but look at what else it does…
The content-visibility: hidden
property gives you all of the same
benefits of unrendered content and cached rendering state as
content-visibility: auto
does off-screen. However, unlike with
auto
, it does not automatically start to render on-screen.
This gives you more control, allowing you to hide an element's
contents and later unhide them quickly.
Compare it to other common ways of hiding element's contents:
display: none
: hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new
element with the same contents.
visibility: hidden
: hides the element and keeps its rendering state. This doesn't truly remove the element from the document, as it
(and it's subtree) still takes up geometric space on the page and can
still be clicked on. It also updates the rendering state any time it
is needed even when hidden.
content-visibility: hidden
, on the other
hand, hides the element while preserving its rendering state, so, if
there are any changes that need to happen, they only happen when the
element is shown again (i.e. the content-visibility: hidden
property
is removed).
Wow. So it's kind of what display: none
should have been all along—a way of removing an element from the layout, gracefully, and completely independently of display type! So the 'opposite' of content-visibility: hidden
is content-visibility: visible
, but you have a third, very useful option in auto
which does lazy rendering for you, speeding up your initial page loading.
The only bad news here is that Firefox and Safari are yet to adopt it. But who knows, by the time you (dear fellow developer) are reading this, that may have changed. Keep one eye on https://caniuse.com/css-content-visibility!