@container

<container-condition>

Ein optionaler <container-name> und eine <container-query>. Stile, die im <stylesheet> definiert sind, werden angewendet, wenn die Bedingung erfüllt ist.

<container-name>

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

<container-query>

Eine Menge von Merkmalen, die gegen den Abfragecontainer ausgewertet werden, wenn sich die Größe, <style-feature> oder der Scrollstatus des Containers ändert.

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 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> */
}

Ein Einschlusskontext kann mittels der Eigenschaft container-name benannt werden.

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

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

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

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

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

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

Die <container-condition>-Abfragen umfassen Größe und Scrollstatus-Container-Deskriptoren.

Größen-Container-Deskriptoren

Die <container-condition> kann eine oder mehrere Boolesche Größenabfragen enthalten, jede innerhalb eines Klammerpaars. Eine Größenabfrage umfasst einen Größen-Deskriptor, einen Wert und — abhängig vom Deskriptor — einen Vergleichsoperator. Die Syntax für mehrere Bedingungen ist dieselbe wie für @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 das Verhältnis der Breite zur Höhe des Containers, ausgedrückt als <ratio>-Wert.

block-size

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

height

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

inline-size

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

orientation

Die Orientierung des Containers, entweder landscape oder portrait.

width

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

Scrollstatus-Container-Deskriptoren

Scrollstatus-Container-Deskriptoren werden innerhalb der <container-condition> in einem Klammerpaar nach dem scroll-state-Schlüsselwort 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 Scrollstatus-Container-Deskriptoren umfassen physische und flussrelative Werte:

scrollable

Abfragt, ob der Container in der angegebenen Richtung durch vom Nutzer initiiertes Scrollen, wie durch Ziehen des Scrollbalkens oder eine Trackpad-Geste, gescrollt werden kann. Mit anderen Worten, gibt es überlaufenden Inhalt in der angegebenen Richtung, der gescrollt werden kann? Zulässige scrollable-Werte umfassen folgende Schlüsselwörter:

none

Der Container ist kein Scrollcontainer oder kann anderweitig in keiner Richtung gescrollt werden.

top

Der Container kann zu seinem oberen Rand gescrollt werden.

right

Der Container kann zu seinem rechten Rand gescrollt werden.

bottom

Der Container kann zu seinem unteren Rand gescrollt werden.

left

Der Container kann zu seinem linken Rand gescrollt werden.

x

Der Container kann horizontal zu einem oder beiden seiner linken oder rechten Ränder gescrollt werden.

y

Der Container kann vertikal zu einem oder beiden seiner oberen oder unteren Ränder gescrollt werden.

block-start

Der Container kann zu seinem blockanfang-Rand gescrollt werden.

block-end

Der Container kann zu seinem blockende-Rand gescrollt werden.

inline-start

Der Container kann zu seinem inline-anfang-Rand gescrollt werden.

inline-end

Der Container kann zu seinem inline-ende-Rand gescrollt werden.

block

Der Container kann in seiner Blockrichtung zu einem oder beiden seiner blockanfang- oder blockende-Ränder gescrollt werden.

inline

Der Container kann in seiner Inlinerichtung zu einem oder beiden seiner inline-anfang- und inline-ende-Ränder gescrollt werden.

Wenn der Test bestanden wird, werden die Regeln innerhalb des @container-Blocks auf die Nachkommen des Scrollcontainers angewendet.

Um zu bewerten, ob ein Container scrollbar ist, ohne auf die Richtung zu achten, verwenden Sie den Wert none mit dem not-Operator:

css

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

snapped

Abfragt, ob der Container ein Snap-Ziel eines Scroll-Snap-Container-Vorfahren in der angegebenen Achse ist oder sein wird. Zulässige snapped-Werte umfassen folgende Schlüsselwörter:

none

Der Container ist kein Scroll-Snap-Ziel für seinen Vorfahren-Scrollcontainer. Bei der Implementierung einer snapped: none-Abfrage werden Container, die Snap-Ziele für den Scrollcontainer sind, nicht die @container-Stile angewendet, während Nicht-Snap-Ziele die Stile angewendet bekommen.

x

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

y

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

block

Der Container ist ein Block-Achsen-Scroll-Snap-Ziel für seinen Vorfahren-Scrollcontainer, das heißt, er schnappt zu seinem Vorfahren in der Blockrichtung.

inline

Der Container ist ein Inline-Achsen-Scroll-Snap-Ziel für seinen Vorfahren-Scrollcontainer, das heißt, er schnappt zu seinem Vorfahren in der Inlinerichtung.

both

Der Container ist sowohl ein horizontales als auch ein vertikales Scroll-Snap-Ziel für seinen Vorfahren-Scrollcontainer und schnappt zu seinem Vorfahren in beiden Richtungen. Der Container wird nicht passen, wenn er nur zu seinem Vorfahren entlang der horizontalen oder vertikalen Achse schnappt. Er muss beide sein.

Um einen Container mit einer nicht-none snapped Scroll-Status-Abfrage zu bewerten, muss es sich um einen Container mit einem Scrollcontainer-Vorfahren handeln, der einen scroll-snap-type-Wert ungleich none hat. Eine snapped: none-Abfrage wird auch dann übereinstimmen, wenn kein Scrollcontainer-Vorfahre vorhanden ist.

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

Um zu bewerten, ob ein Container ein Snap-Ziel ist, ohne auf die Richtung zu achten, verwenden Sie den Wert none mit dem not-Operator:

css

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

stuck

Abfragt, ob ein Container mit einem position-Wert von sticky an einer Kante seines scrollbaren Vorfahren-Containers festklebt. Zulässige stuck-Werte umfassen folgende Schlüsselwörter:

none

Der Container ist an keiner Kante seines Behälters festgeklebt. Beachten Sie, dass none-Abfragen auch dann übereinstimmen, wenn der Container kein position: sticky gesetzt hat.

top

Der Container klebt an der oberen Kante seines Behälters.

right

Der Container klebt an der rechten Kante seines Behälters.

bottom

Der Container klebt an der unteren Kante seines Behälters.

left

Der Container klebt an der linken Kante seines Behälters.

block-start

Der Container klebt an der Blockanfang-Kante seines Behälters.

block-end

Der Container klebt an der Blockende-Kante seines Behälters.

inline-start

Der Container klebt an der Inline-Anfangskante seines Behälters.

inline-end

Der Container klebt an der Inline-Endekante seines Behälters.

Um einen Container mit einer nicht-none stuck Scroll-Status-Abfrage zu bewerten, muss position: sticky darauf gesetzt sein und sich in einem Scrollcontainer befinden. Wenn der Test bestanden wird, werden die Regeln innerhalb des @container-Blocks auf die Nachkommen des position: sticky-Containers angewendet.

Es ist möglich, dass zwei Werte aus entgegengesetzten Achsen gleichzeitig übereinstimmen:

css

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

Allerdings werden zwei Werte aus entgegengesetzten Kanten niemals gleichzeitig übereinstimmen:

css

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

Um zu bewerten, ob ein Container feststeckt, ohne auf die Richtung zu achten, verwenden Sie den Wert none mit dem not-Operator:

css

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

@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>                    

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

<scroll-state-query> = 
  not <scroll-state-in-parens>                        |
  <scroll-state-in-parens> [ [ and <scroll-state-in-parens> ]* | [ or <scroll-state-in-parens> ]* ]  |
  <scroll-state-feature>                              

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<style-in-parens> = 
  ( <style-query> )    |
  ( <style-feature> )  |
  <general-enclosed>   

<style-feature> = 
  <style-feature-plain>    |
  <style-feature-boolean>  |
  <style-range>            

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

<style-feature-plain> = 
  <style-feature-name> : <style-feature-value>  

<style-feature-boolean> = 
  <style-feature-name>  

<style-range> = 
  <style-range-value> <mf-comparison> <style-range-value>  |
  <style-range-value> <mf-lt> <style-range-value> <mf-lt> <style-range-value>  |
  <style-range-value> <mf-gt> <style-range-value> <mf-gt> <style-range-value>  

<style-range-value> = 
  <custom-property-name>  |
  <style-feature-value>   

<mf-comparison> = 
  <mf-lt>  |
  <mf-gt>  |
  <mf-eq>  

<mf-lt> = 
  '<' '='?  

<mf-gt> = 
  '>' '='?  

<mf-eq> = 
  '='  

Betrachten Sie das folgende Beispiel eines Kartenkomponenten mit einem Titel und Text:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Ein Container-Kontext kann mit der Eigenschaft container-type erstellt werden, in diesem Fall mit dem Wert inline-size auf der Klasse .post. Anschließend können Sie die @container At-Regel verwenden, um Stile auf das Element mit der Klasse .card in einem Container anzuwenden, der schmaler als 650px ist.

const post = document.querySelector(".post");
const span = document.createElement("span");
span.textContent = `.post width: ${post.clientWidth}px`;
post.parentNode.insertBefore(span, post.nextSibling);
// update on resize
window.addEventListener("resize", () => {
  span.textContent = `.post width: ${post.clientWidth}px`;
});

span {
  display: block;
  text-align: center;
}
.card {
  margin: 10px;
  border: 2px dotted;
  font-size: 1.5em;
}
.post {
  border: 2px solid;
}

/* A container context based on inline size */
.post {
  container-type: inline-size;
}

/* Apply styles if the container is narrower than 650px */
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: lightgray;
    font-size: 1em;
  }
}

Angesichts des folgenden HTML-Beispiels, das eine Kartenkomponente mit einem Titel und Text ist:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Zuerst erstellen Sie einen Container-Kontext mit den Eigenschaften container-type und container-name. Die Kurzsyntax für diese Deklaration wird auf der container-Seite beschrieben.

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

Als nächstes zielen Sie auf diesen Container, indem Sie den Namen zur Container-Abfrage hinzufügen:

@container summary (width >= 400px) {
  .card {
    font-size: 1.5em;
  }
}

Es ist nicht möglich, mehrere Container in einer einzigen Container-Abfrage anzusprechen. Es ist möglich, Container-Abfragen zu verschachteln, was denselben Effekt hat.

Die folgende Abfrage wird zu true ausgewertet und wendet den deklarierten Stil an, wenn der Container namens summary breiter als 400px ist und einen übergeordneten Container hat, der breiter als 800px ist:

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

Container-Abfragen können auch den berechneten Stil des Containerelements auswerten. Eine Container-Stilabfrage ist eine @container-Abfrage, die eine oder mehrere style()-Funktionsnotationen verwendet. Die boolesche Syntax und Logik zum Kombinieren von Stilmerkmalen in einer Stilabfrage ist dieselbe wie für CSS-Feature-Abfragen.

@container style(<style-feature>),
    not style(<style-feature>),
    style(<style-feature>) and style(<style-feature>),
    style(<style-feature>) or style(<style-feature>) {
  /* <stylesheet> */
}

Der Parameter jedes style() ist ein einzelnes <style-feature>. Ein <style-feature> ist eine gültige CSS-Deklaration, eine CSS-Eigenschaft oder ein <custom-property-name>.

@container style(--themeBackground),
    not style(background-color: red),
    style(color: green) and style(background-color: transparent),
    style(--themeColor: blue) or style(--themeColor: purple) {
  /* <stylesheet> */
}

Ein Stilmerkmal ohne Wert wird zu true ausgewertet, wenn der berechnete Wert vom Anfangswert für die gegebene Eigenschaft abweicht.

Wenn das <style-feature>, das als Argument der style()-Funktion übergeben wird, eine Deklaration ist, wird die Stilabfrage zu true ausgewertet, wenn der Wert der Deklaration mit dem berechneten Wert dieser Eigenschaft für den abgefragten Container übereinstimmt. Andernfalls löst es zu false auf.

Die folgende Container-Abfrage überprüft, ob der berechnete Wert des Containerelements --accent-color blue ist:

@container style(--accent-color: blue) {
  /* <stylesheet> */
}

Stilmerkmale, die eine Kurzschreibweise abfragen, sind zutreffend, wenn die berechneten Werte für jede ihrer Langform-Eigenschaften übereinstimmen, und andererseits falsch. Zum Beispiel wird @container style(border: 2px solid red) zu true ausgewertet, wenn alle 12 Langform-Eigenschaften (border-bottom-style, usw.), die diese Kurzschreibweise ausmachen, zutreffend sind.

Die globalen Werte revert und revert-layer sind als Werte in einem <style-feature> ungültig und führen dazu, dass die Container-Stilabfrage zu false wird.

Siehe Verwendung von Container-Scrollstatus-Abfragen für vollständige Anleitungen zu Beispielen von Scrollstatus-Abfragen.

• Verwendung von Container-Abfragen
• Verwendung von Containergrößen- und Stilabfragen
• Verwendung von Container-Scrollstatus-Abfragen
• container-name
• container-type
• contain
• content-visibility
• CSS-Einschlussmodul
• CSS At-Regel-Funktionen