Wie verwende ich CSS display: content?

Anzeige: Inhalte sind eine relativ unbekannte Eigenschaft. Obwohl Anzeige grundsätzlich die häufigste CSS-Eigenschaft ist, wird der Wert von Inhalten selten verwendet. Aber es wird seit 2016 von Firefox unterstützt.

In diesem Artikel wird dieser interessante Attributwert genauer untersucht.

Grundlegende Verwendung

Gemäß der W3C-Definition von display: content.

Das Element selbst generiert keine Boxen, seine untergeordneten Elemente und Pseudoelemente generieren jedoch weiterhin Boxen und Textläufe wie gewohnt. Für die Zwecke der Boxgenerierung und des Layouts muss das Element so behandelt werden, als ob es wurde im Elementbaum durch seinen Inhalt ersetzt (einschließlich seiner untergeordneten Quelldokumente und seiner Pseudoelemente, wie z. B. ::before und ::after Pseudoelemente, die wie gewohnt vor/nach den untergeordneten Elementen des Elements generiert werden) .

Eine einfache Übersetzung bedeutet, dass das Element selbst mit diesem Attributwertsatz keine Felder generiert, aber die normale Anzeige seiner Nachkommenelemente beibehält.

Sehen Sie sich ein einfaches Beispiel an. Es gibt eine einfache dreischichtige Struktur wie folgt:

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

Das einfache CSS lautet wie folgt:

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

verhält sich wie folgt:

Das ist sehr leicht zu verstehen, aber wenn wir display: content zum Container der mittleren Ebene hinzufügen und uns den Effekt ansehen:

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

Sie können das dort sehen ist kein mittlerer Ebenenrand: 2px durchgehend rot Mit dem roten Rand scheint das gesamte .wrap-Div nicht zu existieren, aber seine untergeordneten Elemente werden normal gerendert.

Der wichtige Punkt ist, dass das Element selbst mit display: content set nicht gerendert wird, seine untergeordneten Elemente jedoch normal gerendert werden können.

Ich habe über geeignete Verwendungsmöglichkeiten für dieses Attribut nachgedacht.

Zusammenfassend ist dieses Attribut für Elemente geeignet, die als Wrapper fungieren. Diese Elemente selbst haben keine Wirkung und können in einigen Layoutszenarien ignoriert werden.

Wirkt als semantiklose Verpackungsbox

Als ich kürzlich React und Vue schrieb, stellte ich fest, dass dieses Attribut beim Schreiben von JSX sehr nützlich sein kann, und zwar ist auch im Einklang mit der Positionierung dieses Attributs selbst sehr nützlich.

Wenn wir React und RN schreiben, müssen wir oft eine Vorlage ausgeben.

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

Wir möchten nur den Inhalt innerhalb des .wrap-Div ausgeben, aber aufgrund von Framework-Anforderungen muss die ausgegebene JSX-Vorlage unter einem übergeordneten Element enthalten sein, daher müssen wir als letzten Ausweg eine . Wrap zum Wrappen, aber dieser Wrap selbst hat keinen Stil.

Wenn die Ausgabeelemente unter anderen display:flex-, display:grid-Containern platziert werden sollen, muss nach dem Hinzufügen einer bedeutungslosen .wrap-Ebene das gesamte Layout neu angepasst werden, was mühsam ist.

Eine Möglichkeit besteht darin, den vom Framework bereitgestellten Container zu verwenden, der keine zusätzlichen Knoten in die Seite einfügt.

Ein ähnliches Element in Vue ist das

Dieses zusätzliche übergeordnete Element ist eigentlich unnötig. Zu diesem Zeitpunkt können wir auch display:-Inhalte hinzufügen, etwa so:

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

Auf diese Weise spielt es nicht nur die Rolle des Wrappings, sondern beim tatsächlichen Rendern erzeugt dieses Div tatsächlich keine Box, was zum Töten führt zwei Fliegen mit einer Klappe. Einige Flex-Layouts und Raster-Layouts sind davon nicht betroffen.

Codepen-Demo – Anzeige: Inhalt |. Anzeige: Flex-Penetrationseffekt

Machen Sie den Code semantischer

Betrachten Sie dieses sehr praktische Szenario, jetzt unser Seiten sind mit einer Vielzahl an anklickbaren Schaltflächen oder Texten und anderen Elementen gefüllt, die entsprechende Funktionen auslösen. Semantisch gesehen sollten sie jedoch nacheinander sein. Tatsächlich verwenden wir jedoch häufiger Tags wie

,

, , um entsprechende Klickereignisse hinzuzufügen ihnen.

Wie folgt, obwohl es kein Problem darstellt, ist es relativ weniger semantisch:

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

Der Grund, warum wir

nicht verwenden; Es gibt viele, ist weniger einfach zu steuern als div, und es werden viele Standardstile eingeführt. Mit display: content können wir unseren Code jedoch semantisch machen und müssen einige Stilprobleme, die durch :

verursacht werden, nicht lösen

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