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ößenbeschränkung unterliegt.
Die Blockgröße ist die Größe eines Elements in der Dimension, die senkrecht zum Textfluss innerhalb einer Zeile verläuft. In einem horizontalen Schreibmodus wie im Standard-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 unter Verwendung des (
<length>) Datentyps. auto <length>-
Wenn das Element einer Größenbeschränkung unterliegt und seine Inhalte überspringt (z. B. wenn es außerhalb des Bildschirms ist und
content-visibility: autogesetzt ist), wird die Blockgröße aus der tatsächlichen Größe des Elements gespeichert, als es zuletzt in der Lage war, seine Kindelemente darzustellen. Wenn das Element seine Kindelemente nie 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 die angegebene<length>.
Beschreibung
Die Eigenschaft wird häufig zusätzlich zu Elementen angewendet, die eine Größenbeschränkung auslösen können, wie contain: size und content-visibility.
Größenbeschränkung ermöglicht es einem Benutzeragenten, ein Element so zu layouten, als hätte es eine feste Größe.
Dies verhindert unnötige Neulayouts, indem es das Neu-Rendern der Kindelemente zur Bestimmung der tatsächlichen Größe verhindert (und verbessert dadurch die Benutzererfahrung).
Standardmäßig behandelt die Größenbeschränkung Elemente so, als hätten sie keine Inhalte, und kann das Layout auf die gleiche Weise kollabieren lassen, als hätten die Inhalte keine Breite oder Höhe.
Die contain-intrinsic-block-size-Eigenschaft ermöglicht es Autoren, einen geeigneten Wert anzugeben, der als Blockgröße für das Layout verwendet werden soll.
Der auto <length> Wert ermöglicht es, die Blockgröße eines Elements zu speichern, wenn das Element jemals "normal" gerendert wird (mit seinen Kindelementen) und dann anstelle des angegebenen Werts verwendet wird, wenn das Element keinen Inhalt hat.
Dies ermöglicht es, dass außerhalb des Bildschirms liegende Elemente mit content-visibility: auto von der Größenbeschränkung profitieren, ohne dass Entwickler ihre Schätzungen der Elementgröße genau machen müssen.
Der gespeicherte Wert wird nicht verwendet, wenn die Kindelemente gerendert werden; wenn die Größenbeschränkung 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 folgende HTML definiert ein Element "contained_element", das einer Größenbeschränkung unterliegt und ein Kindelement enthält.
<div id="contained_element">
<div class="child_element"></div>
</div>
Das folgende CSS setzt die content-visibility von contained_element auf auto, sodass, wenn das Element verborgen ist, es größenbeschränkt wird.
Die intrinsische Blockgröße und Inline-Größe, die verwendet werden, wenn es größenbeschränkt ist, werden gleichzeitig mit 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 |
Browser-Kompatibilität
Loading…