巧用 display: contents 加強頁面語義

時間 2020-05-30

原文原文鏈接

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

本文將深刻一下這個有意思的屬性值。html

基本用法

根據 W3C 對 display: contents 的定義。git

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 as 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 element’s children as normal).github

簡單翻譯一下便是，將設置了該屬性值的元素自己將不會產生任何盒子，可是它的從保留其子代元素的正常展現。canvas

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

<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;
}
複製代碼

表現以下：ide

這個很是好理解，可是若是，咱們給中間層的容器添加上 display: contents，再看看效果：佈局

<div class="container">
    <div class="wrap" style="display: contents">
        <div class="inner"></div>
    </div>
</div>
複製代碼

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

重點，設置了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 以後，整個佈局又須要從新進行調整，麻煩。

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

在 Vue 中相似的是 <template> 元素， <template> 也是不會被渲染在 DOM 樹中，查看頁面結構也沒法看到，可是 display: contents 是存在於頁面結構中的，只是沒有生成任何盒子。

這個多出來的父元素實際上是不必的。這個時候，咱們也能夠添加上 display: contents，像是這樣：

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

這樣，它既起到了包裹的做用，可是在實際渲染中，這個 div 其實沒有生成任何盒子，一箭雙鵰。而且像一些 flex 佈局、grid 佈局，也不會受到影響。

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

讓代碼更加符合語義化

考慮這個很是實際的場景，如今咱們的頁面上充斥了大量的可點擊按鈕，或者點擊觸發相應功能的文字等元素。可是，從語義上而言，它們應該是一個一個的 <button>，可是實際上，更多時候咱們都是使用了 <p>、<div>、<a> 等標籤進行了模擬，給他們加上了相應的點擊事情而已。

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

<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;
}
複製代碼

咱們不使用 <button> 的緣由有不少，<button> 相對 div 而言沒那麼好控制，且會引入不少默認樣式。可是，有了 display: contents，咱們可讓咱們的代碼既符合語義化，同時不須要去解決 <button> 帶來的一些樣式問題：

<p class="button">
    <button style="display: contents">
        Button
    </button>
</p>
<p class="button">
    <button style="display: contents">
        Click Me
    </button>
</p>
複製代碼