@container

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Februar 2023 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die @container CSS At-Regel ist eine bedingte Gruppenregel, die Stile auf einen Containment-Kontext anwendet. Stil-Deklarationen werden nach einer Bedingung gefiltert und auf den Container angewendet, wenn die Bedingung wahr ist. Die Bedingung wird ausgewertet, wenn sich die abgefragte Containergröße, <style-feature> oder der Scroll-Status ändern.

Die Bedingung muss eine oder beide von container-name und <container-query> spezifizieren.

Die container-name-Eigenschaft gibt eine Liste von Abfragecontainernamen an, die verwendet werden, um zu filtern, welche Container von den @container-Regeln betroffen sind. Die Containerfunktionen in der <container-query> werden gegen die ausgewählten Container ausgewertet. Wenn kein <container-name> angegeben ist, werden die Funktionen der <container-query> gegen den nächstgelegenen übergeordneten Abfragecontainer ausgewertet, der den passenden container-type besitzt. Wenn keine <container-query> angegeben ist, werden benannte Container ausgewählt.

Syntax

css

/* 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 <container-name> only (query is optional) */
@container sidebar {
  h2 {
    background: blue;
  }
}

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

Eine oder beide von <container-name> und <container-query>. Stile im <stylesheet> werden angewendet, wenn die Bedingung true ist.

<container-name> Optional: Der Name des Containers, auf den die Stile angewendet werden, wenn die Abfrage zu true ausgewertet wird, angegeben als <ident>.
<container-query> Optional: Eine Menge von Funktionen, die gegen den Abfragecontainer ausgewertet werden, wenn sich die Größe, <style-feature> oder der Scroll-Status des Containers ändern.

Logische Schlüsselwörter in Containerabfragen

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

css

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

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

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

Benannte Containment-Kontexte

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

css

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

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

css

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

In Containerabfragen wird die container-name-Eigenschaft verwendet, um die Menge der Container auf die mit einem passenden Abfragenamen zu filtern:

css

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

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

Deskriptoren

Die <container-condition>-Abfragen enthalten Größe und Scroll-Status Container-Deskriptoren.

Größen-Container-Deskriptoren

Die <container-condition> kann eine oder mehrere boolesche Größenabfragen enthalten, jeweils in einer Menge von Klammern. Eine Größenabfrage beinhaltet einen Größen-Deskriptor, einen Wert und – je nach Deskriptor – einen Vergleichsoperator. Die Abfragen messen immer die content box als Vergleich. Die Syntax zum Einschließen mehrerer Bedingungen ist dieselbe wie bei @media-Größen-Funktionsabfragen.

css

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

Scroll-State-Container-Deskriptoren

Scroll-State-Container-Deskriptoren werden innerhalb der <container-condition> in einer Klammerfolge angegeben, die dem scroll-state-Schlüsselwort folgt, zum Beispiel:

css

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

Unterstützte Schlüsselwörter für Scroll-State-Container-Deskriptoren beinhalten physical und flow relative Werte.

scrollable

Prüft, ob der Container in der angegebenen Richtung über benutzerinitiierte Scroll-Aktionen gescrollt werden kann, wie z.B. das Ziehen des Scrollbalkens oder die Verwendung einer Trackpad-Geste. Mit anderen Worten, gibt es in der gegebenen Richtung überlaufenden Inhalt, zu dem gescrollt werden kann? Gültige scrollable-Werte umfassen die folgenden Schlüsselwörter:

none: Der Container ist kein Scroll-Container oder kann anderweitig in keiner Richtung gescrollt werden.
top: Der Container kann in Richtung seiner oberen Kante gescrollt werden.
right: Der Container kann in Richtung seiner rechten Kante gescrollt werden.
bottom: Der Container kann in Richtung seiner unteren Kante gescrollt werden.
left: Der Container kann in Richtung seiner linken Kante gescrollt werden.
x: Der Container kann horizontal gescrollt werden, entweder in Richtung seiner linken oder rechten Kanten.
y: Der Container kann vertikal gescrollt werden, entweder in Richtung seiner oberen oder unteren Kanten.
block-start: Der Container kann in Richtung seiner Block-Start-Kante gescrollt werden.
block-end: Der Container kann in Richtung seiner Block-End-Kante gescrollt werden.
inline-start: Der Container kann in Richtung seiner Inline-Start-Kante gescrollt werden.
inline-end: Der Container kann in Richtung seiner Inline-End-Kante gescrollt werden.
block: Der Container kann in seiner Block-Richtung in Richtung seiner Block-Start- oder Block-End-Kanten gescrollt werden.
inline: Der Container kann in seiner Inline-Richtung in Richtung seiner Inline-Start- oder Inline-End-Kanten gescrollt werden.

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

Um zu beurteilen, 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) {
  /* … */
}

scrolled

Überprüft, ob der Container zuletzt in eine bestimmte Richtung gescrollt wurde. Gültige scrolled-Werte umfassen die folgenden Schlüsselwörter:

none: Der Container ist kein Scroll-Container oder wurde anderweitig zuvor in keiner Richtung gescrollt.
top: Der Container wurde zuletzt in Richtung seiner oberen Kante gescrollt.
right: Der Container wurde zuletzt in Richtung seiner rechten Kante gescrollt.
bottom: Der Container wurde zuletzt in Richtung seiner unteren Kante gescrollt.
left: Der Container wurde zuletzt in Richtung seiner linken Kante gescrollt.
x: Der Container wurde zuletzt in Richtung seiner linken oder rechten Kanten gescrollt.
y: Der Container wurde zuletzt in Richtung seiner oberen oder unteren Kanten gescrollt.
block-start: Der Container wurde zuletzt in Richtung seiner Block-Start-Kante gescrollt.
block-end: Der Container wurde zuletzt in Richtung seiner Block-End-Kante gescrollt.
inline-start: Der Container wurde zuletzt in Richtung seiner Inline-Start-Kante gescrollt.
inline-end: Der Container wurde zuletzt in Richtung seiner Inline-End-Kante gescrollt.
block: Der Container wurde zuletzt in Richtung seiner Block-Start- oder Block-End-Kanten gescrollt.
inline: Der Container wurde zuletzt in Richtung seiner Inline-Start- oder Inline-End-Kanten gescrollt.

Wenn der Test wahr ist, werden die Regeln, die im @container-Block verschachtelt sind, auf die Nachkommen des Scroll-Containers angewendet.

Um zu beurteilen, ob ein Container kürzlich gescrollt wurde, ohne sich um die Richtung zu kümmern, verwenden Sie den Wert none mit dem not-Operator:

css

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

snapped

Überprüft, ob der Container an einen Scroll-Snap-Container-Vorfahren entlang der angegebenen Achse verhakt wird. Gültige snapped-Werte umfassen die folgenden Schlüsselwörter:

none: Der Container ist kein Scroll-Snap-Ziel für seinen übergeordneten Scroll-Container. Bei der Implementierung einer snapped: none-Abfrage werden Container, die sind Snap-Ziele für den Scroll-Container, nicht die @container-Stile erhalten, während Nicht-Snap-Ziele die Stile erhalten.
x: Der Container ist ein horizontales Scroll-Snap-Ziel für seinen übergeordneten Scroll-Container, d.h. er hängt horizontal an seinem Vorfahren.
y: Der Container ist ein vertikales Scroll-Snap-Ziel für seinen übergeordneten Scroll-Container, d.h. er hängt vertikal an seinem Vorfahren.
block: Der Container ist ein Block-Achsen-Scroll-Snap-Ziel für seinen übergeordneten Scroll-Container, d.h. er hängt in der Block-Richtung an seinem Vorfahren.
inline: Der Container ist ein Inline-Achsen-Scroll-Snap-Ziel für seinen übergeordneten Scroll-Container, d.h. er hängt in der Inline-Richtung an seinem Vorfahren.
both: Der Container ist sowohl ein horizontales als auch ein vertikales Scroll-Snap-Ziel für seinen übergeordneten Scroll-Container und hängt in beiden Richtungen an seinem Vorfahren. Der Container wird nicht entsprechen, wenn er nur horizontal oder vertikal an seinen Vorfahren hängt. Es muss beides sein.

Um einen Container mit einer nicht-none snapped-Scroll-State-Abfrage zu bewerten, muss es sich um einen Container mit einem übergeordneten Scroll-Container handeln, der einen scroll-snap-type-Wert ungleich none hat. Eine snapped: none-Abfrage wird passen, auch wenn es keinen übergeordneten Scroll-Container gibt.

Auswertungen erfolgen, wenn scrollsnapchanging-Ereignisse im 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 bewerten, 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

Überprüft, ob ein Container mit einem position-Wert von sticky an einer Kante seines Scrolling-Container-Vorfahren festgeklebt ist. Gültige stuck-Werte umfassen die folgenden Schlüsselwörter:

none: Der Container klebt nicht an einer seiner Kanten. Beachten Sie, dass none-Abfragen sogar dann passen, wenn der Container kein position: sticky 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.

Um einen Container mit einer nicht-none stuck-Scroll-State-Abfrage zu bewerten, muss er position: sticky darauf gesetzt haben und in einem Scroll-Container sein. 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 gegenüberliegenden Achsen gleichzeitig übereinstimmen:

css

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

Allerdings werden zwei Werte von gegenüberliegenden Kanten niemals gleichzeitig passen:

css

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

Um zu bewerten, 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) {
  /* … */
}

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>                    

<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> = 
  '='

Beispiele

Setzen von Stilen basierend auf der Größe eines Containers

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

html

<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 Wert inline-size auf der .post-Klasse. Sie können dann die @container-At-Regel verwenden, um Stile auf das Element mit der .card-Klasse 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;
}

css

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

Erstellen benannter Container-Kontexte

Angenommen, folgendes HTML-Beispiel ist eine Komponentenkarte mit einem Titel und etwas Text:

html

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

Erstellen Sie zuerst einen Container-Kontext unter Verwendung der Eigenschaften container-type und container-name. Die Kurzschreibweise für diese Deklaration wird auf der container-Seite beschrieben.

css

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

Zielen Sie anschließend auf diesen Container, indem Sie den Namen zur Container-Abfrage hinzufügen:

css

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

Verschachtelte Container-Abfragen

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

Die folgende Abfrage wird zu wahr ausgewertet und der deklarierte Stil angewendet, wenn der Container namens summary breiter als 400px ist und einen übergeordneten Container hat, der breiter als 800px ist:

css

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

Container-Stil-Abfragen

Container-Abfragen können auch den berechneten Stil des Containerelements auswerten. Eine Container-Stil-Abfrage ist eine @container-Abfrage, die eine oder mehrere style()-Funktionalnotationen verwendet. Die boolesche Syntax und Logik zur Kombination von Stil-Funktionen in eine Stil-Abfrage ist dieselbe wie für CSS-Funktionsabfragen.

css

@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()-Funktion ist ein einzelnes <style-feature>. Ein <style-feature> ist eine gültige CSS-Deklaration, eine CSS-Eigenschaft oder ein <custom-property-name>.

css

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

Eine Stil-Funktion ohne Wert wird als wahr ausgewertet, wenn der berechnete Wert anders ist als der Anfangswert für die gegebene Eigenschaft.

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

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

css

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

Hinweis: Wenn eine benutzerdefinierte Eigenschaft den Wert blue hat, wird der äquivalente Hexadezimalcode #0000ff nicht übereinstimmen, es sei denn, die Eigenschaft wurde als Farbe mit @property definiert, damit der Browser die berechneten Werte ordnungsgemäß vergleichen kann.

Stil-Funktionen, die eine Kurzschreibweise abfragen, sind wahr, wenn die berechneten Werte für jede ihrer Langhand-Eigenschaften übereinstimmen, und falsch, andernfalls. Zum Beispiel wird @container style(border: 2px solid red) wahr, wenn alle 12 Langhand-Eigenschaften (border-bottom-style, etc.), die diese Kurzschreibweise bilden, wahr sind.

Beachten Sie, dass !important in Stil-Abfragen erlaubt ist, jedoch ignoriert wird.

css

/* !important is valid but has no effect */
@container style(--themeColor: purple !important) {
  /* <stylesheet> */
}

Die globalen revert und revert-layer sind als Werte in einem <style-feature> ungültig und führen dazu, dass die Container-Stil-Abfrage als falsch ausgewertet wird.

Scroll-State-Abfragen

Siehe Verwendung von Scroll-State-Container-Abfragen für vollständige Durchgänge von Scroll-State-Abfragebeispielen.

Spezifikationen

Spezifikation
CSS Conditional Rules Module Level 5 # container-rule

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden