contain-intrinsic-height
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-height CSS Eigenschaft legt die Höhe eines Elements fest, die ein Browser zur Layoutgestaltung verwenden kann, wenn das Element einer Größenbeschränkung unterliegt.
Syntax
/* Keyword values */
contain-intrinsic-height: none;
/* <length> values */
contain-intrinsic-height: 1000px;
contain-intrinsic-height: 10rem;
/* auto <length> */
contain-intrinsic-height: auto 300px;
/* Global values */
contain-intrinsic-height: inherit;
contain-intrinsic-height: initial;
contain-intrinsic-height: revert;
contain-intrinsic-height: revert-layer;
contain-intrinsic-height: unset;
Werte
Für ein Element können die folgenden Werte angegeben werden.
none-
Das Element hat keine intrinsische Höhe.
<length>-
Das Element hat die angegebene Höhe (
<length>). auto <length>-
Ein gespeicherter Wert der "normal gerenderten" Elementhöhe, falls vorhanden, und wenn das Element seine Inhalte überspringt (zum Beispiel, wenn es außerhalb des Bildschirms ist); andernfalls die angegebene
<length>.
Beschreibung
Die Eigenschaft wird häufig zusammen mit Elementen angewendet, die eine Größenbeschränkung auslösen können, wie contain: size und content-visibility, und kann auch über die Kurzschreibeigenschaft contain-intrinsic-size gesetzt werden.
Größenbeschränkung ermöglicht es einem Nutzeragenten, ein Element so zu gestalten, als hätte es eine feste Größe, wodurch unnötige Neulayouts vermieden werden, indem die Neudarstellung von Kindelementen zur Bestimmung der tatsächlichen Größe vermieden wird (was die Benutzererfahrung verbessert). Standardmäßig behandelt die Größenbeschränkung Elemente so, als hätten sie keine Inhalte, und kann das Layout so zusammenfallen lassen, als hätten die Inhalte keine Höhe (oder Breite). Die contain-intrinsic-height Eigenschaft erlaubt es Autoren, einen geeigneten Wert festzulegen, der als Höhe für das Layout verwendet wird.
Der auto <length> Wert ermöglicht es, die Höhe des Elements zu speichern, wenn das Element jemals "normal gerendert" wird (mit seinen Kindelementen), und dann anstelle der angegebenen Höhe verwendet wird, wenn das Element seine Inhalte überspringt. Dies erlaubt es Elementen außerhalb des Bildschirms mit content-visibility: auto von Größenbeschränkungen zu profitieren, ohne dass Entwickler so präzise in ihren Schätzungen der Elementgröße sein müssen. Der gespeicherte Wert wird nicht verwendet, wenn die Kindelemente gerendert werden (wenn Größenbeschränkung aktiviert ist, wird die <length> 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-height =
auto? [ none | <length [0,∞]> ]
Beispiele
Zusätzlich zum untenstehenden Beispiel enthält die Seite contain-intrinsic-size ein Live-Beispiel, das die Wirkung der Änderung der intrinsischen Breite und Höhe verdeutlicht.
Festlegen der intrinsischen Höhe
Das folgende HTML definiert ein Element "contained_element", das einer Größenbeschränkung unterliegen wird und ein Kindelement enthält.
<div id="contained_element">
<div class="child_element"></div>
</div>
Das folgende CSS legt die content-visibility von contained_element auf auto fest, sodass das Element größenbeschränkt wird, wenn es verborgen ist. Die Breite und Höhe, die verwendet werden, wenn es größenbeschränkt ist, werden gleichzeitig mit contain-intrinsic-width und contain-intrinsic-height festgelegt.
#contained_element {
border: 2px solid green;
width: 151px;
content-visibility: auto;
contain-intrinsic-width: 152px;
contain-intrinsic-height: 52px;
}
.child_element {
border: 1px solid red;
background: blue;
height: 50px;
width: 150px;
}
Spezifikationen
| Specification |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-height |
Browser-Kompatibilität
Loading…