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

• 
• 
• 
• 
• 

Details: 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

• Spezifikation (CSSWG): container-type CSS Containment Module Level 3

Siehe auch

• CSS/Media Queries/Container Queries