container-type
Baseline 2023 *Newly available
Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Ein Element kann mit der container-type
CSS-Eigenschaft als Anfrage-Container festgelegt werden. container-type
wird verwendet, um den Typ des Container-Kontexts zu definieren, der in einer Container-Abfrage verwendet wird. Die verfügbaren Container-Kontexte sind:
- Größe: Ermöglicht das selektive Anwenden von CSS-Regeln auf die Kinder eines Containers basierend auf einer allgemeinen Größen- oder Inline-Größenbedingung wie einer maximalen oder minimalen Dimension, einem Seitenverhältnis oder einer Ausrichtung.
- Scroll-Zustand: Ermöglicht das selektive Anwenden von CSS-Regeln auf die Kinder eines Containers basierend auf einer Scroll-Zustandsbedingung wie z. B., ob der Container ein Scroll-Container ist, der teilweise gescrollt wird, oder ob der Container ein Snap-Ziel ist, das zu seinem Scroll-Snap-Container geschnappt wird.
Hinweis:
Beim Verwenden der Eigenschaften container-type
und container-name
werden die Werte style
und layout
der contain
-Eigenschaft automatisch angewendet.
Syntax
/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;
/* Two values */
container-type: size scroll-state;
/* Global Values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;
Werte
Die container-type
-Eigenschaft kann einen einzelnen Wert aus der Liste unten annehmen oder zwei Werte — einer muss scroll-state
sein und der andere kann inline-size
oder size
sein. Mit anderen Worten, ein Element kann als Größenabfrage-Container, als Scroll-Zustandsabfrage-Container oder als beides festgelegt werden, oder als keines von beiden.
inline-size
-
Etabliert einen Abfrage-Container für Dimensionsabfragen auf der Inline-Achse des Containers. Wendet Layout-, Style- und Inline-Größen-Containment auf das Element an.
Das Inline-Größen-Containment wird auf das Element angewendet. Die Inline-Größe des Elements kann isoliert berechnet werden, unabhängig von den Kind-Elementen (siehe Verwendung von CSS-Containment).
normal
-
Standardwert. Das Element ist kein Abfrage-Container für Größenabfragen, bleibt aber ein Abfrage-Container für Container-Style-Abfragen.
scroll-state
-
Etabliert einen Abfrage-Container für Scroll-Zustandsabfragen auf dem Container. In diesem Fall wird die Größe des Elements nicht isoliert berechnet; es wird kein Containment angewendet.
size
-
Etabliert einen Abfrage-Container für Container-Größenabfragen in sowohl Inline- als auch Block- Dimensionen. Wendet Layout-Containment, Style-Containment und Größen-Containment auf den Container an.
Das Größen-Containment wird auf das Element in sowohl der Inline- als auch der Block-Richtung angewendet. Die Größe des Elements kann isoliert berechnet werden, unabhängig von den Kind-Elementen.
Formale Definition
Anfangswert | normal |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Farbe |
Formale Syntax
Beschreibung
Container-Abfragen erlauben es Ihnen, Styles selektiv innerhalb eines Containers anzuwenden, basierend auf bedingten Abfragen, die am Container durchgeführt werden. Die @container
at-rule wird verwendet, um die Tests zu bestimmen, die an einem Container durchgeführt werden, und die Regeln, die auf den Inhalt des Containers angewendet werden, wenn die Abfrage true
zurückgibt.
Die Container-Abfragetests werden nur an Elementen mit einer container-type
-Eigenschaft durchgeführt, die die Elemente als Größen- oder Scroll-Zustands-Container oder beides definiert.
Container-Größenabfragen
Container-Größenabfragen erlauben es Ihnen, CSS-Regeln selektiv auf die Nachkommen eines Containers basierend auf einer Größenbedingung wie einer maximalen oder minimalen Dimension, einem Seitenverhältnis oder einer Ausrichtung anzuwenden.
Größen-Container haben zusätzlich Größen-Containment auf sie angewendet – dies schaltet die Fähigkeit eines Elements aus, Größeninformationen von seinen Inhalten zu erhalten, was wichtig für Container-Abfragen ist, um Endlosschleifen zu vermeiden. Wenn dies nicht der Fall wäre, könnte eine CSS-Regel innerhalb einer Container-Abfrage die Inhaltsgröße ändern, was wiederum dazu führen könnte, dass die Abfrage zu False auswertet und die Größe des Elternelements ändert, was wiederum die Inhaltsgröße ändern und die Abfrage wieder zu True umschalten könnte, und so weiter. Diese Abfolge würde sich dann in einer Endlosschleife wiederholen.
Die Container-Größe muss durch den Kontext festgelegt werden, wie Block-Level-Elemente, die sich über die gesamte Breite ihres Elternelements erstrecken, oder explizit definiert sein. Wenn eine kontextuelle oder explizite Größe nicht verfügbar ist, werden Elemente mit Größen-Containment kollabieren.
Container-Scroll-Zustandsabfragen
Container-Scroll-Zustandsabfragen erlauben es Ihnen, CSS-Regeln selektiv auf die Kinder eines Containers anzuwenden, basierend auf einer Scroll-Zustandsbedingung wie:
- Ob der Inhalt des Containers teilweise gescrollt ist.
- Ob der Container ein Snap-Ziel ist, das zu einem Scroll Snap Container geschnappt werden soll.
- Ob der Container über
position: sticky
positioniert ist und an einer Grenze eines Scroll-Containers haftet.
Im ersten Fall ist der abgefragte Container der Scroll-Container selbst. In den anderen beiden Fällen ist der abgefragte Container ein Element, das durch die Scroll-Position eines Vorfahren-Scroll-Containers beeinflusst wird.
Beispiele
Einrichtung des Inline-Größen-Containments
Angenommen, wir haben das folgende HTML-Beispiel, das eine Kartenkomponente mit einem Bild, einem Titel und etwas Text ist:
<div class="container">
<div class="card">
<h3>Normal card</h3>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="container wide">
<div class="card">
<h3>Wider card</h3>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
Um einen Container-Kontext zu erstellen, fügen Sie die container-type
-Eigenschaft zu einem Element hinzu.
Das folgende Beispiel verwendet den Wert inline-size
, um einen Containment-Kontext für die Inline-Achse des Containers zu erstellen:
.container {
container-type: inline-size;
width: 300px;
height: 120px;
}
.wide {
width: 500px;
}
Das Schreiben einer Container-Abfrage über die @container
at-rule wird die Styles auf die Elemente des Containers anwenden, wenn dieser breiter als 400px ist:
@container (width > 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
Spezifikationen
Specification |
---|
CSS Conditional Rules Module Level 5 # container-type |
Browser-Kompatibilität
Siehe auch
- CSS Container-Abfragen
- Verwendung von Container-Größen- und Style-Abfragen
- Verwendung von Container-Scroll-Zustandsabfragen
@container
at-rule- CSS
container
Shorthand-Eigenschaft - CSS
container-name
Eigenschaft - CSS
content-visibility
Eigenschaft