CSS/Eigenschaften/container-name

Die Eigenschaft container-name gibt eine Liste von Abfragecontainernamen an. Diese Namen können von @container-Regeln verwendet werden, um zu filtern, auf welche Abfragecontainer abgezielt wird.

Browserunterstützung

caniuse.com

erlaubte Werte	none <custom-ident> <string> 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-name CSS Containment Module Level 3

Siehe auch

• CSS/Media Queries/Container Queries