Die@containerCSSAt-Regel ist eine bedingte Gruppenregel, die Stile auf einenKapselungskontext anwendet. Stilzuweisungen werden durch eine Bedingung gefiltert und auf den Container angewendet, wenn die Bedingung erfüllt ist. Die Bedingung wird ausgewertet, wenn sich die abgefragte Containergröße,<style-feature> oder der Scroll-Zustand ändert.

Diecontainer-name Eigenschaft spezifiziert eine Liste von Abfragecontainernamen. Diese Namen können von@container Regeln verwendet werden, um zu filtern, welche Abfragecontainer gezielt werden. Der optionale, case-sensitive<container-name> filtert die Abfragecontainer, die von der Abfrage gezielt werden.

Sobald ein geeigneter Abfragecontainer für ein Element ausgewählt wurde, wird jedes Container-Feature im<container-condition> gegen diesen Abfragecontainer ausgewertet.

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 wahr ist.

<container-name>

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

<container-query>

Ein Satz von Features, die gegen den Abfragecontainer ausgewertet werden, wenn sich die Größe,<style-feature> oder der Scroll-Zustand des Containers ändert.

Logische Schlüsselwörter in Container-Abfragen

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

• and kombiniert zwei oder mehr Bedingungen.
• or kombiniert zwei oder mehr Bedingungen.
• not negiert die Bedingung. Pro Containerabfrage ist nur eine 'not'-Bedingung zulässig und kann nicht mit den Schlüsselwörternand oderor verwendet werden.

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

Benannte Kapselungskontexte

Ein Kapselungskontext kann mit dercontainer-name Eigenschaft benannt werden.

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

Die Kurzschreibweise hierfür ist die Verwendung voncontainer in der Formcontainer: <name> / <type>, beispielsweise:

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

In Container-Abfragen wird diecontainer-name Eigenschaft verwendet, um die Menge der Container auf diejenigen mit einem passenden Abfragecontainernamen zu filtern:

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

Details über die Verwendung und Benennungseinschränkungen sind auf dercontainer-name Seite beschrieben.

Deskriptoren

Die<container-condition> Abfragen beinhaltenGrößen undScroll-Zustands Containier-Deskriptoren.

Größen-Container-Deskriptoren

Die<container-condition> kann eine oder mehrere boolesche Größenabfragen enthalten, jede innerhalb eines Klammernpaares. Eine Größenabfrage beinhaltet einen Größen-Deskriptor, einen Wert und - abhängig vom Deskriptor - einen Vergleichsoperator. Die Abfragen messen immer dasInhaltsfeld als Vergleichsmaßstab. Die Syntax zum Einbinden mehrerer Bedingungen ist die gleiche wie für@media Größen-Feature-Abfragen.

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

aspect-ratio

Dasaspect-ratio des Containers, berechnet als Verhältnis der Breite zur Höhe des Containers, ausgedrückt als<ratio> Wert.

block-size

Dieblock-size des Containers, ausgedrückt als<length> Wert.

height

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

inline-size

Dieinline-size des Containers, ausgedrückt als<length> Wert.

orientation

DieAusrichtung des Containers, entwederlandscape oderportrait.

width

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

Scroll-Zustands-Container-Deskriptoren

Scroll-Zustands-Container-Deskriptoren werden innerhalb der<container-condition> in einem Klammernpaar nach dem Schlüsselwortscroll-state angegeben, beispielsweise:

@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 umfassen physische undflussrelative Werte

scrollable

Fragt ab, ob der Container in die angegebene Richtung durch benutzerausgelöstes Scrollen, wie z.B. durch Ziehen des Bildlaufleiste oder Verwenden einer Trackpad-Geste, gescrollt werden kann. Anders ausgedrückt, gibt es überlaufenden Inhalt in der angegebenen Richtung, zu dem gescrollt werden kann? Gültigescrollable Werte umfassen die folgenden Schlüsselwörter:

none

Der Container ist keinBlättercontainer oder kann auf keine Weise gescrollt werden.

top

Der Container kann zum oberen Rand gescrollt werden.

right

Der Container kann zum rechten Rand gescrollt werden.

bottom

Der Container kann zum unteren Rand gescrollt werden.

left

Der Container kann zum linken Rand gescrollt werden.

x

Der Container kann horizontal zu seinen linken und/oder rechten Rändern gescrollt werden.

y

Der Container kann vertikal zu seinen oberen und/oder unteren Rändern gescrollt werden.

block-start

Der Container kann zum Block-Start-Rand gescrollt werden.

block-end

Der Container kann zum Block-End-Rand gescrollt werden.

inline-start

Der Container kann zum Inline-Start-Rand gescrollt werden.

inline-end

Der Container kann zum Inline-End-Rand gescrollt werden.

block

Der Container kann in seiner Blockrichtung zu seinen Block-Start-oder Block-End-Rändern gescrollt werden.

inline

Der Container kann in seiner Inlinerichtung zu seinen Inline-Start- und/oder Inline-End-Rändern gescrollt werden.

Wenn der Test besteht, werden die Regeln innerhalb des@container Blocks auf Nachkommen des Blättercontainers angewendet.

Um zu evaluieren, ob ein Container blätterbar ist, ohne sich um die Richtung zu kümmern, verwenden Sie dennone Wert mit demnot Operator:

css

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

snapped

Fragt ab, ob der Container an einemScroll-Snap Container-Vorfahren entlang der angegebenen Achse anhaften wird. Gültigesnapped Werte umfassen die folgenden Schlüsselwörter:

none

Der Container ist kein Scroll-Snap-Ziel für seinen Vorfahren Blättercontainer. Bei der Implementierung einersnapped: none Abfrage werden Container, die Snap-Ziele für den Blättercontainer sind, die@container Stilenicht angewendet haben, während Container, die keine Snap-Ziele sind, die Stilehaben.

x

Der Container ist ein horizontales Scroll-Snap-Ziel für seinen Vorfahren Blättercontainer, das heißt, er rastet horizontal an seinem Vorfahren ein.

y

Der Container ist ein vertikales Scroll-Snap-Ziel für seinen Vorfahren Blättercontainer, das heißt, er rastet vertikal an seinem Vorfahren ein.

block

Der Container ist ein Block-Achsenscroll-Snap-Ziel für seinen Vorfahren Blättercontainer, das heißt, er rastet in der Blockrichtung bei seinem Vorfahren ein.

inline

Der Container ist ein Inline-Achsenscroll-Snap-Ziel für seinen Vorfahren Blättercontainer, das heißt, er rastet in der Inlinerichtung bei seinem Vorfahren ein.

both

Der Container ist sowohl ein horizontales als auch vertikales Scroll-Snap-Ziel für seinen Vorfahren Blättercontainer und rastet an seinem Vorfahren in beiden Richtungen ein. Der Container wird nicht übereinstimmen, wenn er nur entlang der horizontalenoder vertikalen Achse an seinem Vorfahren einrastet. Es muss beides sein.

Um einen Container mit einersnapped Scroll-Zustandsabfrage zu evaluieren, die nichtnone ist, muss es sich um einen Container mit einem Blättercontainer-Vorfahren handeln, der einenscroll-snap-type Wert ungleichnone hat. Einesnapped: none Abfrage wird auch dann übereinstimmen, wenn es keinen Blättercontainer-Vorfahren gibt.

Auswertungen treten auf, wennscrollsnapchanging Ereignisse auf dem Scroll-Snap-Container ausgelöst werden. Wenn der Test besteht, werden die Regeln innerhalb des@container Blocks auf Nachkommen des Containers angewendet.

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

css

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

stuck

Fragt ab, ob ein Container mit einemposition Wert vonsticky an einer Kante seines scrollenden Container-Vorfahren festklebt. Gültigestuck Werte umfassen die folgenden Schlüsselwörter:

none

Der Container ist an keiner Kante seines Containers festgeklebt. Beachten Sie, dassnone Abfragen auch dann übereinstimmen, wenn der Container nichtposition: sticky darauf gesetzt hat.

top

Der Container ist an der oberen Kante seines Containers festgeklebt.

right

Der Container ist an der rechten Kante seines Containers festgeklebt.

bottom

Der Container ist an der unteren Kante seines Containers festgeklebt.

left

Der Container ist an der linken Kante seines Containers festgeklebt.

block-start

Der Container ist an der Block-Start-Kante seines Containers festgeklebt.

block-end

Der Container ist an der Block-End-Kante seines Containers festgeklebt.

inline-start

Der Container ist an der Inline-Start-Kante seines Containers festgeklebt.

inline-end

Der Container ist an der Inline-End-Kante seines Containers festgeklebt.

Um einen Container mit einerstuck Scroll-Zustandsabfrage zu evaluieren, die nichtnone ist, mussposition: sticky darauf gesetzt sein und innerhalb eines Blättercontainers sein. Wenn der Test besteht, werden die Regeln innerhalb des@container Blocks auf Nachkommen desposition: sticky Containers angewendet.

Es ist möglich, dass zwei Werte von gegenüberliegenden Achsen gleichzeitig übereinstimmen:

css

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

Jedoch werden zwei Werte von gegenüberliegenden Kanten niemals gleichzeitig übereinstimmen:

css

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

Um zu evaluieren, ob ein Container festklebt, ohne sich um die Richtung zu kümmern, verwenden Sie dennone Wert mit demnot 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
Verwendung von Container-Abfragen
Verwendung von Containergrößen- und Stil-Abfragen
Verwendung von Container-Scrollzustands-Abfragen
container-name
container-type
contain
content-visibility
CSS Kapselungsmodul
CSS At-Regel-Funktionen