container-type

Syntax

/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;

/* Two values */
container-type: size scroll-state;

/* Global Values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

Werte

Die container-type Eigenschaft kann einen einzelnen Wert aus der untenstehenden Liste oder zwei Werte annehmen — einer muss scroll-state sein und der andere kann inline-size oder size sein. Mit anderen Worten, ein Element kann als Größen-Abfrage-Container, als Scroll-Zustand-Abfrage-Container, beides oder keines von beiden festgelegt werden.

inline-size

Etabliert einen Abfrage-Container für dimensionsbezogene Abfragen auf der Inline-Achse des Containers. Wendet Style und inline-size Containment auf das Element an. Die Inline-Größe des Elements kann isoliert berechnet werden, unabhängig von den Kind-Elementen (siehe Using CSS containment).

normal

Standardwert. Das Element ist kein Abfrage-Container für Container-Größenabfragen, bleibt jedoch ein Abfrage-Container für Container-Stilabfragen.

scroll-state

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

size

Etabliert einen Abfrage-Container für Container-Größenabfragen in beiden Dimensionen Inline und Block. Wendet Style und size Containment auf das Element an. Größen-Containment wird auf das Element sowohl in der Inline- als auch der Blockrichtung angewendet. Die Größe des Elements kann isoliert berechnet werden, unabhängig von den Kind-Elementen.

Formale Definition

Formale Syntax

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

Beschreibung

Container-Abfragen ermöglichen es Ihnen, selektiv Stile innerhalb eines Containers basierend auf bedingten Abfragen, die am Container durchgeführt werden, anzuwenden. Die @container At-Regel wird verwendet, um die Tests festzulegen, die an einem Container durchgeführt werden, und die Regeln, die auf den Inhalt des Containers angewendet werden, wenn die Abfrage true ergibt.

Die Container-Abfrage-Tests werden nur an Elementen mit einer container-type Eigenschaft durchgeführt, die die Elemente als Größen- oder Scroll-Zustand-Container, oder beides definieren.

Container-Größenabfragen

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

Größen-Container haben zusätzlich ein Größen-Containment, das angewendet wird — dies schaltet die Fähigkeit eines Elements ab, Größeninformationen aus seinem Inhalt zu beziehen, was für Container-Abfragen wichtig ist, um unbegrenzte Schleifen zu vermeiden. Wenn dies nicht der Fall wäre, könnte eine CSS-Regel innerhalb einer Container-Abfrage die Inhaltsgröße ändern, was wiederum die Abfrage dazu bringen könnte, als falsch bewertet zu werden und die Größe des Elternelements zu ändern, was wiederum die Inhaltsgröße ändern und die Abfrage wieder auf wahr setzen könnte, und so weiter. Diese Sequenz würde sich dann in einer endlosen Schleife wiederholen.

Die Container-Größe muss durch Kontext festgelegt werden, wie Block-Level-Elemente, die sich über die gesamte Breite ihres Elternteils erstrecken, oder explizit definiert sein. Wenn keine kontextuelle oder explizite Größe verfügbar ist, werden Elemente mit Größen-Containment zusammenbrechen.

Container-Scroll-Zustand-Abfragen

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

• Ob die Inhalte des Containers teilweise gescrollt sind.
• Ob der Container ein Schnappziel ist, das zu einem Scroll-Schnapp-Container geschnappt werden soll.
• Ob der Container über position: sticky positioniert ist und an einer Grenze eines Scrolling-Containers haftet.

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 übergeordneten Scroll-Containers betroffen ist.

Beispiele

Etablierung der Inline-Größen-Containment

Angenommen, das folgende HTML-Beispiel ist eine Karten-Komponente 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 Beispiel verwendet den inline-size Wert, um einen Container-Kontext 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;
}

Das Schreiben einer Container-Abfrage über die @container At-Regel wird Stile auf die Elemente des Containers anwenden, wenn dieser breiter als 400px ist:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Container-Abfragen
• Verwendung von Container-Größen- und Stilabfragen
• Verwendung von Container-Scroll-Zustand-Abfragen
• @container At-Regel
• CSS container Kurzschreibweise
• CSS container-name Eigenschaft
• CSS content-visibility Eigenschaft