interoperability regarding to styling <br> and <wbr>

[Zhang-Junzhi]

I know this issue looks bizarre at first glance. Why is one ever in demand of styling <br> and <wbr>?

I never thought of this question either, until I decided to reset all UA styles and rewrite my own default stylesheet in a use case, in order to gain "completely" controllable styling without being interfered by any default styles(except those "importanted" by the user stylesheet):

*
{
    all: unset;
}

And then, inadvertently, I found that <br> and <wbr> weren't rendered in the way in what I initially expected them to be rendered:

In both Firefox and Chrome, the newlines still presisted. In theory, because their display values became the initial value inline, and their white-space values became the initial value normal, even they created extra or possible extra new lines to the document content, those created newlines shouldn't have presisted as "still newlines" under this circumstance. At the very least, I would expected they should have been "converted" to a normal white space if their surrounding characters weren't also white spaces.

This got me interested, then I continued to try to find out other special behaviours of <br> and <wbr> in various circumstances, and then I found in both of the two browsers I tested in, <br> and <wbr> have very special behaviour, they ignore almost all the CSS properties, for example:

br
{
    display: flow-root;
    height: 100px;
    width: 100px;
    background: red;
}

doesn't take any effect at all. As far as I can tell, only display: none and display: contents takes effects on <br>, <wbr>.

Since I only tested Firefox and Chrome, I am not sure if the interoperability of all: unset; among all browsers is guaranteed to be safe for <br>, <wbr>. The spec seems silent about this issue, leaving it unexplained, and the unexaplained special behaviour on <br> and <wbr> seems to be anti-consistent mental model.

Back to the use case, the safest method that may keep interoperability I can think of right now is unsetting properties by excluding <br>, <wbr>

:not(br):not(wbr)
{
    all: unset;
}

Any ideas on this issue? I am looking forward to hearing from you.

[Zhang-Junzhi]

And the HTML spec seems silent about the issue as well. I just checked the HTML spec, <br>, <wbr> are not classified as replaced elements. As for recommending default property values to user agents, the spec uses non-standard display: newline; and display: break-opportunity;.

Still, that doesn't explain why <br>, <wbr> are sepcial in the styling system, if we use other display value, not all display values take effects, and all other properties never take effect. Maybe that violates the consistent mental model.

[zcorpan]

See https://github.com/whatwg/html/issues/2291

[Zhang-Junzhi]

Thanks for the information.

Based on my understanding, there seems to be two concerns at https://github.com/whatwg/html/issues/2291

1. Performance;
2. Costly Implementation for a comparatively low value thing.

Those two concerns keep <br> and <wbr> magic, right?

I personally have an idea(Maybe it's more appropriate to file it as another issue, but let me post it here first):

I'd like to suggest we add a property unlike-to-change, which hints the opposite meaning as will-change hints, and recommend UAs to default to unlike-to-change: display; on <br> and <wbr>. If something is specified with unlike-to-change, then changing it quickly would not be desired for a UA to satisfy, even if it would cause a noticable lagging.

Since unlike-to-change can be used on all elements for all properties, this might also increase large room for performance optimisation(though it's off topic regardling to this issue).