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-Eigenschaft von CSS spezifiziert eine Liste von Abfragenamen von Containern, die von der @container Regel in einer Container-Abfrage verwendet wird. Eine Container-Abfrage wendet Stile auf Elemente basierend auf der Größe oder dem Scrollstatus des nächstgelegenen Vorfahren mit einem Containment-Kontext an. Wenn einem Containment-Kontext ein Name zugewiesen wird, kann er speziell mit der @container Regel anvisiert werden, anstatt des nächsten Vorfahren mit Containment.

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>

Ein schriftgrößen-sensitiver String, der zur Identifikation 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.
  • Die mit Bindestrichen versehene Identifikation, die von Autoren definierte Identifikatoren bezeichnen soll (z.B. --container-name), ist erlaubt.
  • Eine Liste von mehreren Namen, getrennt durch ein Leerzeichen, ist erlaubt.

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

Angenommen, das folgende HTML-Beispiel ist eine Kartenkomponente mit einem Titel und etwas Text:

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 container-type-Eigenschaft zu einem Element in CSS hinzu. Das folgende Beispiel erstellt zwei Containment-Kontexte, einen für die Meta-Informationen der Karte 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;
}

Wenn Sie eine Container-Abfrage über die @container Regel schreiben, werden Stile auf die Elemente des Containers angewandt, wenn die Abfrage als wahr ausgewertet wird. Das folgende Beispiel enthält zwei Container-Abfragen, eine, die nur auf den Inhalt des .post-excerpt-Elements angewendet wird, und eine, die sowohl auf die .post-meta- als auch die .post-excerpt-Inhalte angewendet wird:

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

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

Weitere Informationen zum Schreiben von Container-Abfragen finden Sie auf der Seite zu CSS Container-Abfragen.

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 jedem Namen in der @container Regel zu adressieren. Dies ist nützlich, wenn Sie denselben Container mit mehreren Container-Abfragen anvisieren möchten, bei denen entweder Bedingung zutreffen könnte:

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

@container card (width <= 200px) {
  h2 {
    font-size: 1.5em;
  }
}

Spezifikationen

Specification
CSS Conditional Rules Module Level 5
# container-name

Browser-Kompatibilität

Siehe auch