Container-name | CSS-Tricks

CSS Almanac → Eigenschaften → C → container-name

Geoff Graham am 22. Mai 2024

Die CSS-Eigenschaft container-name wird verwendet, um ein Element als Container zu registrieren, der basierend auf der Größe und den Stilen des Containers Formatierungen auf andere Elemente anwendet.

.parent {
  container-name: cards;
  container-type: inline-size;
}

@container cards (width > 800px) {
  .child {
    width: 50cqi;
  }
}

In diesem Beispiel haben wir einen neuen Container namens cards für Elemente mit der Klasse .parent registriert, der die inline-size des Elements — d. h. die width in einem standardmäßigen horizontalen Schreibmodus — berücksichtigt und die Größe des Elements .child ändert, wenn der Container größer als 800px ist und mit @container abgefragt wird, um diesen spezifischen Container abzufragen.

Syntax

container-name: none | <custom-ident>+;

Initialwert: none
Anwendbar auf: Alle Elemente
Vererbt: Nein
Prozentangaben: N/A
Berechneter Wert: none oder eine geordnete Liste von Bezeichnern
Kanonische Reihenfolge: Gemäß Grammatik
Animation: Nicht animierbar

Werte

Die Eigenschaft container-name akzeptiert einen Wert oder mehrere Werte, die durch ein einzelnes Leerzeichen getrennt sind.

/* No container */
container-name: none;

/* Single value */
container-name: wrapper;

/* Two values */
container-name: wrapper hero-banner;

/* Global Values */
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;

none: Das Element hat keinen Containernamen. Dies ist standardmäßig der Fall, daher werden Sie diesen Wert wahrscheinlich nie verwenden, da er ausschließlich dazu dient, das Standardverhalten der Eigenschaft festzulegen.
<custom-ident>: Dies ist der Name des Containers, der alles sein kann, mit Ausnahme von Wörtern, die für andere Funktionen reserviert sind, einschließlich default, none, at, no und or. Beachten Sie, dass die Namen nicht in Anführungszeichen gesetzt werden.

Sie wird mit der Eigenschaft `container-type` verwendet

Das stimmt, stellen Sie sicher, dass Sie container-name zusammen mit container-type verwenden, um einen bestimmten Container ordnungsgemäß zu registrieren, der nach seiner Größe abgefragt werden kann. Der Name identifiziert ihn und der Typ erstellt einen Containment-Kontext.

.parent {
  container-name: cards;
  container-type: inline-size;
}

Das gesagt…

Container benennen ist optional

Ein unbenannter Container passt zu jeder @container-Abfrage, die keinen spezifischen Containernamen explizit anvisiert.

.parent {
  container-type: inline-size;
}

/* Matches any container, named or unnamed */
@container (width < 600px) {
  .child {
    width: 100cqi;
  }
}

Es ist in der Kurzschreibweiseigenschaft `container` enthalten

Wenn Sie es vorziehen würden, nicht sowohl container-name als auch container-type als separate Deklarationen zu schreiben (und wer würde es Ihnen verübeln?), dann können Sie stattdessen die Kurzschreibweiseigenschaft container verwenden, die die beiden Eigenschaften in einer einzigen Deklaration kombiniert, getrennt durch einen Schrägstrich (/).

.parent {
  container: cards / inline-size;

  /* Equivalent to: */
  container-name: cards;
  container-type: inline-size;
}

Arbeiten mit mehreren Containernamen

Zuvor haben wir erwähnt, wie es möglich ist, mehreren Elementen mehrere Containernamen zuzuweisen, solange diese durch Leerzeichen getrennt sind.

.parent {
  container: layout hero-banner / inline-size;

  /* Or */
  container-name: layout hero-banner;
  container-type: inline-size;
}

Wenn wir das tun, können wir den Container abfragen, wenn mehrere Bedingungen erfüllt sind.

@container layout (width < 600px) {
  article {
    flex-direction: column;
  }
}

@container hero-banner (width > 400px) {
  article h2 {
    font-size: 2rem;
  }
}

Spezifikation

Die Eigenschaft container-name ist in der Spezifikation CSS Containment Module Level 3 definiert, die zum Zeitpunkt der Erstellung dieses Dokuments den Status eines Editor's Draft hat.