container-name

Syntax

container-name: none;

/* A single name */
container-name: my-layout;

/* Multiple names */
container-name: my-page-layout my-component-library;

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

Werte

none

Standardwert. Der Abfragecontainer hat keinen Namen.

<custom-ident>

Ein groß-/klein-buchstabenunabhängiger String, der zur Identifikation des Containers verwendet wird. Die folgenden Bedingungen gelten:

• Der Name darf nicht or, and, not oder default entsprechen.
• Der Name darf nicht in Anführungszeichen stehen.
• Das mit einem Bindestrich versehene Identifikat, das zur Kennzeichnung benutzerdefinierter Bezeichner vorgesehen ist (z.B. --container-name), ist erlaubt.
• Eine Liste mehrerer durch ein Leerzeichen getrennter Namen ist erlaubt.

Formale Definition

Formale Syntax

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

Beispiele

Verwendung eines Containernamens

Gegeben ist das folgende HTML-Beispiel, ein Kartenelement mit einem Titel und etwas Text:

<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 in 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:

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

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

Eine Containerabfrage über die @container-Regel wird die Stile auf die Elemente des Containers anwenden, wenn die Abfrage als wahr ausgewertet wird. Das folgende Beispiel hat zwei Containerabfragen, eine, die nur auf den Inhalt des .post-excerpt-Elements angewendet wird und eine, die sowohl auf die Inhalte von .post-meta als auch auf .post-excerpt angewendet wird:

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

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

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

Verwendung mehrerer Containernamen

Sie können einem Containerkontext auch mehrere durch ein Leerzeichen getrennte Namen zuweisen:

.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 Containerabfragen ansprechen möchten, bei denen eine der Bedingungen zutreffen könnte:

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS Container Queries
• Verwendung von Containern mit Größen- und Stilabfragen
• Verwendung von Container-Scroll-Zustandsabfragen
• @container-Regel
• CSS container Kurzschreibweise
• CSS container-type Eigenschaft
• CSS content-visibility Eigenschaft