CSS/Eigenschaften/container-type

Browserunterstützung
caniuse.com

Die Eigenschaft container-type legt fest, dass das Element als Abfragecontainer für @container-Abfragen verwendet werden soll. Je nach Wert dieser Eigenschaft können Kind-Elemente dann auf die Inline-Größe oder auch auf Inline- und Blockgröße Bezug nehmen.

Beachten Sie: Die Angabe von container-type erzeugt einen Query-Container und automatisch auch eine Größen-, Layout- und Style-Containment-Box für dieses Element. Das Größen-Containment wird in dem Umfang aktiviert, wie es der Container erfordert (inlize-size oder size).

Erlaubte Werte

• none
• size
• inline-size

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

main {
  container-type: size;
  container-name: page-layout;
}

.my-component {
  container-type: inline-size;
  container-name: component-library;
}

@container page-layout (block-size > 12em) {
  .card { margin-block: 2em; }
}

@container component-library (inline-size > 30em) {
  .card { margin-inline: 2em; }
}

.

Beachten Sie: In der Container-Spezifikation von 2021 waren weitere Werteausprägungen state, style und block-size vorgesehen, für die aber keine Syntax festgelegt wurde und die seit 2021 aus der Spezifikation entfernt wurden.

• state: Hiermit hätte man beispielsweise abfragen können, ob ein position:sticky-Element von seiner Normalposition verschoben wurde, oder überhaupt sichtbar ist.
• style: Dies wäre eine frei Abfrage auf CSS-Eigenschaften des Containers gewesen, z.B. @container (color:blue)
• block-size: Dies wäre das Gegenstück zu inline-size in Block-Richtung gewesen, aber die Spec-Autoren hatten ohnehin genügend Kopfschmerzen mit eindimensionalem Containment und haben „Containment nur in Block-Richtung“ nicht umgesetzt. Das Ergebnis der Diskussion ist, dass man container-type: size verwendet, wenn man eine Abfrage auf block-size braucht.

Siehe auch

• CSS/Media Queries/Container Queries

Weblinks

• Spezifikation (CSSWG): container-type CSS Containment Module Level 3
• MDN: container-type
• Details: caniuse.com