[css-display] A property to toogle whether an element is shown or not, independant of display

[mangelozzi]

To quote https://css-tricks.com/the-hidden-attribute-is-visibly-weak/

The display property is sadly overloaded with responsibility. It would be way cool if hidden was a CSS property that could be in charge of the visibility/access of elements rather than the same property that controls the type of block it is. But alas, backward compatibility 4-lyfe of the web stops that (which is a good thing for the health of the web overall).

And unfortunately I have had the same experience. When designing a dynamic layout (i.e. modern web). You often want the display to be grid, or maybe flex, and then toggle the display to be shown or not shown. Unfortunately its not that simple, because one has to store the state of what kind of display property it is, or use a wrapper div, or some brittle styling that depends on the cascade and/or the order of the CSS.

At the moment one often does the following:

<div class="display-none">
   <div style="display:flex">
        I am a flex box that is sometimes shown, sometimes hidden. I have to be wrapped in a redunant div.
    </div>
<div>

Ideally hidden would be an independant property that irresepective of the value of display, the item is hidden. Unfortunately hidden has the "weakest" effect, instead of the strongest which really does not make sense to me, because its just another property in the pile we already have that can't hide an element independant of display. Could some other property to be invented to aid with this very common problem? Code often has to be much more complex that it should.

Maybe this is the wrong place, apologies if it is, I opened a CSS feature request in a different repo, and was moved here, so I think this is the pllace.

[Loirooriol]

This sounds like box-supress, see #4897