contain

Probieren Sie es aus

contain: none;

contain: size;

contain: layout;

contain: paint;

contain: strict;

<section class="default-example" id="default-example">
  <div class="card" id="example-element">
    <h2>Element with '<code>contain</code>'</h2>
    <p>
      The Goldfish is a species of domestic fish best known for its bright
      colors and patterns.
    </p>
    <div class="fixed"><p>Fixed right 4px</p></div>
  </div>
</section>

h2 {
  margin-top: 0;
}

#default-example {
  text-align: left;
  padding: 4px;
  font-size: 16px;
}

.card {
  text-align: left;
  border: 3px dotted;
  padding: 20px;
  margin: 10px;
  width: 85%;
  min-height: 150px;
}

.fixed {
  position: fixed;
  border: 3px dotted;
  right: 4px;
  padding: 4px;
  margin: 4px;
}

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
• Eines oder mehrere der durch Leerzeichen getrennten Schlüsselwörter size (oder inline-size), layout, style und paint in beliebiger Reihenfolge oder
• Einen der Kurzschriftwerte strict oder content

Die Schlüsselwörter haben folgende Bedeutungen:

none

Das Element wird normal gerendert, ohne dass Isolierung angewendet wird.

strict

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

content

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

size

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

inline-size

Inline-Größenisolation wird auf das Element angewendet. Die Inline-Größe des Elements kann isoliert berechnet werden, ohne die untergeordneten Elemente 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 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 aus dem umgebenden Element. Zähler und Anführungszeichen sind auf das Element und seine Inhalte begrenzt.

paint

Nachkommen des Elements werden außerhalb seiner Grenzen nicht angezeigt. Wenn das umgebende Feld nicht auf dem Bildschirm ist, muss der Browser seine enthaltenen Elemente nicht malen — diese müssen ebenfalls außerhalb des Bildschirms sein, da sie vollständig von diesem Feld eingeschlossen sind. Wenn ein Nachkomme die Grenzen des umgebenden Elements überschreitet, wird der Nachkomme auf die Begrenzung des umgebenden Elements abgeschnitten.

Beschreibung

Es gibt vier Arten der CSS-Isolierung: Größe, Layout, Stil und Malen, die auf dem Container gesetzt sind. Die Eigenschaft ist eine durch Leerzeichen getrennte Liste von einem Teil der fünf Standardwerte oder einem der beiden Kurzschriftwerte. Änderungen an den enthaltenen Eigenschaften innerhalb des Containers werden nicht außerhalb des enthaltenen Elements auf den Rest der Seite übertragen. Der Hauptvorteil der Isolierung 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 in dynamischeren Anwendungen führt.

Die Verwendung der contain Eigenschaft ist auf Seiten mit Gruppen von Elementen hilfreich, die unabhängig sein sollen, da sie verhindert, dass die Interna der Elemente Effekte außerhalb ihrer Begrenzungsrahmen haben.

Formale Definition

Formale Syntax

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

Beispiele

Mal-Isolierung

Das folgende Beispiel zeigt, wie Sie contain: paint verwenden, 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;
}

.contain-paint {
  contain: paint;
}

<div class="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-Isolierung

Betrachten Sie das folgende Beispiel, das zeigt, wie Elemente sich mit und ohne Layout-Isolierung verhalten:

<div class="card 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;
}

.contain-layout {
  contain: layout;
}

Die erste Karte hat Layout-Isolierung und ihr Layout ist vom Rest der Seite isoliert. Wir können diese Karte an anderen Stellen auf der Seite wiederverwenden, ohne uns über eine erneute Layoutberechnung der anderen Elemente Sorgen machen zu müssen. Wenn Floats die Kartenränder überlappen, werden Elemente auf dem Rest der Seite nicht beeinflusst. Wenn der Browser den Teilbaum des enthaltenen Elements neu berechnet, wird nur dieses Element neu berechnet. Nichts außerhalb des enthaltenen Elements muss neu berechnet werden. Zusätzlich verwendet das feststehende Feld die Karte als Layout-Container, um sich selbst zu positionieren.

Die zweite und dritte Karte haben keine Isolierung. Der Layout-Kontext für das feste Feld in der zweiten Karte ist das Root-Element, sodass das feste Feld in der oberen rechten Ecke der Seite positioniert ist. Ein Float überlappt die Grenzen der zweiten Karte, was dazu führt, dass die dritte Karte eine unerwartete Layout-Verschiebung hat, die in der Positionierung des <h2> Elements sichtbar ist. Bei Neuberechnung ist sie nicht auf einen Container beschränkt. Dies beeinträchtigt die Leistung und stört das restliche Seitenlayout.

Stil-Isolierung

Stil-Isolierung begrenzt Zähler und Anführungszeichen auf das enthaltene Element. Für CSS-Zähler werden die Eigenschaften counter-increment und counter-set auf das Element beschränkt, als ob das Element an der Wurzel des Dokuments steht.

Isolierung und Zähler

Das folgende Beispiel betrachtet, wie Zähler funktionieren, wenn Stil-Isolierung 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 Isolierung würde der Zähler für jedes Listenelement von 1 bis 5 inkrementiert. Stil-Isolierung bewirkt, dass die Eigenschaft counter-increment auf den Teilbaum des Elements begrenzt ist und der Zähler wieder bei 1 beginnt:

Isolierung und Anführungszeichen

CSS Anführungszeichen sind ähnlich betroffen, da die content Werte in Bezug auf Anführungszeichen auf das Element beschränkt sind:

<!-- With style containment -->
<span class="open-quote">
  outer
  <span class="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;
}

.contain-style {
  contain: style;
}

Aufgrund der Isolierung ignoriert das erste schließende Anführungszeichen den inneren span und verwendet stattdessen das schließende Anführungszeichen des äußeren span:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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