container-type CSS property

Syntax

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

/* 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 folgenden 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ößenabfrage-Container, Scrollzustandsabfrage-Container, beides oder keines eingerichtet werden.

anchored

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

inline-size

Richtet einen Abfrage-Container für dimensionale Abfragen auf der Inline-Achse des Containers ein. Wendet style und inline-size Containment auf das Element an. Die Inline-Größe des Elements kann isoliert berechnet werden, wobei die Kindelemente ignoriert werden (siehe CSS-Containment verwenden).

normal

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

scroll-state

Richtet einen Abfrage-Container für Scrollzustandsabfragen auf dem Container ein. In diesem Fall wird die Größe des Elements nicht isoliert berechnet; es wird kein Containment angewendet.

size

Richtet einen Abfrage-Container für Containergrößenabfragen in beiden Inline- und Block- Dimensionen ein. Wendet style und size Containment auf das Element an. Größencontainment wird sowohl in Inline- als auch Blockrichtung auf das Element angewendet. Die Größe des Elements kann isoliert berechnet werden, wobei die Kindelemente ignoriert werden.

Formale Definition

Formale Syntax

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

Beschreibung

Container-Abfragen ermöglichen es, Stile innerhalb eines Containers selektiv basierend auf bedingten Abfragen, die am Container durchgeführt werden, anzuwenden. Die @container-Regel wird verwendet, um die Tests zu spezifizieren, die an einem Container durchgeführt werden, und die Regeln, die auf die Inhalte des Containers angewendet werden, wenn die Abfrage true zurückgibt.

Die Container-Abfragetests werden nur an Elementen mit einer container-type-Eigenschaft durchgeführt, die die Elemente als Größen-, Scrollzustands- oder verankerte Abfrage-Container oder eine Kombination davon definiert.

Containergrößenabfragen

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

Größencontainer haben zusätzliches Größencontainment, das ihnen angewendet wird — dies deaktiviert die Möglichkeit eines Elements, Größeninformationen von seinen Inhalten zu erhalten, was für Container-Abfragen wichtig ist, um Endlosschleifen zu vermeiden. Wäre dies nicht der Fall, könnte eine CSS-Regel innerhalb einer Container-Abfrage die Inhaltsgröße ändern, was wiederum die Abfrage falsch auswerten und die Größe des Elternelements ändern könnte, was wiederum die Inhaltsgröße ändern und die Abfrage wieder auf wahr zurücksetzen könnte, und so weiter. Diese Sequenz würde sich dann in einer Endlosschleife wiederholen.

Die Containergröße muss durch den Kontext festgelegt werden, wie z.B. Blockebenen-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ößencontainment kollabieren.

Container-Scrollzustandsabfragen

Container-Scrollzustandsabfragen ermöglichen es, CSS-Regeln selektiv auf die Kinder eines Containers basierend auf einer Scrollzustandsbedingung anzuwenden, wie:

• Ob die Inhalte des Containers teilweise gescrollt sind.
• Ob der Container ein Snap-Ziel ist, das auf einen Scroll-Snap-Container gesnappt wird.
• Ob der Container über position: sticky positioniert und an eine Grenze eines Scroll-Containers geheftet 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 Scrollposition eines übergeordneten Scroll-Containers betroffen ist.

Verankerte Containerabfragen

Verankerte Containerabfragen ermöglichen es, CSS-Regeln selektiv auf die Nachkommen eines ankerpositionierten Containers anzuwenden, wenn auf ihn ein aktives Position-Try-Fallback, wie über die position-try-fallbacks-Eigenschaft spezifiziert, angewendet ist.

Sie könnten zum Beispiel ein ankerpositioniertes Tooltip-Element haben, das standardmäßig oberhalb seines Ankers über einen position-area-Wert von top positioniert ist, aber einen position-try-fallbacks-Wert von flip-block spezifiziert hat. Dies führt dazu, dass das Tooltip in Blockrichtung an die Unterseite seines Ankers springt, wenn es anfängt, über den oberen Rand des Viewports hinaus zu gehen. Wenn wir container-type: anchored darauf setzen, können wir erkennen, wann das Position-Try-Fallback über eine @container-Regel angewendet wird und CSS entsprechend anwenden.

.tooltip {
  position: absolute;
  position-anchor: --myAnchor;
  position-area: top;
  position-try-fallbacks: flip-block;
  container-type: anchored;
}

Beispiele

Einrichtung des Inline-Größencontaintments

Angenommen, Sie haben das folgende HTML-Beispiel, welches eine Kartenkomponente mit einem Bild, einem Titel und etwas Text darstellt:

<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 dem Element die container-type-Eigenschaft hinzu. Das Folgende verwendet den Wert inline-size, um einen Containment-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;
}

Eine Container-Abfrage durch die @container-Regel zu schreiben, wird die 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 Containergrößen- und Stilabfragen
• Verwendung von Container-Scrollzustandsabfragen
• Verwendung von verankerten Containerabfragen
• @container-Regel
• CSS-container-Kurzschreibweise
• CSS-container-name-Eigenschaft
• CSS-content-visibility-Eigenschaft