contain

Es gibt vier Arten der CSS-Eingrenzung: Größe, Layout, Stil und Malen, die auf dem Container festgelegt werden können. Die Eigenschaft ist eine durch Leerzeichen getrennte Liste einer Untermenge der fünf Standardwerte oder einer der zwei Kurzschreibweisen. Änderungen an den eingeschlossenen Eigenschaften innerhalb des Containers werden nicht außerhalb des eingeschlossenen Elements auf den Rest der Seite übertragen. Der Hauptvorteil der Eingrenzung besteht darin, dass der Browser den DOM oder das Seitenlayout weniger häufig neu rendern muss, was zu kleinen Leistungssteigerungen bei statischen Seiten und größeren Vorteilen in dynamischeren Anwendungen führt.

Die Verwendung der contain-Eigenschaft ist nützlich auf Seiten mit Gruppen von Elementen, die unabhängig sein sollen, da dies verhindert, dass interne Elemente Auswirkungen außerhalb ihrer Begrenzungsbox haben.

Die contain-Eigenschaft kann die folgenden Werte haben:

• Das Schlüsselwort none oder
• Eines oder mehrere der durch Leerzeichen getrennten Schlüsselwörter size (oder inline-size), layout, style und paint in beliebiger Reihenfolge oder
• Einer der Kurzschreibwerte strict oder content

Die Schlüsselwörter haben die folgenden Bedeutungen:

none

Das Element wird normal dargestellt, ohne dass eine Eingrenzung erfolgt.

strict

Alle Eingrenzungsregeln werden auf das Element angewendet. Dies entspricht contain: size layout paint style.

content

Alle Eingrenzungsregeln außer size werden auf das Element angewendet. Dies entspricht contain: layout paint style.

size

Größeneingrenzung wird sowohl in Inline- als auch in Blockrichtung auf das Element angewandt. Die Größe des Elements kann isoliert berechnet werden, ohne die Kindelemente zu berücksichtigen. Dieser Wert kann nicht mit inline-size kombiniert werden.

inline-size

Inline-Größeneingrenzung wird auf das Element angewandt. Die Inline-Größe des Elements kann isoliert berechnet werden, ohne die Kindelemente zu berücksichtigen. Dieser Wert kann nicht mit size kombiniert werden.

layout

Das interne Layout des Elements ist vom Rest der Seite isoliert. Dies bedeutet, dass nichts außerhalb des Elements sein internes Layout beeinflusst und umgekehrt.

style

Für Eigenschaften, die mehr als nur das Element und seine Nachkommen beeinflussen können, entweichen die Effekte nicht aus dem Eingrenzungselement. Zähler und Anführungszeichen sind auf das Element und seinen Inhalt beschränkt.

paint

Nachkommen des Elements werden nicht außerhalb der Grenzen des Elements angezeigt. Befindet sich der begrenzende Kasten außerhalb des sichtbaren Bereichs, muss der Browser dessen enthaltene Elemente nicht rendern – diese befinden sich ebenfalls außerhalb des sichtbaren Bereichs, da sie vollständig durch diesen Kasten eingeschlossen werden. Überschreitet ein Nachkomme die Grenzen des eingeschlossenen Elements, wird dieser Nachkomme an den Rand der Begrenzungsbox des Elements abgeschnitten.

contain = 
  none                                                |
  strict                                              |
  content                                             |
  [ [ size | inline-size ] || layout || style || paint ]  

Das folgende Beispiel zeigt, wie contain: paint verwendet wird, um zu verhindern, dass die Nachkommen eines Elements außerhalb seiner Grenzen gezeichnet 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>

Betrachten Sie folgendes Beispiel, das zeigt, wie sich Elemente mit und ohne Layouteingrenzung 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>

p {
  margin: 4px;
  padding: 4px;
}

h2 {
  margin-bottom: 4px;
  padding: 10px;
}

div {
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 gray;
  padding: 6px;
  margin: 6px;
}

.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 Layouteingrenzung angewendet, und ihr Layout ist vom Rest der Seite isoliert. Wir können diese Karte an anderen Stellen der Seite wiederverwenden, ohne uns über Layout-Neuberechnungen anderer Elemente Sorgen machen zu müssen. Falls Floats die Kartengrenzen überlappen, werden Elemente im Rest der Seite nicht beeinflusst. Wenn der Browser das Subtree-Layout des eingeschlossenen Elements neu berechnet, wird nur dieses Element neu berechnet. Nichts außerhalb des eingeschlossenen Elements muss neu berechnet werden. Darüber hinaus verwendet das feste Kästchen die Karte als Layout-Container, um sich zu positionieren.

Die zweite und dritte Karte haben keine Eingrenzung. Der Layoutkontext für das feste Kästchen in der zweiten Karte ist das Root-Element, daher wird das feste Kästchen in der oberen rechten Ecke der Seite positioniert. Ein Float überlappt die Grenzen der zweiten Karte, was dazu führt, dass die dritte Karte eine unerwartete Layoutverschiebung aufweist, die sich im Positionieren des <h2>-Elements zeigt. Wenn eine Neuberechnung erfolgt, ist diese nicht auf einen Container beschränkt. Dies beeinträchtigt die Leistung und stört das restliche Seitenlayout.

Stileingrenzung begrenzt Zähler und Anführungszeichen auf das eingeschlossene Element. Für CSS-Zähler werden die Eigenschaften counter-increment und counter-set so eingeschränkt, als befände sich das Element an der Wurzel des Dokuments.

Eingrenzung und Zähler

Das folgende Beispiel zeigt, wie Zähler funktionieren, wenn Stileingrenzung 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 Eingrenzung würde der Zähler für jedes Listenelement von 1 bis 5 hochzählen. Stileingrenzung bewirkt, dass die counter-increment-Eigenschaft auf den Teilbaum des Elements beschränkt wird und der Zähler erneut bei 1 beginnt:

Eingrenzung und Anführungszeichen

CSS-Anführungszeichen werden ähnlich beeinflusst, indem die content-Werte in Bezug auf Anführungszeichen auf das Element begrenzt werden:

<!-- 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 Eingrenzung ignoriert das erste schließende Anführungszeichen das innere <span> und verwendet stattdessen das abschließende Anführungszeichen des äußeren <span>:

• CSS-Eingrenzung
• CSS-Container-Abfragen
• CSS-content-visibility-Eigenschaft
• CSS-position-Eigenschaft