@container

<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 bewertet wird, angegeben als ein <ident>.

<container-query>

Eine Reihe von Funktionen, die bewertet werden, wenn die Größe, <style-feature> oder der Scroll-Zustand des Containers sich ändern.

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 Container-Abfrage ist nur eine not-Bedingung erlaubt und kann nicht mit den and oder or Schlüsselwörtern verwendet werden.

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

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

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

Ein Containment-Kontext kann mithilfe der Eigenschaft container-name benannt werden.

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

Die Kurznotation 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 Eigenschaft container-name verwendet, um den Satz von Containern auf diejenigen mit einem passenden Abfragecontainernamen zu filtern:

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

Details über die Verwendung und Namenseinschränkungen sind auf der container-name-Seite beschrieben.

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

Größen-Container-Deskriptoren

Die <container-condition> kann eine oder mehrere boolesche Größenabfragen enthalten, jede in einem Set von Klammern. Eine Größenabfrage umfasst einen Größen-Deskriptor, einen Wert und – abhängig vom Deskriptor – einen Vergleichsoperator. Die Syntax zur Einbindung mehrerer Bedingungen ist die gleiche wie bei @media Größenfunktions-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 von 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 Orientierung des Containers, entweder landscape oder portrait.

width

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

Scroll-Zustand Container-Deskriptoren

Scroll-Zustand 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-Zustand Container-Deskriptoren beinhalten physikalische und fluss-relative Werte:

scrollable

Fragt ab, ob der Container in die angegebene Richtung durch Benutzer-initiierte Scrollen, wie durch Ziehen der Scrollleiste oder die Verwendung eines Trackpad-Gestus, gescrollt werden kann. Mit anderen Worten: Gibt es überlaufenden Inhalt in der angegebenen Richtung, der gescrollt werden kann? Gültige scrollable Werte beinhalten die folgenden Schlüsselwörter:

none

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

top

Der Container kann nach oben gescrollt werden.

right

Der Container kann nach rechts gescrollt werden.

bottom

Der Container kann nach unten gescrollt werden.

left

Der Container kann nach links gescrollt werden.

x

Der Container kann horizontal zu beiden seiner linken oder rechten Kanten gescrollt werden.

y

Der Container kann vertikal zu beiden seiner oberen oder unteren Kanten gescrollt werden.

block-start

Der Container kann zu seiner Block-Startkante gescrollt werden.

block-end

Der Container kann zu seiner Block-Endkante gescrollt werden.

inline-start

Der Container kann zu seiner Inline-Startkante gescrollt werden.

inline-end

Der Container kann zu seiner Inline-Endkante gescrollt werden.

block

Der Container kann in seiner Blockrichtung zu beiden seiner Block-Startkante oder Block-Endkante gescrollt werden.

inline

Der Container kann in seiner Inlinerichtung zu beiden seiner Inline-Startkante und Inline-Endkante gescrollt werden.

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

Um festzustellen, 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

Fragt ab, ob der Container an einen scroll snap Container-Vorfahren entlang der angegebenen Achse angeknipst wird. Gültige snapped Werte beinhalten die folgenden Schlüsselwörter:

none

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

x

Der Container ist ein horizontaler Scroll-Snap-Target für seinen Vorfahren-Scroll-Container, das bedeutet, er schnappt horizontal zu seinem Vorfahren.

y

Der Container ist ein vertikaler Scroll-Snap-Target für seinen Vorfahren-Scroll-Container, das bedeutet, er schnappt vertikal zu seinem Vorfahren.

block

Der Container ist ein Block-Achsis-Scroll-Snap-Target für seinen Vorfahren-Scroll-Container, das bedeutet, er schnappt zu seinem Vorfahren in der Blockrichtung.

inline

Der Container ist ein Inline-Achsis-Scroll-Snap-Target für seinen Vorfahren-Scroll-Container, das bedeutet, er schnappt zu seinem Vorfahren in der Inlinerichtung.

both

Der Container ist sowohl ein horizontaler als auch vertikaler Scroll-Snap-Target für seinen Vorfahren-Scroll-Container und wird zu seinem Vorfahren in beide Richtungen gesnappt. Der Container wird nicht übereinstimmen, wenn er nur zu seinem Vorfahren entlang der horizontalen oder vertikalen Achse schnappt. Es muss beides sein.

Um einen Container mit einer nicht-none snapped Scroll-Zustands-Abfrage zu bewerten, muss es ein Container mit einem Scroll-Container-Vorfahren sein, der einen scroll-snap-type Wert hat, der nicht none ist. Eine snapped: none-Abfrage wird übereinstimmen, auch wenn es keinen Scroll-Container-Vorfahren gibt.

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

Um festzustellen, ob ein Container ein Snap-Target 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 einer Kante seines Vorfahren-Scroll-Containers "klebt". Gültige 'stuck'-Werte beinhalten die folgenden Schlüsselwörter:

none

Der Container klebt nicht an irgendwelchen Rändern seines Containers. Beachten Sie, dass none-Abfragen übereinstimmen, selbst wenn der Container nicht position: sticky darauf hat.

top

Der Container klebt an der oberen Kante seines Containers.

right

Der Container klebt an der rechten Kante seines Containers.

bottom

Der Container klebt an der unteren Kante seines Containers.

left

Der Container klebt an der linken Kante seines Containers.

block-start

Der Container klebt an der Block-Start-Kante seines Containers.

block-end

Der Container klebt an der Block-End-Kante seines Containers.

inline-start

Der Container klebt an der Inline-Start-Kante seines Containers.

inline-end

Der Container klebt an der Inline-End-Kante seines Containers.

Für die Bewertung eines Containers mit einer nicht-none stuck Scroll-Zustands-Abfrage, muss position: sticky darauf gesetzt sein, und ein Scroll-Container-Vorfahren vorhanden sein. Wenn der Test erfolgreich ist, werden die Regeln innerhalb des @container-Blocks auf Nachfahren des position: 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)) {
  /* … */
}

Allerdings werden zwei Werte von gegenüberliegenden Rändern niemals gleichzeitig übereinstimmen:

css

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

Um festzustellen, ob ein Container "klebt", ohne sich um die Richtung zu kümmern, 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 einer Kartenkomponente mit einem Titel und etwas Text:

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

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

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;
  }
}

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

<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 Kurznotation für diese Deklaration ist auf der container-Seite beschrieben.

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

Als nächstes richten Sie den Container aus, 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, verschachtelte Container-Abfragen zu verwenden, die denselben Effekt haben.

Die folgende Abfrage wird als wahr bewertet und wendet den deklarierten Stil an, wenn der Container mit dem Namen summary breiter ist als 400px und ein Vorfahren-Container breiter ist als 800px:

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

Container-Abfragen können auch den berechneten Stil des Containerelements bewerten. Eine Container-Stilabfrage ist eine @container-Abfrage, die eine oder mehrere style()-Funktionalitäten nutzt. Die boolesche Syntax und Logik, um Stilmerkmale zu einer Stilabfrage zu kombinieren, ist die gleiche 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 jeder 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 als wahr bewertet, wenn der berechnete Wert von dem Anfangswert der gegebenen Eigenschaft abweicht.

Wenn das <style-feature>, das als Argument der style()-Funktion übergeben wird, eine Deklaration ist, wird die Stilabfrage als wahr bewertet, wenn der Wert der Deklaration derselbe ist wie der berechnete Wert dieser Eigenschaft für den abgefragten Container. Andernfalls wird sie als falsch bewertet.

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

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

Stilmerkmale, die eine Kurzschrift-Eigenschaft abfragen, sind wahr, wenn die berechneten Werte für jede ihrer Langschreib-Eigenschaften übereinstimmen, und falsch, andernfalls. Zum Beispiel wird @container style(border: 2px solid red) als wahr bewertet, wenn alle 12 Langschreib-Eigenschaften (border-bottom-style, etc.), die diese Kurzschrift ausmachen, wahr sind.

Die globalen revert und revert-layer sind als Werte in einem <style-feature> ungültig und verursachen, dass die Container-Stilabfrage als falsch bewertet wird.

Sehen Sie Verwendung von Scroll-Zustands-Abfragen für vollständige Durchführungen von Scroll-Zustands-Abfrage-Beispielen.

• Verwendung von Container-Abfragen
• Verwendung von Container-Größen- und Stilabfragen
• Verwendung von Container-Scroll-Zustands-Abfragen
• container-name
• container-type
• contain
• content-visibility
• CSS-Containment-Modul
• CSS-At-Regel-Funktionen