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 ein 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 Containment angewendet wird.

strict

Alle Containment-Regeln werden auf das Element angewendet. Dies entspricht contain: size layout paint style.

content

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

size

Eine Größenbeschränkung wird auf das Element sowohl in Inline- als auch Blockrichtungen 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

Eine Inline-Größenbeschränkung 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. Das bedeutet, dass nichts außerhalb des Elements das interne 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 enthaltenen Element. Zähler und Anführungszeichen sind auf das Element und seinen Inhalt beschränkt.

paint

Nachfahren des Elements werden außerhalb seiner Grenzen nicht angezeigt. Befindet sich das enthaltene Kästchen außerhalb des Bildschirms, muss der Browser seine enthaltenen Elemente nicht zeichnen - diese müssen ebenfalls außerhalb des Bildschirms sein, da sie vollständig durch dieses Kästchen eingeschlossen sind. Wenn ein Nachkomme die Grenzen des enthaltenen Elements überschreitet, wird dieser Nachkomme bis zur Grenze des enthaltenen Elements abgeschnitten.

Beschreibung

Es gibt vier Arten von CSS-Containment: Größe, Layout, Stil und Malen, die auf den Container gesetzt werden. Die Eigenschaft ist eine durch Leerzeichen getrennte Liste einer Teilmenge der fünf Standardwerte oder einer 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 von Containment ist, dass der Browser nicht so oft den DOM oder das Seitenlayout neu rendern muss, was zu kleinen Leistungsverbesserungen bei der Darstellung statischer Seiten und zu größeren Leistungsverbesserungen 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 sie verhindert, dass die internen Elemente Auswirkungen außerhalb ihrer Begrenzungsbox haben.

Formale Definition

Formale Syntax

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

Beispiele

Malen-Containment

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

Betrachten Sie das folgende Beispiel, das zeigt, wie Elemente sich mit und ohne angewendetes Layout-Containment 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-Containment angewendet und ihr Layout ist vom Rest der Seite isoliert. Wir können diese Karte an anderen Stellen auf der Seite wiederverwenden, ohne uns Sorgen über eine Neuberechnung des Layouts der anderen Elemente machen zu müssen. Wenn Floats die Grenzen der Karte überlappen, sind die restlichen Elemente der Seite nicht betroffen. 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 nutzt die feste Box die Karte als Layout-Container, um sich selbst zu positionieren.

Die zweite und dritte Karte haben kein Containment. Der Layout-Kontext für die feste Box in der zweiten Karte ist das Wurzelelement, so dass die feste Box in der oberen rechten Ecke der Seite positioniert wird. Ein Float überlappt die Grenzen der zweiten Karte und verursacht eine unerwartete Layout-Verschiebung in der dritten Karte, die in der Positionierung des <h2> Elements sichtbar ist. Wenn eine Neuberechnung stattfindet, ist sie nicht auf den Container beschränkt. Dies beeinträchtigt die Leistung und stört das Layout der restlichen Seite.

Stil-Containment

Stil-Containment begrenzt Zähler und Anführungszeichen auf das enthaltene Element. Für CSS-Zähler sind die Eigenschaften counter-increment und counter-set auf das Element begrenzt, als ob das Element die Wurzel des Dokuments wäre.

Containment und Zähler

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

Containment und Anführungszeichen

CSS-Anführungszeichen sind ähnlich betroffen, da die content Werte, die sich auf Anführungszeichen beziehen, auf das Element begrenzt 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 des Containments ignoriert das erste schließende Anführungszeichen das innere Span und verwendet stattdessen das schließende Anführungszeichen des äußeren Span:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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