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 CSS-Eigenschaft contain-intrinsic-height setzt die Höhe eines Elements, die ein Browser für das Layout 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 festgelegt werden.
none-
Das Element hat keine intrinsische Höhe.
<length>-
Das Element hat die angegebene Höhe (
<length>). auto <length>-
Ein gemerkter Wert der "normal gerenderten" Elementhöhe, falls vorhanden, und 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 mit der contain-intrinsic-size Kurzschreibweise festgelegt werden.
Größenbeschränkung ermöglicht es einem User Agent, ein Element so zu layouten, als hätte es eine feste Größe, um unnötige Neulayouts zu verhindern, indem das erneute Rendern von Kindelementen vermieden wird, um die tatsächliche Größe zu bestimmen (was das Benutzererlebnis verbessert).
Standardmäßig behandelt die Größenbeschränkung Elemente so, als hätten sie keinen Inhalt, und kann das Layout in gleicher Weise zusammenfallen lassen, als hätten die Inhalte keine Höhe (oder Breite).
Die Eigenschaft contain-intrinsic-height erlaubt es Autoren, einen geeigneten Wert anzugeben, der als Höhe für das Layout verwendet werden soll.
Der Wert auto <length> erlaubt 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 zu verwenden, wenn das Element seine Inhalte überspringt.
Dies ermöglicht es außerhalb des Bildschirms befindlichen Elementen mit content-visibility: auto, von der Größenbeschränkung zu profitieren, ohne dass Entwickler bei ihren Schätzungen der Elementgröße so genau sein müssen.
Der gemerkte Wert wird nicht verwendet, wenn die Kindelemente gerendert werden (wenn die 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 zu dem untenstehenden Beispiel enthält die Seite contain-intrinsic-size ein Live-Beispiel, das die Wirkung der Änderung von intrinsischer Breite und Höhe demonstriert.
Setzen der intrinsischen Höhe
Der HTML-Code unten 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>
Der unten stehende CSS-Code setzt die content-visibility von contained_element auf auto, sodass das Element, wenn es verborgen ist, größenbeschränkt wird.
Die Breite und Höhe, die verwendet werden, wenn es größenbeschränkt ist, werden gleichzeitig mit contain-intrinsic-width und contain-intrinsic-height gesetzt.
#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…