contain-intrinsic-block-size CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
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 im (
<length>)-Datentyp. auto <length>-
Wenn das Element einer GröÃenbeschränkung unterliegt und seine Inhalte übersprungen werden (z. B. wenn es auÃerhalb des Bildschirms ist und
content-visibility: autoeingestellt ist), wird die BlockgröÃe von der tatsächlichen GröÃe des Elements abgeleitet, wenn es zuletzt in der Lage war, seine Kind-Elemente darzustellen. Wenn das Element seine Kind-Elemente noch nie dargestellt 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 zusammen mit Elementen angewendet, die eine GröÃenbeschränkung auslösen können, wie z. B. 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 Neuberechnungen, indem die erneute Darstellung von Kindelementen vermieden wird, um die tatsächliche GröÃe zu bestimmen (dadurch wird die Benutzererfahrung verbessert).
StandardmäÃig behandelt die GröÃenbeschränkung Elemente, als hätten sie keine Inhalte, und kann das Layout auf dieselbe Weise kollabieren lassen, als hätten die Inhalte keine Breite oder Höhe.
Die Eigenschaft contain-intrinsic-block-size ermöglicht es den Autoren, einen geeigneten Wert anzugeben, der als BlockgröÃe für das Layout verwendet werden soll.
Der Wert auto <length> ermöglicht es, die BlockgröÃe eines Elements zu speichern, wenn das Element jemals "normal gerendert" wurde (mit seinen Kindelementen) und dann anstelle des angegebenen Wertes verwendet wird, wenn das Element keine Inhalte hat.
Dies ermöglicht auÃerm Bildschirm befindlichen Elementen mit content-visibility: auto, von der GröÃenbeschränkung zu profitieren, ohne dass Entwickler genaue Schätzungen der ElementgröÃe treffen 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 untenstehende 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 untenstehende CSS setzt die content-visibility von contained_element auf auto, sodass das Element bei Ausblendung einer GröÃenbeschränkung unterliegt.
Die intrinsische BlockgröÃe und die Inline-GröÃe, die verwendet werden, wenn es einer GröÃenbeschränkung unterliegt, 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
| Spezifikation |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-block-size |