[hidden] rule in reboot CSS should be scoped to allow "until-found"

[maggiewachs]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

The HTML hidden attribute usually indicates that the element is hidden for all purposes, except when it has the value of until-found — in which case content should not be explicitly hidden using display: none. See https://developer.chrome.com/docs/css-ui/hidden-until-found.

Bootstrap's reboot CSS contains a rule that hides all elements with the hidden attribute, regardless of their value:

[hidden] {
  display: none !important;
}

https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss#L609

Can you scope this rule to exclude the until-found value?

Reduced test cases

You can reproduce the issue by adding [hidden] { display: none; } to the first Codepen on this page: https://developer.chrome.com/docs/css-ui/hidden-until-found

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.3

[julien-deramond]

Thanks for bringing that to our attention @maggiewachs until-found works this way:

Note that although the content of the element is hidden, the element still has a generated box, occupying space in the layout and with background and borders rendered.

Moreover, it is said that:

Also, the element needs to be affected by layout containment in order to be revealed. This means that if the element in the hidden until found state has a display value of none, contents, or inline, then the element will not be revealed by find in page or fragment navigation.

Our current rule in Bootstrap forces a display: none for all values of the hidden global attribute.

Personally, I'm not opposed to excluding the until-found value from the global rule, as it would not harm anyone's code. What "bothers me" a little bit is the maintenance aspect of it since, until-found is experimental, and that its behavior could change in the future.

@twbs/css-review What do you think here? Do we handle this use case, or is it too early?

[maggiewachs]

@julien-deramond thanks for the reply. I understand the maintenance concern, in which case would you consider removing the !important flag so that users could scope their own CSS?

[louismaximepiton]

TBH, I don't have any strong opinion against this change since it should be a painless change for many people. However, by including this, we send a signal that may be understood as: "We're good with this feature, you can use it your websites." even if most browsers don't support it. It could of course be handled well with a good communication (that I'm not good with).

in which case would you consider removing the !important flag so that users could scope their own CSS?

It seems to come from an old PR, I wasn't there when it was done so I don't have any historic about this. From my pov, I'd say we can safely remove the !important to allow people more flexibility about this.