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

Diese Eigenschaft wird mit einem oder zwei Schlüsselwortwerten aus der folgenden Liste angegeben. Werden zwei Werte angegeben, muss einer davon scroll-state und der andere inline-size oder size sein:

anchored

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

inline-size

Richtet einen Abfragecontainer für Dimensionsabfragen 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, ohne die Kindelemente zu berücksichtigen (siehe CSS-Containment verwenden).

normal

Standardwert. Das Element ist kein Abfragecontainer für Containergrößen-, Scrollzustands- oder verankerte Abfragen, kann aber als Abfragecontainer für Containerstilabfragen und Containerabfragen nur anhand des Namens verwendet werden.

scroll-state

Richtet einen Abfragecontainer 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 Abfragecontainer für Containergrößenabfragen sowohl in Inline- als auch in Blockrichtung ein. Wendet Style- und Size-Containment auf das Element an. Size-Containment wird sowohl in Inline- als auch in Blockrichtung auf das Element angewendet. Die Größe des Elements kann isoliert berechnet werden, ohne die Kindelemente zu berücksichtigen.

Beschreibung

Mit Containerabfragen können Sie Stile innerhalb eines Containers gezielt anhand von Bedingungen anwenden, die für den Container geprüft werden. Die At-Regel @container gibt die Prüfungen für einen Container sowie die Regeln an, die auf dessen Inhalt angewendet werden, wenn die Abfrage true ergibt.

Bestimmte Arten von Containerabfragen können nur für Elemente ausgeführt werden, bei denen bestimmte Werte der Eigenschaft container-type festgelegt sind. Diese Werte richten die entsprechenden Containerkontexte ein:

• Größe: Ermöglicht es, CSS-Regeln gezielt auf Kindelemente eines Containers anzuwenden, abhängig von einer allgemeinen Größen- oder Inline-Größenbedingung wie einem Höchst- oder Mindestmaß, einem Seitenverhältnis oder einer Ausrichtung.
• Scrollzustand: Ermöglicht es, CSS-Regeln gezielt auf Kindelemente eines Containers anzuwenden, abhängig von einer Scrollzustandsbedingung – etwa davon, ob der Container ein teilweise gescrollter Scrollcontainer ist oder ob er ein Snap-Ziel ist, das am zugehörigen Scroll-Snap-Container eingerastet werden soll.
• Verankerung: Ermöglicht es, CSS-Regeln gezielt auf Kindelemente eines Containers anzuwenden, abhängig davon, ob der Container ankerpositioniert ist und eine Position-try-Fallback-Option auf ihn angewendet wird.

Wenn für einen Container kein container-type festgelegt ist, ist das Element kein Abfragecontainer für Containergrößen-, Scrollzustands- oder verankerte Abfragen. Es kann aber weiterhin als Abfragecontainer für Containerstilabfragen und Containerabfragen nur anhand des Namens verwendet werden.

Containergrößenabfragen

Mit Containergrößenabfragen können Sie CSS-Regeln gezielt auf Nachfahren eines Containers anwenden, abhängig von einer Größenbedingung wie einem Höchst- oder Mindestmaß, einem Seitenverhältnis oder einer Ausrichtung.

Auf Größencontainer wird zusätzlich Size-Containment angewendet. Dadurch kann ein Element seine Größe nicht mehr aus seinem Inhalt ableiten. Das ist für Containerabfragen wichtig, um Endlosschleifen zu vermeiden. Andernfalls könnte eine CSS-Regel innerhalb einer Containerabfrage die Größe des Inhalts ändern. Dadurch könnte die Abfrage false ergeben und sich die Größe des Elternelements ändern, was wiederum die Größe des Inhalts beeinflussen und die Abfrage erneut auf true setzen könnte. Diese Abfolge würde sich endlos wiederholen.

Die Containergröße muss sich aus dem Kontext ergeben, etwa bei Blockelementen, die sich über die gesamte Breite ihres Elternelements erstrecken, oder explizit festgelegt werden. Ist weder eine kontextabhängige noch eine explizite Größe verfügbar, fallen Elemente mit Size-Containment in sich zusammen.

Container-Scrollzustandsabfragen

Mit Container-Scrollzustandsabfragen können Sie CSS-Regeln gezielt auf Kindelemente eines Containers anwenden, abhängig von einer Scrollzustandsbedingung, beispielsweise:

• Ob der Inhalt des Containers teilweise gescrollt ist.
• Ob der Container ein Snap-Ziel ist, das an einem Scroll-Snap-Container eingerastet werden soll.
• Ob der Container mit position: sticky positioniert ist und an einer Grenze eines Scrollcontainers haftet.

Im ersten Fall ist der abgefragte Container selbst der Scrollcontainer. In den beiden anderen Fällen ist der abgefragte Container ein Element, das von der Scrollposition eines übergeordneten Scrollcontainers beeinflusst wird.

Verankerte Containerabfragen

Mit verankerten Containerabfragen können Sie CSS-Regeln gezielt auf Nachfahren eines ankerpositionierten Containers anwenden, wenn für diesen ein über die Eigenschaft position-try-fallbacks festgelegter Position-try-Fallback aktiv ist.

Beispielsweise könnte ein ankerpositioniertes Tooltip-Element durch den Wert top der Eigenschaft position-area standardmäßig oberhalb seines Ankers positioniert sein, während für position-try-fallbacks der Wert flip-block festgelegt ist. Sobald das Tooltip über den oberen Rand des Viewports hinausragen würde, wird es dadurch in Blockrichtung an die Unterseite seines Ankers verschoben. Wenn wir dafür container-type: anchored festlegen, können wir mithilfe einer @container-At-Regel erkennen, wann der Position-try-Fallback angewendet wird, und daraufhin CSS-Regeln anwenden.

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

Formale Definition

Formale Syntax

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

Beispiele

Inline-Size-Containment einrichten

Das folgende HTML-Beispiel zeigt 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 Containerkontext mit Inline-Size-Containment einzurichten, fügen Sie einem Element die Eigenschaft container-type mit dem Wert inline-size hinzu:

.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;
}

Mit einer Containerabfrage über die At-Regel @container werden Stile auf die Elemente des Containers angewendet, wenn dieser breiter als 400px ist:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Containerabfragen
• Containergrößen- und Containerstilabfragen verwenden
• Container-Scrollzustandsabfragen verwenden
• Verankerte Containerabfragen verwenden
• At-Regel @container
• CSS-Kurzschreibweise container
• CSS-Eigenschaft container-name
• CSS-Eigenschaft content-visibility