CSS display: contents 如何使用？

display: contents 是比較陌生的屬性，雖然屬於 display 這個基本上是最常見的 CSS 屬性，但是 contents 這個取值基本上不會用到。但它早在 2016 年就已經得到了 Firefox 的支援。

本文將深入這個有趣的屬性值。

基本用法

根據 W3C 對 display: contents 的定義。

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the el'ter pseudo-elements, which are generated before/after the el'mal'snormal' .

簡單翻譯一下即是，將設定了該屬性值的元素本身將不會產生任何盒子，但是它的從保留其子代元素的正常展示。

看個簡單的例子。有以下簡單三層結構：

<div class="container">
    <div class="wrap">
        <div class="inner"></div>
    </div>
</div>

簡單的CSS 如下：

.container {
    width: 200px;
    height: 200px;
    background: #bbb;
}
.wrap {
    border: 2px solid red;
    padding: 20px;
    box-sizing: border-box;
}
.inner {
    border: 2px solid green;
    padding: 20px;
    box-sizing: border-box;
}

表現如下：

這個非常好理解，但是如果，我們為中間層的容器加上上display: contents，再看看效果：

<div class="container">
    <div class="wrap" style="display: contents">
        <div class="inner"></div>
    </div>
</div>

可以看到，沒有了中間層的border: 2px solid red 的紅色邊框，整個.wrap div 好像不存在一樣，但是它的子元素卻是正常的渲染了。

重點，設定了display: contents的元素本身不會被渲染，但是其子元素能夠正常被渲染。

這個屬性我一直在思考有什麼非常適合的使用點。

總結來說，這個屬性適用於那些充當遮罩（wrapper）的元素，這些元素本身沒有什麼作用，可以被忽略的一些佈局場景。

充當無語意的包裹框

最近寫React、Vue 的時候，發現這個屬性在寫JSX 的時候能有很好的作用，也非常符合這個屬性本身的定位。

我們在寫 React、RN 時，常常需要輸出一段範本。

return (
    <div class="wrap">
        <h2>Title</h2>
        <div>...</div>
    </div>
)

我們只是想輸出.wrap div 內的內容，但是由於框架要求，輸出的JSX 模板必須包含在一個父元素之下，所以不得已，需要添加一個.wrap 進行包裹，但是這個. wrap 本身是沒有任何樣式的。

如果輸出的元素是要放在其他 display: flex、display: grid 容器之下，加了一層無意義的 .wrap 之後，整個佈局又需要重新進行調整，麻煩。

一種方法是使用框架提供的容器 ，它不會向頁面插入任何多餘節點。

在Vue 中類似的是

這個多出來的父元素其實是沒必要的。這個時候，我們也可以添加上 display: contents，像是這樣：

return (
    <div class="wrap" style="display: contents">
        <h2>Title</h2>
        <div>...</div>
    </div>
)

這樣，它既起到了包裹的作用，但是在實際渲染中，這個 div 其實沒有產生任何盒子，一舉兩得。並且像是一些 flex 佈局、grid 佈局，也不會受到影響。

Codepen Demo -- display: contents | display: flex 的穿透影響

讓程式碼更符合語意化

##考慮這個非常實際的場景，現在我們的頁面上充斥了大量的可點擊按鈕，或是點擊觸發對應功能的文字等元素。但是，從語義上而言，它們應該是一個一個的，但是實際上，更多時候我們都是使用了

、

、 等標籤進行了模擬，給他們加上了相應的點擊事情而已。

像是下面這樣，雖然沒什麼問題，但是相對而言不那麼符合語義化：

<p class="button">
    Button
</p>
<p class="button">
    Click Me
</p>

.button {
    width: 120px;
    line-height: 64px;
    text-align: center;
    background-color: #ddd;
    border: 2px solid #666;
}

我們不使用

的原因有很多， 相對div 而言沒那麼好控制，而且會引入很多預設樣式。但是，有了 display: contents，我們可以讓我們的程式碼既符合語意化，同時不需要去解決 帶來的一些樣式問題：

<p class="button">
    <button style="display: contents">
        Button
    </button>
</p>
<p class="button">
    <button style="display: contents">
        Click Me
    </button>
</p>

添加了

Click Me 的包裹，不会对样式带来什么影响，button 也不会实际渲染在页面结构中，但是页面的结构语义上好了不少。

CodePen Demo -- Button with display: contents

对于对页面结构、语义化有强迫症的一些同学而言，灵活运用这个属性可以解决很多问题。

在替换元素及表单元素中一些有意思的现象

display: contents 并非在所有元素下的表现都一致。

对于可替换元素及大部分表单元素，使用 display: contents 的作用类似于 display: none。

也就是说对于一些常见的可替换元素、表单元素：

作用了 display: contents 相当于使用了 display: none ，元素的整个框和内容都没有绘制在页面上。

的一些异同

与其他表单元素不一样，正常而言，添加了 display: contents 相当于被隐藏，不会被渲染。但是实际运用过程中发现， 如果包裹了内容，其一些可继承样式还是会被子内容继承。这个实际使用的过程中需要注意一下。

对 A11Y 的影响

在一些外文文档中有一些讨论是关于 display: contents 的使用会影响到页面的可访问性。例如作用了 display: contents 的容器及列表，会对页面的可访问性带来一些意外结果。

[css-a11y][css-display] display: contents; strips semantic role from elements

这个我看暂时没有明确的结论，如果你的页面对可访问性的要求很高，具体使用的此属性的话也是需要注意一下这一点。

CSS 中类似的一些影响布局的属性

CSS 本身其实也在一直在努力，增加了各种属性去让我们在布局上有更多的空间与控制权。总而言之给我的感受是让 CSS 更加的像是一个完整的工程而不仅仅只是展现样式。

类似的一些有意思的属性：

CSS新特性contain，控制页面的重绘与重排 

CAN I USE

看看兼容性。

不算太惨淡，但也不算全面普及。考虑用在一些渐进增强的场景当中。

推荐教程：《CSS教程》