Container-type | CSS-Tricks

CSS Almanac → Properties → C → container-type

Geoff Graham am 22. Mai 2024

Die CSS-Eigenschaft container-type ist Teil der Container-Queries-Funktion und wird verwendet, um ein Element als Container zu registrieren, der Stile auf andere Elemente anwenden kann, wenn er bestimmte Bedingungen erfüllt.

.parent {
  container-type: inline-size;
}

@container (width < 500px) {
  .child {
    flex-direction: column;
  }
}

Syntax

container-type: normal | size | inline-size;

Anfangswert: normal
Anwendbar auf: Alle Elemente
Vererbt: Nein
Prozentangaben: N/A
Computed value: Wie durch Schlüsselwort angegeben
Kanonische Reihenfolge: Gemäß Grammatik
Animation: Nicht animierbar

Werte

Es gibt derzeit drei Arten von Containern, die wir zusätzlich zu den globalen CSS-Schlüsselwortwerten definieren können

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

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

normal: Dies zeigt an, dass das Element ein Container ist, der anhand seiner Stile und nicht seiner Größe abgefragt werden kann. Alle Elemente sind standardmäßig technisch gesehen Container, daher müssen wir nicht einmal explizit einen container-type zuweisen, um einen Style-Container zu definieren.
size: Dies gilt, wenn wir einen Container anhand seiner Größe abfragen möchten, sei es in inline- oder block-Richtung.
inline-size: Dies ermöglicht uns, einen Container anhand seiner Inline-Größe abzufragen, was in einem Standard-Schreibmodus mit horizontaler Ausrichtung width entspricht. Dies ist wahrscheinlich der am häufigsten verwendete Wert, da wir responsive Designs basierend auf der Elementgröße und nicht auf der Größe des Viewports erstellen können, wie wir es normalerweise mit Media Queries tun würden.

Die Eigenschaft `container-name` erfordert diese manchmal

Technisch gesehen sind alle Elemente standardmäßig Container, nur dass es sich um Style-Container handelt, die nicht anhand ihrer Größe abgefragt werden können. Das liegt daran, dass der Standardwert der Eigenschaft container-type normal ist, was sicherstellt, dass alle Elemente zumindest anhand ihrer Stile abgefragt werden können, auch wenn wir ihnen keinen expliziten container-type zuweisen.

Wenn wir das Element jedoch anhand seiner Größe abfragen möchten, müssen wir explizit einen container-type festlegen

.parent {
  container-type: inline-size;
}

Wir können jedes Element mit der Eigenschaft container-type allein als Container registrieren, auch wenn wir ihm keinen container-name geben. In diesem Fall passt jede @container-Abfrage zum namenlosen Container.

.parent {
  container-type: inline-size;
}

/* This matches the .parent container */
@container (width > 800px) {
  article {
    display: flex;
  }
}

Dennoch müssen wir unbedingt einen container-name angeben, wenn wir einen bestimmten Container abfragen möchten. Und wenn wir diesen bestimmten Container anhand seiner size oder inline-size abfragen möchten, dann müssen wir die Eigenschaft container-type mitführen.

.parent {
  container-name: cards-grid;
  container-type: inline-size;
}

/* This matches the .parent container */
@container cards-grid (width > 800px) {
  article {
    display: flex;
  }
}

Wenn wir jedoch nur den Stil des Elements abfragen möchten, dann ist es nicht notwendig, eine der beiden Eigenschaften zu deklarieren, da alle Elemente standardmäßig Stilabfragen sind, dank container-type: normal als Standardwert.

Sie ist in der `container`-Kurzschreibweise enthalten

Wir können vermeiden, sowohl container-type als auch container-name separat deklarieren zu müssen, indem wir die Kurzschreibweise container verwenden, die die beiden zu einer einzigen Deklaration kombiniert.

.parent {
  container: cards-grid / inline-size;

  /* Equivalent to: */
  container-name: cards-grid;
  container-type: inline-size;
}

Spezifikation

Die Eigenschaft container-type ist in der Spezifikation des CSS Containment Module Level 3 definiert, die zum Zeitpunkt der Erstellung dieses Artikels den Status eines Editor's Draft hat.