container-type

Die container-type Eigenschaft kann einen einzelnen Wert aus der unten stehenden Liste annehmen oder zwei Werte — einer muss scroll-state sein und der andere kann inline-size oder size sein. Mit anderen Worten, ein Element kann als Größenabfragecontainer, Scroll-Zustandsabfragecontainer, beides oder keines festgelegt werden.

inline-size

Etabliert einen Abfragecontainer für dimensionsbezogene Abfragen auf der Inline-Achse des Containers. Wendet Layout-, Stil- und Inline-Größenkonformität auf das Element an.

Die Inline-Größenkonformität wird auf das Element angewendet. Die Inline-Größe des Elements kann isoliert berechnet werden, ohne die Kindelemente zu berücksichtigen (siehe Verwendung von CSS-Eingrenzung).

normal

Standardwert. Das Element ist kein Abfragecontainer für Containergrößenabfragen, bleibt jedoch ein Abfragecontainer für Containerstilabfragen.

scroll-state

Etabliert einen Abfragecontainer für Scroll-Zustandsabfragen auf dem Container. In diesem Fall wird die Größe des Elements nicht isoliert berechnet; es wird keine Eingrenzung angewendet.

size

Etabliert einen Abfragecontainer für Containergrößenabfragen in beiden Inline- und Block- Dimensionen. Wendet Layout-Eingrenzung, Stil-Eingrenzung und Größen-Eingrenzung auf den Container an.

Die Größen-Eingrenzung wird auf das Element in beiden Richtungen, Inline und Block, angewendet. Die Größe des Elements kann isoliert berechnet werden, ohne die Kindelemente zu berücksichtigen.

container-type = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]  

Containerabfragen ermöglichen es Ihnen, Stile innerhalb eines Containers selektiv anzuwenden, basierend auf bedingten Abfragen, die auf dem Container durchgeführt werden. Der @container At-Regel wird verwendet, um die auf einem Container durchgeführten Tests zu spezifizieren und die Regeln, die auf den Inhalt des Containers angewendet werden, falls die Abfrage true zurückgibt.

Die Containerabfragetests werden nur auf Elemente mit einer container-type Eigenschaft durchgeführt, die die Elemente als Größen- oder Scroll-Zustandscontainer oder beides definiert.

Containergrößenabfragen ermöglichen es Ihnen, CSS-Regeln selektiv auf die Nachfahren eines Containers anzuwenden, basierend auf einer Größenbedingung wie einer maximalen oder minimalen Abmessung, einem Seitenverhältnis oder einer Ausrichtung.

Größencontainer haben zusätzlich Größen-Eingrenzung auf sie angewendet — dies schaltet die Fähigkeit eines Elements aus, Größeninformationen von seinen Inhalten zu erhalten, was wichtig für Containerabfragen ist, um Endlosschleifen zu vermeiden. Wenn dies nicht der Fall wäre, könnte eine CSS-Regel innerhalb einer Containerabfrage die Inhaltsgröße ändern, was wiederum die Abfrage als falsch bewerten könnte und die Größe des Elternelements ändern würde, was wiederum die Inhaltsgröße ändern könnte und die Abfrage wieder auf wahr setzen könnte, und so weiter. Diese Sequenz würde sich dann in einer endlosen Schleife wiederholen.

Die Containergröße muss durch den Kontext festgelegt werden, wie Block-Level-Elemente, die sich über die volle Breite ihres Elternteils erstrecken, oder explizit definiert werden. Wenn eine kontextuelle oder explizite Größe nicht verfügbar ist, werden Elemente mit Größen-Eingrenzung zusammenbrechen.

Container Scroll-Zustandsabfragen ermöglichen es Ihnen, CSS-Regeln selektiv auf die Kinder eines Containers anzuwenden, basierend auf einer Scroll-Zustandsbedingung wie:

• Ob der Inhalt des Containers teilweise gescrollt ist.
• Ob der Container ein Snap-Ziel ist, das zu einem Scroll-Snap-Container geschnappt ist.
• Ob der Container via position: sticky positioniert ist und an die Grenze eines Scroll-Containers geklebt ist.

Im ersten Fall ist der abgefragte Container der Scroll-Container selbst. In den anderen beiden Fällen ist der abgefragte Container ein Element, das von der Scroll-Position eines Vorfahren-Scroll-Containers beeinflusst wird.

Angenommen, das folgende HTML-Beispiel ist eine Kartenkomponente mit einem Bild, einem Titel und etwas Text:

<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Um einen Container-Kontext zu erstellen, fügen Sie die container-type Eigenschaft zu einem Element hinzu. Das Folgende verwendet den Wert inline-size, um einen Eingrenzungskontext für die Inline-Achse des Containers zu erstellen:

.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

Eine Containerabfrage über die @container At-Regel zu schreiben, wird die Stile auf die Elemente des Containers anwenden, wenn er breiter als 400px ist:

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

• CSS-Containerabfragen
• Verwendung von Containergrößen- und Stilabfragen
• Verwendung von Container-Scroll-Zustandsabfragen
• @container At-Regel
• CSS container Kurzform-Eigenschaft
• CSS container-name Eigenschaft
• CSS content-visibility Eigenschaft