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

Erlaubte Werte
  • none
  • style
  • state
  • size
    • inline-size
    • block-size
Vererbung steuernde Werte inherit, initial, unset und revert
Defaultwert

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

Siehe auch

Weblinks