CSS/Eigenschaften/container-type

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

• CSS/Media Queries/Container Queries

Weblinks

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