CSS/Eigenschaften/container-type

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Container-type)
Wechseln zu: Navigation, Suche
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[1] ist, dass man container-type: size verwendet, wenn man eine Abfrage auf block-size braucht.

Siehe auch

Weblinks

  1. Spec Issues: 1D-Size-Containment for @container-Queries (abgerufen 05.06.2023)