@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 Einschlusskontext anwendet. Stil-Deklarationen werden durch eine Bedingung gefiltert und auf die Elemente im Container angewendet, wenn die Bedingung wahr ist. Die Bedingung wird ausgewertet, wenn sich die abgefragte Containergröße, <style-feature> oder der Scroll-Status ändert.

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

Die container-name Eigenschaft gibt eine Liste von Containerabfrage-Namen an, die verwendet werden, um zu filtern, welche Container durch die @container Regeln angesprochen werden. Die Container-Features im <container-query> werden gegen die ausgewählten Container ausgewertet. Wenn kein <container-name> angegeben ist, werden die Features des <container-query> gegen den nächsten übergeordneten Container ausgewertet, der den passenden container-type hat. Wenn kein <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 an anchored query */
@container anchored(fallback: bottom) {
  .infobox::before {
    content: "▲";
    bottom: 100%;
    top: auto;
  }
}

/* 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, die im <stylesheet> definiert sind, werden angewendet, wenn die Bedingung true ist.

<container-name> Optional: Der Name des Containers, der abgefragt werden soll; er wird als <ident> angegeben. Wenn die Abfrage zu true ausgewertet wird, werden die deklarierten Stile auf die Nachfolgerelemente des Containers angewendet.
<container-query> Optional: Eine Reihe von Features, die gegen den Abfrage-Container ausgewertet werden, wenn sich die Größe, <style-feature>, der Scroll-Status oder der angewendete Positionsversuch-Fallback des Containers ändert.

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 Einschlusskontexte

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

css

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

Die Kurzsyntax hierfü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 diejenigen mit einem passenden Containerabfragenamen zu filtern:

css

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

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

Deskriptoren

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

Größe der Container-Deskriptoren

Die <container-condition> kann eine oder mehrere boolesche Größenabfragen enthalten, jede in einem Satz von Klammern. Eine Größenabfrage enthält einen Größen-Deskriptor, einen Wert und abhängig vom Deskriptor einen Vergleichsoperator. Die Abfragen messen immer die Inhaltsbox als Vergleich. Die Syntax zum Einschluss mehrerer Bedingungen ist die gleiche wie für @media Größen-Feature-Abfragen.

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 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 Ausrichtung des Containers, entweder landscape oder portrait.
width: Die Breite des Containers, ausgedrückt als <length> Wert.

Scroll-Status der Container-Deskriptoren

Scroll-Status Container-Deskriptoren werden innerhalb der <container-condition> als Argument für die scroll-state() Funktion spezifiziert, 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 die Scroll-Status Container-Deskriptoren umfassen physische und fluss-relative Werte.

scrollable

Fragt ab, ob der Container in die angegebene Richtung durch benutzerinitiiertes Scrollen, wie durch Ziehen der Bildlaufleiste oder mit einer Trackpad-Geste, gescrollt werden kann. Mit anderen Worten, gibt es in die angegebene Richtung überfließenden Inhalt, der gescrollt werden kann? Gültige scrollable Werte umfassen 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 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 in Richtung seiner linken oder rechten Kanten gescrollt werden.
y: Der Container kann vertikal in Richtung seiner oberen oder unteren Kanten gescrollt werden.
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-Kante gescrollt werden.
inline: Der Container kann in seiner Inline-Richtung in Richtung seiner Inline-Start- oder Inline-End-Kante gescrollt werden.

Wenn der Test besteht, werden die Regeln innerhalb des @container Blocks auf Nachfolger des Scroll-Containers angewendet.

Um zu bewerten, ob ein Container scrollbar 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

Fragt ab, 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 nicht in irgendeine 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-Kante gescrollt.
inline: Der Container wurde zuletzt in Richtung seiner Inline-Start- oder Inline-End-Kante gescrollt.

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

Um zu bewerten, 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

Fragt ab, ob der Container zu einem Scroll Snap Container-Vorfahren entlang der angegebenen Achse eingerastet wird. Gültige snapped Werte umfassen die folgenden Schlüsselwörter:

none: Der Container ist kein Scroll Snap Ziel für seinen Vorfahren-Scroll-Container. Bei der Implementierung einer snapped: none Abfrage werden Container, die Snap-Ziele für den Scroll-Container sind, die @container Stile nicht erhalten, während Nicht-Snap-Ziele die Stile erhalten.
x: Der Container ist ein horizontales Scroll-Snap-Ziel für seinen Vorfahren-Scroll-Container, d.h. er rastet horizontal zu seinem Vorfahren ein.
y: Der Container ist ein vertikales Scroll-Snap-Ziel für seinen Vorfahren-Scroll-Container, d.h. er rastet vertikal zu seinem Vorfahren ein.
block: Der Container ist ein Block-Achsen-Scroll-Snap-Ziel für seinen Vorfahren-Scroll-Container, d.h. er rastet in seiner Block-Richtung zu seinem Vorfahren ein.
inline: Der Container ist ein Inline-Achsen-Scroll-Snap-Ziel für seinen Vorfahren-Scroll-Container, d.h. er rastet in seiner Inline-Richtung zu seinem Vorfahren ein.
both: Der Container ist sowohl ein horizontales als auch ein vertikales Scroll-Snap-Ziel für seinen Vorfahren-Scroll-Container und rastet in beide Richtungen zu seinem Vorfahren ein. Der Container passt nicht, wenn er nur entlang der horizontalen oder vertikalen Achse zu seinem Vorfahren einrastet. Er muss beides sein.

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

Auswertungen erfolgen, wenn scrollsnapchanging Ereignisse im Scroll-Snap-Container ausgelöst werden. Wenn der Test besteht, werden die Regeln innerhalb des @container Blocks auf Nachfolger 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

Fragt ab, ob ein Container mit einem position Wert von sticky an einer Kante seines rollenden Container-Vorfahren haftet. Gültige stuck Werte umfassen die folgenden Schlüsselwörter:

none: Der Container haftet an keiner Kante seines Containers. Beachten Sie, dass none Abfragen übereinstimmen, selbst wenn der Container position: sticky nicht auf ihn gesetzt hat.
top: Der Container haftet an der oberen Kante seines Containers.
right: Der Container haftet an der rechten Kante seines Containers.
bottom: Der Container haftet an der unteren Kante seines Containers.
left: Der Container haftet an der linken Kante seines Containers.
block-start: Der Container haftet an der Block-Start-Kante seines Containers.
block-end: Der Container haftet an der Block-End-Kante seines Containers.
inline-start: Der Container haftet an der Inline-Start-Kante seines Containers.
inline-end: Der Container haftet an der Inline-End-Kante seines Containers.

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

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

css

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

Zwei Werte von gegenüberliegenden Kanten werden jedoch niemals gleichzeitig übereinstimmen:

css

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

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

css

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

Verankerte Container-Deskriptoren

Verankerte Container-Deskriptoren werden innerhalb der <container-condition> als Argument für die anchored() Funktion spezifiziert, zum Beispiel:

css

@container anchored(fallback: top) {
  /* … */
}
@container anchored(fallback: flip-block flip-inline) {
  /* … */
}
@container anchored(fallback: --custom-fallback) {
  /* … */
}

fallback

Fragt ab, ob ein bestimmter Positionsversuch-Fallback aktuell auf einem ankerpositionierten Container aktiv ist, wie in der position-try-fallbacks Eigenschaft angegeben. Gültige fallback Werte umfassen alle Komponentenwerte, die für die Einbindung in einen position-try-fallbacks Eigenschaftswert gültig sind.

Wenn der fallback Wert, der im Test benannt ist, aktuell auf dem ankerpositionierten Container aktiv ist, besteht der Test, und die Regeln innerhalb des @container Blocks werden auf die Nachfolger des ankerpositionierten Containers angewendet.

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

Stile basierend auf der Größe eines Containers festlegen

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 Containerkontext kann mit der container-type Eigenschaft erstellt werden, in diesem Fall unter Verwendung des inline-size Werts 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;
  }
}

Erstellung benannter Containerkontexte

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

html

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

Erstellen Sie zuerst einen Containerkontext mit den container-type und container-name Eigenschaften. Die Kurzsyntax für diese Deklaration wird auf der container Seite beschrieben.

css

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

Zielen Sie als nächstes diesen Container ab, indem Sie den Namen zur Containerabfrage hinzufügen:

css

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

Verschachtelte Containerabfragen

Es ist nicht möglich, mehrere Container in einer einzigen Containerabfrage anzusprechen. Es ist jedoch möglich, Containerabfragen zu verschachteln, was denselben Effekt hat.

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

css

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

Containerstil-Abfragen

Containerabfragen können auch den berechneten Stil des Containerelements auswerten. Eine Containerstil-Abfrage ist eine @container Abfrage, die eine oder mehrere style() funktionale Notationen verwendet. Die boolesche Syntax und Logik, die Stil-Features zu einer Stil-Abfrage kombiniert, ist dieselbe wie für CSS-Feature-Abfragen.

css

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

Das Parameter von jedem style() 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> */
}

Ein Stil-Feature ohne Wert wird zu wahr 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 Stil-Abfrage zu wahr ausgewertet, wenn der Wert der Deklaration mit dem berechneten Wert dieser Eigenschaft für den abgefragten Container übereinstimmt. Andernfalls wird sie zu falsch ausgewertet.

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

css

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

Hinweis: Wenn eine benutzerdefinierte Eigenschaft den Wert blau hat, wird der äquivalente hexadezimale Code #0000ff nicht übereinstimmen, es sei denn, die Eigenschaft wurde als Farbe mit @property definiert, sodass der Browser die berechneten Werte richtig vergleichen kann.

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

Beachten Sie, dass !important in Stilabfragen erlaubt ist, aber 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 Containerstil-Abfrage zu falsch wird.

Spezifikation
CSS Conditional Rules Module Level 5 # container-type
CSS Anchor Positioning Module Level 2 # container-rule-anchored

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