<display-box>

翻译不完整。 请帮助我们翻译这篇文章!

这些关键词定义一个元素到底是否产生显示盒(display boxes)。

语法

有效的 <display-box> 值:

contents 

这些元素自己不显示。它们被它们的伪盒(pseudo-box)和子项盒(child boxes)取代。请注意CSS 层次3显示规格定义的 contents 值应该怎样影响"非常见元素" - 即不由CSS渲染的元素(诸如被取代元素)。参考 Appendix B: Effects of display: contents on Unusual Elements 以获取细节。

由于浏览器中有个bug,它会从访问树(accessibility tree)删除元素,屏幕阅读者会看不到里面内容。参考下方访问性关注 Accessibility concerns  章节以获取细节。
none
关闭元素的显示,不影响布局(文件中没有该元素)。所有子项的显示也被关闭。
要一个元素占据空间(文件中存在),但不渲染,请使用 visibility 属性。

举例

在第一个例子中,带有secret类的段落,会被设置成 display: none; 该盒子和内容不会渲染。

display: none

HTML

<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS

p.secret {
  display: none;
}

结果

display: contents

在本例中,其外部 <div> 有一个 2px 红色边框 和300px的宽度。然而,它有 display: contents 因而指定这个 <div> 不会渲染,边框和宽度都没有,其子元素会显示。

HTML

<div class="outer">
  <div>Inner div.</div>
</div>

CSS

.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

结果

Accessibility concerns

目前在大多数浏览器中的实现,是会从删除 accessibility tree 删除 display 属性值为 contents 的元素。这会引起该元素(在部分浏览器版本中)和其子项不读出来。这不符合 CSSWG specification的行为要求。

浏览器兼容性

Support of contents

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
contentsChrome Full support 65
Full support 65
No support 58 — 65
Disabled
Disabled From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 79Firefox Full support 37
Full support 37
No support 36 — 53
Disabled
Disabled From version 36 until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 52
Full support 52
No support 45 — 52
Disabled
Disabled From version 45 until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 11.1WebView Android Full support 65Chrome Android Full support 65
Full support 65
No support 58 — 65
Disabled
Disabled From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 57Opera Android Full support 47
Full support 47
No support 43 — 47
Disabled
Disabled From version 43 until version 47 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 11.3Samsung Internet Android Full support 9.0
Specific behavior of unusual elements when display: contents is applied to themChrome Full support 58Edge Full support 79Firefox Full support 59IE No support NoOpera Full support 45Safari No support NoWebView Android Full support 65Chrome Android Full support 58Firefox Android Full support 59Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 9.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

其它参考