container-name

Baseline 2023
Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die container-name CSS Eigenschaft legt eine Liste von Container-Namen für Abfragen fest, die von der @container Regel in einer Containern-Abfrage verwendet werden. Eine Container-Abfrage wird Stile auf Elemente basierend auf der Größe oder dem Scroll-Zustand des nächstgelegenen Vorfahren mit einem Containment-Kontext anwenden. Wenn einem Containment-Kontext ein Name zugewiesen wird, kann er spezifisch unter Verwendung der @container Regel statt des nächstgelegenen Vorfahren mit Containment angesprochen werden.

Hinweis: Bei Verwendung der Eigenschaften container-type und container-name werden die Werte style und layout der Eigenschaft contain automatisch angewendet.

Syntax

css
container-name: none;

/* A single name */
container-name: myLayout;

/* Multiple names */
container-name: myPageLayout myComponentLibrary;

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

Werte

none

Standardwert. Der Abfrage-Container hat keinen Namen.

<custom-ident>

Eine groß- und kleinschreibungssensitive Zeichenkette, die zur Identifizierung des Containers verwendet wird. Die folgenden Bedingungen gelten:

  • Der Name darf nicht or, and, not oder default entsprechen.
  • Der Namenswert darf nicht in Anführungszeichen stehen.
  • Das gestrichelte Identifikationsmerkmal, das zur Bezeichnung von benutzerdefinierten Bezeichnern verwendet wird (z.B. --container-name), ist erlaubt.
  • Eine Liste mehrerer Namen, getrennt durch ein Leerzeichen, ist zulässig.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertnone or an ordered list of identifiers
AnimationstypNot animatable

Formale Syntax

container-name = 
  none             |
  <custom-ident>+

Beispiele

Verwendung eines Container-Namens

Gegeben ist das folgende HTML-Beispiel, welches eine Karten-Komponente mit einem Titel und etwas Text darstellt:

html
<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

Um einen Containment-Kontext zu erstellen, fügen Sie die Eigenschaft container-type einem Element in CSS hinzu. Das folgende Beispiel erstellt zwei Containment-Kontexte, einen für die Karten-Metadaten und einen für den Beitragstext:

Hinweis: Eine Kurzschreibweise für diese Deklarationen wird auf der container Seite beschrieben.

css
.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

Das Schreiben einer Container-Abfrage über die @container Regel wird Stile auf die Elemente des Containers anwenden, wenn die Abfrage zutrifft. Das folgende Beispiel hat zwei Container-Abfragen, eine, die nur auf den Inhalt des .post-excerpt-Elements angewendet wird, und eine, die sowohl auf den .post-meta als auch den .post-excerpt-Inhalt angewendet wird:

css
@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}

Für weitere Informationen zum Schreiben von Container-Abfragen, siehe die CSS Container Queries Seite.

Verwendung mehrerer Container-Namen

Sie können einem Container-Kontext auch mehrere Namen geben, die durch ein Leerzeichen getrennt sind:

css
.post-meta {
  container-type: inline-size;
  container-name: meta card;
}

Dies ermöglicht es Ihnen, den Container mit einem der Namen in der @container Regel anzusprechen. Dies ist nützlich, wenn Sie denselben Container mit mehreren Container-Abfragen ansprechen möchten, wobei eine der Bedingungen zutreffen könnte:

css
@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}

Spezifikationen

Specification
CSS Conditional Rules Module Level 5
# container-name

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch