bootstrap 在重启CSS中,规则应被限定范围以允许"直到找到为止",

uklbhaso  于 4个月前  发布在  Bootstrap
关注(0)|答案(3)|浏览(112)

先决条件

描述问题

HTML 的 hidden 属性通常表示该元素对于所有目的都是隐藏的,除非它的值为 until-found — 在这种情况下,不应使用 display: none 显式隐藏内容。请参阅 https://developer.chrome.com/docs/css-ui/hidden-until-found
Bootstrap 的重启 CSS 包含一个规则,该规则会隐藏具有 hidden 属性的所有元素,无论它们的值如何:

[hidden] {
  display: none !important;
}

https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss#L609
你能将此规则的范围限制在排除 until-found 值吗?

简化的测试用例

你可以通过向页面上的第一个 Codepen 添加 [hidden] { display: none; } 来重现此问题: https://developer.chrome.com/docs/css-ui/hidden-until-found

qmb5sa22

qmb5sa221#

感谢你提醒我们关注这个问题 @maggiewachs
until-found 的工作原理如下:
请注意,尽管元素的内容被隐藏,但元素仍然具有生成的框,占用布局中的空间并呈现背景和边框。
此外,有说法称:
此外,元素需要受到 layout containment 的影响才能被揭示。这意味着如果隐藏状态中的元素具有 display 值为 none、contents 或 inline,则该元素不会通过 find in page 或 fragment 导航被揭示。
我们在 Bootstrap 中的当前规则强制对所有 hidden 全局属性的值应用 display: none
就我个人而言,我不反对将 until-found 值从全局规则中排除,因为这不会损害任何人的代码。有点让我困扰的是维护方面,因为 until-found 是实验性的,其行为可能会在未来发生变化。
@twbs/css-review 你认为这里怎么处理?我们是否已经处理了这个用例,还是说现在还为时过早?

ffvjumwh

ffvjumwh2#

感谢julien-deramond的回复。我理解维护方面的担忧,在这种情况下,您是否考虑移除!important标志,以便用户可以自己设置CSS?

m1m5dgzv

m1m5dgzv3#

实际上,我并不反对这种改变,因为对于很多人来说,这应该是一个无痛的改变。然而,通过包含这个功能,我们发出了一个信号,可能会被理解为:“我们对这个功能很满意,你可以在你的网站上使用它。”即使大多数浏览器不支持它。当然,如果沟通得当,这个问题也可以很好地解决(而我不擅长沟通)。

在这种情况下,你是否会考虑移除 !important 标志,以便用户可以自己设置 CSS?

这个问题似乎来自于 old PR ,我没有参与其中,所以对此没有历史记录。从我的Angular 来看,我们可以安全地移除 !important ,以便让人们在这个方面有更多的灵活性。

相关问题