[css-break] Add an ability to hide elements when they adjoin a page/column break

[Psychpsyo]

So I have a bunch of sections, separated by <hr>s. The <hr>s are there to visibly separate the content but they look weird if they land right before or right after a page or column break. It would be nice if there were a CSS property that I could use to tell the browser that these dividers should not be rendered when they are the first thing before or after a page or column break. Essentially a conditional display: none.

Also, break-before: avoid and break-after: avoid don't work for my use-case, since the items that are being separated have break-inside: avoid, so any valid break point ends up right before or after one of these <hr>s.

[Crissov]

Perhaps some clever use of continue: discard might get you there although its intended purpose is a bit different.

PS: If the <hr> or <br> markup was replaced by block-progression gutters (row-gap), they would automatically disappear when they coincide with a fragmentainer break (which includes page breaks).

[faceless2]

I also think this is a good idea, and not a new one: https://books.idea.whatwg.org/#conditional-content

[Psychpsyo]

Perhaps some clever use of continue: discard might get you there although its intended purpose is a bit different.

That would be a major hack and I'd rather just have the <hr>s be visible at that point. It also seems like continue is very tied in with CSS Regions, which has been dead for about a decade and is not in any browser. I couldn't find it on Can I Use or MDN so I doubt there'd be good support for it.

PS: If the <hr> or <br> markup was replaced by block-progression gutters (row-gap), they would automatically disappear when they coincide with a fragmentation break (which includes page breaks).

For this, I would need to wrap the content in my multi-col container in another div since row-gap indicates the gap between rows of columns in multi-col layout. And, to be able to style a dividing line into those gaps, I'd need to make it a 1-wide grid layout or a sideways multicol container. Both of those seem like the wrong way™.