@container

Die @container At-Regel hat die folgende Syntax:

@container <container-condition># {
  <stylesheet>
}

Zum Beispiel:

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

/* with an optional <container-name> */
@container tall (height > 30rem) {
  h2 {
    line-height: 1.6;
  }
}

/* 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) {
  h2 {
    font-size: 1.5em;
  }
}

<container-condition>

Ein optionaler <container-name> und eine <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>

Eine Anzahl von Features, die gegen den Abfrage-Container ausgewertet werden, wenn sich die Größe des Containers ändert.

<stylesheet>

Eine Anzahl von CSS-Deklarationen.

Logische Schlüsselwörter können verwendet werden, um die Container-Bedingung 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 mit der container-name Eigenschaft benannt werden.

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

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

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

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

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

Die folgenden Deskriptoren können innerhalb der Container-Bedingung verwendet werden:

aspect-ratio

Das aspect-ratio des Containers, berechnet als 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.

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

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

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

Betrachten Sie das folgende Beispiel eines Kartenkomponenten 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 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;
}

/* 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: gray;
    font-size: 1em;
  }
}

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

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

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

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

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

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

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 als 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:

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

Container-Abfragen können auch den berechneten Stil des Container-Elements bewerten. Eine Container-Stil-Abfrage ist eine @container Abfrage, die eine oder mehrere style() funktionale Notationen verwendet. Die boolesche Syntax und Logik zur Kombination von Stil-Features in eine Stil-Abfrage 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 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 Stil-Feature ohne Wert wird als wahr ausgewertet, wenn der berechnete Wert von dem initialen Wert der gegebenen Eigenschaft abweicht.

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

Die folgende Container-Abfrage überprüft, ob der computed_value des Container-Elements --accent-color blue ist:

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

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

Die globalen revert und revert-layer sind als Werte in einem <style-feature> ungültig und verursachen, dass die Container-Stil-Abfrage auf false gesetzt wird.

• Verwendung von Container-Abfragen
• Verwendung von Container-Größen- und Stil-Abfragen
• container-name
• container-type
• contain
• content-visibility
• CSS-Containment-Modul