CSS/Eigenschaften/container-type

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft container-type legt das Element als Abfragecontainer für die Zwecke von Containerabfragen fest und ermöglicht es Stilregeln, die seine Nachkommen stylen, verschiedene Aspekte seiner Größe, seines Layouts und seines Stils abzufragen und entsprechend zu reagieren

Browserunterstützung
caniuse.com
erlaubte Werte
  • none
  • style
  • state
  • size
    • inline-size
    • block-size
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: * none
anwendbar auf alle Elemente
Browsersupport Details: caniuse.com
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; }
}
.

Weblinks

Siehe auch