contain-intrinsic-block-size
Baseline
2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die contain-intrinsic-block-size CSS logische Eigenschaft definiert die Blockgröße eines Elements, die ein Browser für das Layout verwenden kann, wenn das Element einer Größenbegrenzung unterliegt.
Die Blockgröße ist die Größe eines Elements in der Dimension, die senkrecht zum Textfluss innerhalb einer Zeile steht. In einem horizontalen Schreibmodus wie in der Standardsprache Englisch ist die Blockgröße die vertikale Dimension (Höhe); in einem vertikalen Schreibmodus ist die Blockgröße die horizontale Dimension.
Syntax
/* Keyword values */
contain-intrinsic-block-size: none;
/* <length> values */
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;
/* auto <length> */
contain-intrinsic-block-size: auto 300px;
/* Global values */
contain-intrinsic-block-size: inherit;
contain-intrinsic-block-size: initial;
contain-intrinsic-block-size: revert;
contain-intrinsic-block-size: revert-layer;
contain-intrinsic-block-size: unset;
Werte
Die folgenden Werte können für die intrinsische Blockgröße eines Elements angegeben werden:
none-
Das Element hat keine intrinsische Blockgröße.
<length>-
Das Element hat die angegebene Blockgröße, ausgedrückt mit dem Datentyp (
<length>). auto <length>-
Wenn das Element in der Größenbegrenzung ist und seine Inhalte überspringt (zum Beispiel, wenn es außerhalb des Bildschirms ist und
content-visibility: autoeingestellt ist), wird die Blockgröße aus der tatsächlichen Größe des Elements abgeleitet, als es zuletzt in der Lage war, seine Kindelemente zu rendern. Wenn das Element seine Kindelemente niemals gerendert hat und daher keinen gespeicherten Wert für die normalerweise gerenderte Elementgröße hat, oder wenn es seine Inhalte nicht überspringt, ist die Blockgröße der angegebene<length>.
Beschreibung
Die Eigenschaft wird häufig neben Elementen angewendet, die eine Größenbegrenzung auslösen können, wie zum Beispiel contain: size und content-visibility.
Größenbegrenzung erlaubt es einem Benutzeragenten, ein Element so zu layouten, als ob es eine feste Größe hätte.
Dies verhindert unnötige Neuzuweisungen von Layouts, indem die Neudarstellung von Kindelementen vermieden wird, um die tatsächliche Größe zu bestimmen (dadurch wird die Benutzererfahrung verbessert).
Standardmäßig behandelt die Größenbegrenzung Elemente so, als ob sie keine Inhalte hätten und das Layout in gleicher Weise wie bei Inhalten ohne Breite oder Höhe kollabieren könnte.
Die Eigenschaft contain-intrinsic-block-size erlaubt es Autoren, einen angemessenen Wert anzugeben, der als Blockgröße für das Layout verwendet werden soll.
Der Wert auto <length> erlaubt es, die Blockgröße eines Elements zu speichern, wenn das Element jemals "normal gerendert" wird (mit seinen Kindelementen) und dann anstelle des angegebenen Wertes verwendet wird, wenn das Element keine Inhalte hat.
Dies ermöglicht es, dass außerhalb des Bildschirms liegende Elemente mit content-visibility: auto von der Größenbegrenzung profitieren, ohne dass Entwickler ihre Schätzungen der Elementgröße genau festlegen müssen.
Der gespeicherte Wert wird nicht verwendet, wenn die Kindelemente gerendert werden; wenn die Größenbegrenzung aktiviert ist, wird der <length>-Wert verwendet.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | elements for which size containment can apply |
| Vererbt | Nein |
| Berechneter Wert | as specified, with <length>s values computed |
| Animationstyp | by computed value type |
Formale Syntax
contain-intrinsic-block-size =
auto? [ none | <length [0,∞]> ]
Beispiele
Festlegen der intrinsischen Blockgröße
Das untenstehende HTML definiert ein Element "contained_element", das einer Größenbegrenzung unterliegen wird und ein Kindelement enthält.
<div id="contained_element">
<div class="child_element"></div>
</div>
Das nachstehende CSS setzt die content-visibility von contained_element auf auto, so dass, wenn das Element versteckt ist, es einer Größenbegrenzung unterliegt.
Die intrinsische Blockgröße und die Inline-Größe, die verwendet werden, wenn es Größen eingeschränkt ist, werden gleichzeitig mithilfe von contain-intrinsic-block-size und contain-intrinsic-inline-size festgelegt.
#contained_element {
border: 2px solid green;
inline-size: 151px;
content-visibility: auto;
contain-intrinsic-inline-size: 152px;
contain-intrinsic-block-size: 52px;
}
.child_element {
border: 1px solid red;
background: blue;
block-size: 50px;
inline-size: 150px;
}
Spezifikationen
| Specification |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-block-size |