contain
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
* Some parts of this feature may have varying levels of support.
Die contain
CSS Eigenschaft zeigt an, dass ein Element und dessen Inhalt so weit wie möglich unabhängig vom Rest des Dokumentbaums sind.
Einschließung ermöglicht es, einen Abschnitt des DOM zu isolieren, wodurch Leistungsverbesserungen erzielt werden, indem Berechnungen von Layout, Stil, Malen, Größe oder einer Kombination auf einen DOM-Teilbaum beschränkt werden, anstatt auf die gesamte Seite. Einschließung kann auch verwendet werden, um CSS-Zähler und -Anführungszeichen zu beschränken.
Probieren Sie es aus
Es gibt vier Arten von CSS-Einschließung: Größe, Layout, Stil und Malen, die auf den Container angewendet werden. Die Eigenschaft ist eine durch Leerzeichen getrennte Liste eines Teils der fünf Standardwerte oder eines der beiden Kurzformwerte. Änderungen an den eingeschlossenen Eigenschaften innerhalb des Containers werden nicht außerhalb des eingeschlossenen Elements auf den Rest der Seite übertragen. Der Hauptvorteil der Einschließung besteht darin, dass der Browser das DOM oder das Seitenlayout nicht so oft neu rendern muss, was zu kleinen Leistungsverbesserungen beim Rendern statischer Seiten und zu größeren Leistungsverbesserungen bei dynamischeren Anwendungen führt.
Die Verwendung der contain
Eigenschaft ist nützlich auf Seiten mit Gruppen von Elementen, die unabhängig sein sollen, da sie verhindern kann, dass interne Elemente Auswirkungen außerhalb ihrer Begrenzungsbox haben.
Hinweis:
Die Verwendung der Werte layout
, paint
, strict
oder content
für diese Eigenschaft erzeugt:
- Einen neuen Containing Block (für die Nachkommen, deren
position
Eigenschaftabsolute
oderfixed
ist). - Einen neuen Stacking Context.
- Einen neuen Block Formatting Context.
Syntax
/* Keyword values */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;
/* Multiple keywords */
contain: size paint;
contain: size layout paint;
contain: inline-size layout;
/* Global values */
contain: inherit;
contain: initial;
contain: revert;
contain: revert-layer;
contain: unset;
Werte
Die contain
Eigenschaft kann einen der folgenden Werte haben:
- Das Schlüsselwort
none
oder - Ein oder mehrere der durch Leerzeichen getrennten Schlüsselwörter
size
(oderinline-size
),layout
,style
undpaint
in beliebiger Reihenfolge oder - Einer der Kurzformwerte
strict
odercontent
Die Schlüsselwörter haben die folgenden Bedeutungen:
none
-
Das Element wird wie gewohnt gerendert, ohne dass eine Einschließung angewendet wird.
strict
-
Alle Einschließungsregeln werden auf das Element angewendet. Dies entspricht
contain: size layout paint style
. content
-
Alle Einschließungsregeln außer
size
werden auf das Element angewendet. Dies entsprichtcontain: layout paint style
. size
-
Größeneinschließung wird auf das Element sowohl in der Inline- als auch in der Blockrichtung angewendet. Die Größe des Elements kann isoliert berechnet werden, ohne die Kinderelemente zu berücksichtigen. Dieser Wert kann nicht mit
inline-size
kombiniert werden. inline-size
-
Inline-Größeneinschließung wird auf das Element angewendet. Die Inline-Größe des Elements kann isoliert berechnet werden, ohne die Kinderelemente zu berücksichtigen. Dieser Wert kann nicht mit
size
kombiniert werden. layout
-
Das interne Layout des Elements ist vom Rest der Seite isoliert. Das bedeutet, dass nichts außerhalb des Elements dessen internes Layout beeinflusst und umgekehrt.
style
-
Für Eigenschaften, die mehr als nur ein Element und dessen Nachkommen beeinflussen können, entweichen die Effekte nicht dem enthaltenden Element. Zähler und Anführungszeichen sind auf das Element und dessen Inhalt beschränkt.
paint
-
Nachkommen des Elements werden nicht außerhalb seiner Grenzen angezeigt. Wenn das enthaltende Feld außerhalb des Bildschirms liegt, muss der Browser seine enthaltenen Elemente nicht zeichnen — diese müssen ebenfalls außerhalb des Bildschirms sein, da sie vollständig durch dieses Feld enthalten sind. Wenn ein Nachkomme die Grenzen des einschließenden Elements überschreitet, wird dieser Nachkomme an die Begrenzungsbox des enthaltenden Elements abgeschnitten.
Formale Definition
Anfangswert | none |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Formale Syntax
Beispiele
Mal-Einschließung
Das folgende Beispiel zeigt, wie contain: paint
verwendet wird, um zu verhindern, dass Nachkommen eines Elements außerhalb seiner Grenzen gemalt werden.
div {
width: 100px;
height: 100px;
background: red;
margin: 10px;
font-size: 20px;
}
<div style="contain: paint">
<p>This text will be clipped to the bounds of the box.</p>
</div>
<div>
<p>This text will not be clipped to the bounds of the box.</p>
</div>
Layout-Einschließung
Betrachten Sie das folgende Beispiel, das zeigt, wie sich Elemente bei und ohne angewandte Layout-Einschließung verhalten:
<div class="card" style="contain: layout;">
<h2>Card 1</h2>
<div class="fixed"><p>Fixed box 1</p></div>
<div class="float"><p>Float box 1</p></div>
</div>
<div class="card">
<h2>Card 2</h2>
<div class="fixed"><p>Fixed box 2</p></div>
<div class="float"><p>Float box 2</p></div>
</div>
<div class="card">
<h2>Card 3</h2>
<!-- ... -->
</div>
.card {
width: 70%;
height: 90px;
}
.fixed {
position: fixed;
right: 10px;
top: 10px;
background: coral;
}
.float {
float: left;
margin: 10px;
background: aquamarine;
}
Die erste Karte hat eine Layout-Einschließung angewendet und ihr Layout ist vom Rest der Seite isoliert. Wir können diese Karte an anderen Stellen auf der Seite erneut verwenden, ohne uns um die Neuberechnung des Layouts der anderen Elemente zu kümmern. Wenn Gleitblöcke die Kartengrenzen überlappen, sind die Elemente auf dem Rest der Seite nicht betroffen. Wenn der Browser den Teilbaum des enthaltenden Elements neu berechnet, wird nur dieses Element neu berechnet. Nichts außerhalb des enthaltenen Elements muss neu berechnet werden. Zusätzlich verwendet das feste Feld die Karte als Layout-Container, um sich zu positionieren.
Die zweite und dritte Karte haben keine Einschließung.
Der Layoutkontext für das feste Feld in der zweiten Karte ist das Wurzelelement, sodass das feste Feld in der oberen rechten Ecke der Seite positioniert wird.
Ein Gleitblock überlappt die Grenzen der zweiten Karte und verursacht, dass die dritte Karte eine unerwartete Layout-Änderung aufweist, die in der Positionierung des <h2>
Elements sichtbar wird.
Wenn eine Neuberechnung erfolgt, ist sie nicht auf einen Container beschränkt.
Dies wirkt sich auf die Leistung aus und stört das Layout des restlichen Seiteninhalts.
Stil-Einschließung
Stil-Einschließung begrenzt Zähler und Anführungszeichen auf das eingeschlossene Element.
Für CSS-Zähler sind die Eigenschaften counter-increment
und counter-set
auf das Element beschränkt, als ob das Element die Wurzel des Dokuments wäre.
Einschließung und Zähler
Das folgende Beispiel zeigt, wie Zähler funktionieren, wenn Stil-Einschließung angewendet wird:
<ul>
<li>Item A</li>
<li>Item B</li>
<li class="container">Item C</li>
<li>Item D</li>
<li>Item E</li>
</ul>
body {
counter-reset: list-items;
}
li::before {
counter-increment: list-items;
content: counter(list-items) ": ";
}
.container {
contain: style;
}
Ohne Einschließung würde der Zähler für jedes Listenelement von 1 bis 5 inkrementiert.
Die Stil-Einschließung bewirkt, dass die counter-increment
Eigenschaft auf den Teilbaum des Elements beschränkt ist und der Zähler erneut bei 1 beginnt:
Einschließung und Anführungszeichen
CSS-Anführungszeichen sind ähnlich betroffen, da die content
Werte, die sich auf Anführungszeichen beziehen, auf das Element beschränkt sind:
<!-- With style containment -->
<span class="open-quote">
outer
<span style="contain: style;">
<span class="open-quote"> inner </span>
</span>
</span>
<span class="close-quote"> close </span>
<br />
<!-- Without containment -->
<span class="open-quote">
outer
<span>
<span class="open-quote"> inner </span>
</span>
</span>
<span class="close-quote"> close </span>
body {
quotes: "[" "]" "‹" "›";
}
.open-quote:before {
content: open-quote;
}
.close-quote:after {
content: close-quote;
}
Aufgrund der Einschließung ignoriert das erste schließende Anführungszeichen das innere Span und verwendet stattdessen das schließende Anführungszeichen des äußeren Spans:
Spezifikationen
Specification |
---|
CSS Containment Module Level 2 # contain-property |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS-Einschließung
- CSS-Container-Abfragen
- CSS
content-visibility
Eigenschaft - CSS
position
Eigenschaft