Comment utiliser l'affichage CSS : contenu ?

display : contents est une propriété relativement peu familière. Bien que display soit fondamentalement la propriété CSS la plus courante, la valeur de contents est rarement utilisée. Mais il est pris en charge par Firefox depuis 2016.

Cet article examinera de plus près cette valeur d'attribut intéressante.

Utilisation de base

Selon la définition du W3C de l'affichage : contenu.

L'élément lui-même ne génère aucune boîte, mais ses enfants et pseudo-éléments génèrent toujours des boîtes et des passages de texte normalement. Aux fins de la génération et de la mise en page des boîtes, l'élément doit être traité comme s'il était. il a été remplacé dans l'arborescence des éléments par son contenu (y compris à la fois ses enfants du document source et ses pseudo-éléments, tels que les pseudo-éléments ::before et ::after, qui sont générés avant/après les enfants de l'élément comme d'habitude) .

Une traduction simple signifie que l'élément lui-même avec cet ensemble de valeurs d'attribut ne générera aucune boîte, mais il conservera l'affichage normal de ses éléments descendants.

Regardez un exemple simple. Il existe une structure simple à trois couches comme suit :

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

Le CSS simple est le suivant :

.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;
}

se comporte comme suit :

C'est très facile à comprendre, mais si nous ajoutons display: contents au conteneur de la couche intermédiaire, et regardons l'effet :

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

Vous pouvez voir cela là n'y a pas de bordure de couche intermédiaire : 2px rouge uni Avec la bordure rouge, l'intégralité du div .wrap semble ne pas exister, mais ses éléments enfants sont rendus normalement.

Le point important est que l'élément lui-même avec display: contents set ne sera pas rendu, mais ses éléments enfants peuvent être rendus normalement.

J'ai réfléchi à toute utilisation appropriée de cet attribut.

En résumé, cet attribut convient aux éléments qui agissent comme des wrappers. Ces éléments eux-mêmes n'ont aucun effet et peuvent être ignorés dans certains scénarios de mise en page.

Agit comme une boîte d'emballage sans sémantique

Quand j'écrivais React et Vue récemment, j'ai trouvé que cet attribut peut être très utile lors de l'écriture de JSX, et il est également très utile en accord avec le positionnement de cet attribut lui-même.

Lorsque nous écrivons React et RN, nous avons souvent besoin de générer un modèle.

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

Nous voulons simplement afficher le contenu dans le div .wrap, mais en raison des exigences du framework, le modèle JSX de sortie doit être inclus sous un élément parent, donc en dernier recours, nous devons ajouter un . wrap pour emballer, mais ce wrap lui-même n'a pas de style.

Si les éléments de sortie doivent être placés sous d'autres conteneurs display: flex, display: grid, après avoir ajouté une couche de .wrap dénuée de sens, la mise en page entière doit être réajustée, ce qui est gênant.

Une solution consiste à utiliser le conteneur fourni par le framework , qui n'insère aucun nœud supplémentaire dans la page.

Un élément similaire dans Vue est l'élément

Cet élément parent supplémentaire est en réalité inutile. A ce moment, nous pouvons également ajouter display: contents, comme ceci :

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

De cette façon, il joue non seulement le rôle d'habillage, mais dans le rendu réel, ce div ne génère en fait aucune boîte, tuant deux oiseaux avec une pierre. Et certaines mises en page flexibles et mises en page de grille ne seront pas affectées.

Démo Codepen -- affichage : contenu | affichage : effet de pénétration flexible

Rendre le code plus sémantique

Considérez ce scénario très pratique, maintenant notre les pages sont remplies d'un grand nombre de boutons cliquables, ou de texte et d'autres éléments qui déclenchent les fonctions correspondantes. Cependant, sémantiquement parlant, ils devraient être un par un, mais en fait, nous utilisons le plus souvent des balises telles que

,

, eux.

Comme ce qui suit, même s'il n'y a pas de problème, c'est relativement moins sémantique :

<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;
}

La raison pour laquelle nous n'utilisons pas

Il en existe de nombreux, est moins facile à contrôler que div, et de nombreux styles par défaut seront introduits. Cependant, avec display: contents, nous pouvons rendre notre code sémantique et n'avons pas besoin de résoudre certains problèmes de style causés par  :

<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教程》