CSS/Eigenschaften/container-name

Browserunterstützung
caniuse.com

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.

Erlaubte Werte

• none
• <custom-ident>
• <string>

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

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-name CSS Containment Module Level 3
• Details: caniuse.com