[css-display] Add a third display-box keyword, similar to discard in box-suppress

[nilssolanki]

From what I understand, the current behavior of display: contents is similar to box-suppress: hide (except that it only applies to the current element, not its children):

Properties that rely on boxes but do not rely on layout, such as animations, counter-increment, etc., must work as normal on this element and its descendants.

Issue 1 of display: contents raises the question as to whether it should take non-layout-related properties into account as well. I think it might be a good idea to have both a hide and a discard analogue on display as well.

I suggest adding a display: discard keyword, which behaves (more or less) analogous to box-suppress: discard and keep the behavior of display: contents as it as (analogous to hide).

Meaning the element would not generate a box, all other CSS properties on the element and pertaining to the element would be ignored and sibling/descendant selectors wouldn't register it as an element either.

Use-Case

Third-party markup which contains unwanted elements and could destroy the layout.
(Content Management Systems can inject unsightly markup for frontend-editing purposes for example.)

[fantasai]

Afaict, you are requesting display: none. Which already exists, so closing no change. :)

[nilssolanki]

@fantasai display: none; applies to children as well. The idea of display: discard; would be to only apply to the current element (same as display: none;), but explicitly not to children.

It would developers to pretend that a parent node doesn't exist, while the child node is displayed normally.

Example:

<ul class="list">
  <div class="random-insert">
    <li class="list-item"></li>
  </div>
  <div class="random-insert">
    <li class="list-item"></li>
  </div>
</ul>

.random-insert {
  display: discard;
}

.list-item:first-child {
  border-top: 1px solid red;
}

would be equivalent to:

<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>

.list-item:first-child {
  border-top: 1px solid red;
}

Meaning, only the first list-item in the whole list would have a red top border.

Maybe discard is a misnomer in this case though…

[upsuper]

@nilssolanki display: contents does exactly what you want.

[upsuper]

... except the :first-child selector... because selectors are based on DOM tree. They cannot depend on rendering result.