@container

Die @container CSS At-Regel ist eine bedingte Gruppenregel, die Stile auf einen Eingrenzungskontext anwendet. Stil-Deklarationen werden durch eine Bedingung gefiltert und auf den Container angewendet, wenn die Bedingung zutrifft. Die Bedingung wird ausgewertet, wenn sich die abgefragte Containergröße, <style-feature> oder der Scroll-Zustand ändert.

Die container-name-Eigenschaft spezifiziert eine Liste von Abfragecontainernamen. Diese Namen können durch @container-Regeln verwendet werden, um zu filtern, welche Abfragecontainer gezielt werden. Der optionale, groß-/kleinschreibungssensitive <container-name> filtert die Abfragecontainer, die durch die Abfrage gezielt werden.

Sobald ein geeigneter Abfragecontainer für ein Element ausgewählt wurde, wird für jede Containereigenschaft im <container-condition> die Bewertung gegenüber diesem Abfragecontainer durchgeführt.

Syntax

/* With a <size-query> */
@container (width > 400px) {
 h2 {
 font-size: 1.5em;
 }
}
/* With an optional <container-name> */
@container tall (height > 30rem) {
 p {
 line-height: 1.6;
 }
}
/* With a <scroll-state> */
@container scroll-state(scrollable: top) {
 .back-to-top-link {
 visibility: visible;
 }
}
/* With a <container-name> and a <scroll-state> */
@container sticky-heading scroll-state(stuck: top) {
 h2 {
 background: purple;
 color: white;
 }
}
/* Multiple queries in a single condition */
@container (width > 400px) and style(--responsive: true) {
 h2 {
 font-size: 1.5em;
 }
}
/* Condition list */
@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
 h2 {
 font-size: 1.5em;
 }
}

Parameter

<container-condition>

Ein optionaler <container-name> und ein <container-query>. Stile, die im <stylesheet> definiert sind, werden angewendet, wenn die Bedingung zutrifft.

<container-name>

Optional. Der Name des Containers, auf den die Stile angewendet werden, wenn die Abfrage zu wahr ausgewertet wird, angegeben als ein <ident>.

<container-query>

Ein Satz von Merkmalen, die bei einer Änderung der Größe, des <style-feature> oder des Scroll-Zustandes des Containers gegenüber dem Abfragecontainer bewertet werden.

Logische Schlüsselwörter in Container-Abfragen

Logische Schlüsselwörter können verwendet werden, um die Container-Bedingung zu definieren:

• and kombiniert zwei oder mehr Bedingungen.
• or kombiniert zwei oder mehr Bedingungen.
• not negiert die Bedingung. Nur eine 'not'-Bedingung ist pro Container-Abfrage erlaubt und kann nicht mit den Schlüsselwörtern and oder or verwendet werden.

@container (width > 400px) and (height > 400px) {
 /* <stylesheet> */
}
@container (width > 400px) or (height > 400px) {
 /* <stylesheet> */
}
@container not (width < 400px) {
 /* <stylesheet> */
}

Benannte Eingrenzungskontexte

Ein Eingrenzungskontext kann mit der container-name-Eigenschaft benannt werden.

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

Die Kurzschreibweise hierfür ist die Verwendung von container in der Form container: <name> / <type>, zum Beispiel:

.post {
 container: sidebar / inline-size;
}

In Container-Abfragen wird die container-name-Eigenschaft verwendet, um den Satz von Containern auf diejenigen mit einem passenden Abfragecontainernamen zu filtern:

@container sidebar (width > 400px) {
 /* <stylesheet> */
}

Details zur Verwendung und zu Namensbeschränkungen sind auf der Seite container-name beschrieben.

Deskriptoren

Die <container-condition>-Abfragen beinhalten Größen und Scroll-Zustands-Container-Deskriptoren.

Größen-Container-Deskriptoren

Die <container-condition> kann eine oder mehrere boolesche Größenzabfragen enthalten, jede innerhalb eines Satzes von Klammern. Eine Größenzabfrage beinhaltet einen Größen-Deskriptor, einen Wert und – je nach Deskriptor – einen Vergleichsoperator. Die Abfragen messen immer die Content-Box als Vergleich. Die Syntax für die Einbeziehung mehrerer Bedingungen ist die gleiche wie bei @media-Größenmerkmal-Abfragen.

@container (min-width: 400px) {
 /* ... */
}
@container (orientation: landscape) and (width > 400px) {
 /* ... */
}
@container (15em <= block-size <= 30em) {
 /* ... */
}

aspect-ratio

Das aspect-ratio des Containers berechnet als Breite zu Höhe des Containers, ausgedrückt als ein <ratio>-Wert.

block-size

Die block-size des Containers, ausgedrückt als ein <length>-Wert.

height

Die Höhe des Containers, ausgedrückt als ein <length>-Wert.

inline-size

Die inline-size des Containers, ausgedrückt als ein <length>-Wert.

orientation

Die Ausrichtung des Containers, entweder landscape oder portrait.

width

Die Breite des Containers, ausgedrückt als ein <length>-Wert.

Scroll-Zustands-Container-Deskriptoren

Scroll-Zustands-Container-Deskriptoren werden innerhalb der <container-condition> in einem Satz von Klammern nach dem Schlüsselwort scroll-state angegeben, zum Beispiel:

@container scroll-state(scrollable: top) {
 /* ... */
}
@container scroll-state(stuck: inline-end) {
 /* ... */
}
@container scroll-state(snapped: both) {
 /* ... */
}

Unterstützte Schlüsselwörter für Scroll-Zustands-Container-Deskriptoren beinhalten physische und flussrelative Werte

scrollable

Fragt ab, ob der Container in die angegebene Richtung durch benutzerinitiierte Scrollvorgänge, wie durch Ziehen des Scrollbalkens oder durch Nutzung einer Trackpad-Geste, gescrollt werden kann. Mit anderen Worten, gibt es in die gewünschte Richtung überlaufenden Inhalt, der gescrollt werden kann? Gültige scrollable-Werte beinhalten die folgenden Schlüsselwörter:

none

Der Container ist kein Scroll-Container oder kann auch nicht in irgendeine Richtung gescrollt werden.

top

Der Container kann in Richtung seines oberen Randes gescrollt werden.

right

Der Container kann in Richtung seines rechten Randes gescrollt werden.

bottom

Der Container kann in Richtung seines unteren Randes gescrollt werden.

left

Der Container kann in Richtung seines linken Randes gescrollt werden.

x

Der Container kann horizontal in Richtung entweder seines linken oder rechten Randes gescrollt werden.

y

Der Container kann vertikal in Richtung entweder seines oberen oder unteren Randes gescrollt werden.

block-start

Der Container kann in Richtung seines block-start Randes gescrollt werden.

block-end

Der Container kann in Richtung seines block-end Randes gescrollt werden.

inline-start

Der Container kann in Richtung seines inline-start Randes gescrollt werden.

inline-end

Der Container kann in Richtung seines inline-end Randes gescrollt werden.

block

Der Container kann in seiner Block-Richtung entweder in Richtung seines block-start oder block-end Randes gescrollt werden.

inline

Der Container kann in seiner Inline-Richtung entweder in Richtung seines inline-start oder inline-end Randes gescrollt werden.

Falls der Test erfolgreich ist, werden die Regeln innerhalb des @container-Blocks auf die Nachkommen des Scroll-Containers angewendet.

Um zu evaluieren, ob ein Container scrollfähig ist, ohne sich um die Richtung zu kümmern, verwenden Sie den Wert none mit dem not-Operator:

css

@container not scroll-state(scrollable: none) {
 /* ... */
}

snapped

Fragt ab, ob der Container an ein Scroll-Snap-Container-Vorfahr entlang der angegebenen Achse angezogen wird. Gültige snapped-Werte umfassen die folgenden Schlüsselwörter:

none

Der Container ist kein Scroll-Snap-Ziel für seinen Vorfahr-Scroll-Container. Beim Implementieren einer snapped: none-Abfrage werden Container, die Snap-Ziele für den Scroll-Container sind, die @container-Stile nicht anwenden, während Nicht-Snap-Ziele die Stile anwenden.

x

Der Container ist ein horizontales Scroll-Snap-Ziel für seinen Vorfahr-Scroll-Container, das heißt, er snappt horizontal zu seinem Vorfahren.

y

Der Container ist ein vertikales Scroll-Snap-Ziel für seinen Vorfahr-Scroll-Container, das heißt, er snappt vertikal zu seinem Vorfahren.

block

Der Container ist ein Blockachsen-Scroll-Snap-Ziel für seinen Vorfahr-Scroll-Container, das heißt, er snappt zu seinem Vorfahren in Blockrichtung.

inline

Der Container ist ein Inlineachsen-Scroll-Snap-Ziel für seinen Vorfahr-Scroll-Container, das heißt, er snappt zu seinem Vorfahren in Inlinerichtung.

both

Der Container ist sowohl ein horizontales als auch ein vertikales Scroll-Snap-Ziel für seinen Vorfahr-Scroll-Container und snappt zu seinem Vorfahren in beiden Richtungen. Der Container passt nicht, wenn er nur zu seinem Vorfahren entlang der horizontalen oder vertikalen Achse snappt. Es muss beides sein.

Um einen Container mit einer nicht-none snapped-Scroll-Zustandsabfrage zu evaluieren, muss es ein Container mit einem Scroll-Container-Vorfahr sein, der einen scroll-snap-type-Wert außer none aufweist. Eine snapped: none-Abfrage passt sogar, wenn es keinen Scroll-Container-Vorfahr gibt.

Bewertungen erfolgen, wenn scrollsnapchanging-Ereignisse auf dem Scroll-Snap-Container ausgelöst werden. Wenn der Test erfolgreich ist, werden die Regeln innerhalb des @container-Blocks auf die Nachkommen des Containers angewendet.

Um zu evaluieren, ob ein Container ein Snap-Ziel ist, ohne sich um die Richtung zu kümmern, verwenden Sie den Wert none mit dem not-Operator:

css

@container not scroll-state(snapped: none) {
 /* ... */
}

stuck

Fragt ab, ob ein Container mit einem position-Wert von sticky an einen Rand seines scrollenden Container-Vorfahrens fixiert ist. Gültige stuck-Werte umfassen die folgenden Schlüsselwörter:

none

Der Container ist an keinen Rändern seines Containers fixiert. Beachten Sie, dass none-Abfragen auch übereinstimmen, wenn der Container nicht position: sticky darauf gesetzt hat.

top

Der Container ist an den oberen Rand seines Containers fixiert.

right

Der Container ist an den rechten Rand seines Containers fixiert.

bottom

Der Container ist an den unteren Rand seines Containers fixiert.

left

Der Container ist an den linken Rand seines Containers fixiert.

block-start

Der Container ist an den block-start Rand seines Containers fixiert.

block-end

Der Container ist an den block-end Rand seines Containers fixiert.

inline-start

Der Container ist an den inline-start Rand seines Containers fixiert.

inline-end

Der Container ist an den inline-end Rand seines Containers fixiert.

Um einen Container mit einer nicht-none stuck Scroll-Zustandsabfrage zu evaluieren, muss es position: sticky gesetzt haben und sich in einem Scroll-Container befinden. Wenn der Test erfolgreich ist, werden die Regeln innerhalb des @container-Blocks auf die Nachkommen des position: sticky-Containers angewendet.

Es ist möglich, dass zwei Werte von entgegengesetzten Achsen zur gleichen Zeit übereinstimmen:

css

@container scroll-state((stuck: top) and (stuck: left)) {
 /* ... */
}

Allerdings werden zwei Werte von entgegengesetzten Rändern nie zur gleichen Zeit übereinstimmen:

css

@container scroll-state((stuck: left) and (stuck: right)) {
 /* ... */
}

Um zu evaluieren, ob ein Container fixiert ist, ohne sich um die Richtung zu kümmern, verwenden Sie den Wert none mit dem not-Operator:

css

@container not scroll-state(stuck: none) {
 /* ... */
}

Formale Syntax

@container = 
 @container <container-condition># { <block-contents> } 

<container-condition> = 
 [ <container-name>? <container-query>? ]! 

<container-name> = 
 <custom-ident> 

<container-query> = 
 not <query-in-parens> | 
 <query-in-parens> [ [ and <query-in-parens> ] * | [ or <query-in-parens> ] * ] 

<query-in-parens> = 
 ( <container-query> ) | 
 ( <size-feature> ) | 
 style( <style-query> ) | 
 scroll-state( <scroll-state-query> ) | 
 <general-enclosed> 


 
Siehe auch 
 

Verwenden von Container-Abfragen 
Verwenden von Containergrößen- und Stilabfragen 
Verwenden von Container-Scroll-Zustands-Abfragen 
container-name 
container-type 
contain 
content-visibility 
CSS-Eingrenzungsmodul 
CSS At-Regel-Funktionen