The proposed box-suppress property

Level 3 of the CSS Display Module is currently in Working Draft status, and in the current Editor’s Draft are a number of issues that require author feedback.

In this post I will take a look at one new property that is defined in this module and that needs feedback – box-suppress .

CSS Display Module Level 3,

“… describes how the CSS formatting box tree is generated from the document element tree and defines the display and box-suppress properties that control it.”

The display property is something web developers will be familiar with, this might be the first time you have heard about box-suppress. This property was defined for the first time in Level 3 of the Display module and, as yet, is not implemented in any browser.

What does box-suppress do?

The Editor’s Draft describes box-suppress as follows,

“The display: none value was historically used as a “toggle” to switch between showing and hiding an element. Making this reversible requires either setting up the CSS cascade carefully, or remembering what the display value was before it was set to none. To make this common use-case easier, this module introduces the separate box-suppress property to do the same thing, so that toggling whether or not an element appears in the formatting tree can now be done without affecting its display type when it is displayed.”

Using display: none in this way is something that most of us will have done. Perhaps we want to create a FAQ with questions and answers, we set the answer to display: none and then when the question is clicked we use JavaScript to toggle display to block.

This approach served us well enough when there were only a very few possibilities for the value of the display property, however this property has gained several new values in recent years. In order to toggle display we need to keep track of what the visible value of display should be. Is it block? Or does it need to be flex because inside the visible block is a flex layout, perhaps it should be grid, or inline-grid. We can’t just assume that setting display to block will give us the result we intended.

It is this problem that the box-suppress property aims to solve. Your hidden area can keep display set to flex, grid, block or whatever is required for the layout of the children of the block. Instead of toggling display with your JavaScript, you toggle a value of box-suppress. The possible values are:

  • show: the element would be visible and use whichever display method was used to display itself and any child elements.
  • discard: the element would generate no boxes at all
  • hide: the element and any children would still be present but would not participate in layout and would be completely hidden.

This seems to be a really useful addition to the spec, solving a real problem that we will increasingly come up against as we use our new methods for layout.

How can you help?

If this sounds like something that would be useful to you the CSS Working Group are keen to have actual use cases. As with any software, having real use cases to design around is far better than creating something that sounds like it might be useful!

How would you use box-suppress? Can you see any potential problems with it, in terms of real things you want to be able to do? Let the Working Group know.

The Working Group would welcome better naming suggestions. Do you think the naming of the property and values makes sense? Do you have a better idea?

There is a proposal for how this property affects speech and box-generation. Do you have any thoughts on that? In the proposal it is suggested that hiding a box should also hide it from speech generation.

Issues and feedback should be raised as GitHub Issues. If raising something against this specification then start your issue with [css-display] which makes it easier to search the issues. Do your future self a favour and if anything sprung to mind while reading this post, contribute to making this feature better.


Šime Vidas July 25, 2016 Reply

Could you clarify what the difference between “discard” and “hide” is, in practice? For instance, if I wanted to hide an UI element until the user activates it, which keyword would I use, and in which scenarios would I use the other keyword?

Antonio Stoilkov July 28, 2016 Reply

Does box-suppress: hide would cause the browser to download images and fonts? It would be awesome to have a property that downloads and which doesn’t.

Jeremias Menichelli July 28, 2016 Reply

I see the need for this. Most MVC alike libraries in JavaScript contain toggles for block/none values on display when you might actually need inline or other value so makes sense.

Now, I have a couple of questions Rachel:
– first, what’s the main difference between discard and hide and what would be the result of toggling between show/discard and show/hide in terms of performance? Trying to see if discard would be really necessary when you already got other ways to solve this via CSS or JS.
– To avoid this display block/none toggle problem I was instead toggling the hidden attribute and including a [hidden] display: none rule for browsers that not support it natively, would this be a real improvement over this approach?


Sean July 29, 2016 Reply

Why couldn’t we just do display: inherit using css2.1 and set the previously-hidden element to show like it did before?

Tyler August 3, 2016 Reply

What would be the effective difference between box-suppress: hide and visibility: hidden ?

Tyler August 3, 2016 Reply

What would be the effective difference between box-suppress: hide and visibility: hidden ?

Steffen Weber August 11, 2016 Reply

I’d simply add/remove the “hidden” attribute to elements I want to hide/reveal (as already mentioned by Jeremias Menichelli).

Gibran Malheiros August 11, 2016 Reply

[Šime Vidas] Think of it as `display: none` and `visibility: hidden`!

[Tyler] It’s the same display scenario: was the previous value visible, or was it collapse? With box-suppress you wouldn’t have to care.

Leave a Reply