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.