contain-intrinsic-height 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-height CSS Eigenschaft legt die Höhe eines Elements fest, die ein Browser für das Layout verwenden kann, wenn das Element der 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
Die folgenden Werte können für ein Element 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, wenn eine existiert und das Element seine Inhalte überspringt (zum Beispiel, wenn es außerhalb des Bildschirms ist); ansonsten die angegebene
<length>.
Beschreibung
Die Eigenschaft wird häufig zusammen mit Elementen angewendet, die Größenbeschränkung auslösen können, wie zum Beispiel contain: size und content-visibility, und kann auch unter Verwendung der contain-intrinsic-size Kurzschreibweise gesetzt werden.
Größenbeschränkung ermöglicht es einem Benutzeragenten, ein Element so zu gestalten, als hätte es eine feste Größe, um unnötige Neuanordnungen zu verhindern, indem das Neurendern von Kindelementen vermieden wird, um die tatsächliche Größe zu bestimmen (und somit die Benutzererfahrung zu verbessern).
Standardmäßig behandelt die Größenbeschränkung Elemente so, als hätten sie keine Inhalte, und kann das Layout auf dieselbe Weise zusammenbrechen lassen, als hätten die Inhalte keine Höhe (oder Breite).
Die contain-intrinsic-height-Eigenschaft ermöglicht es den Autoren, einen geeigneten Wert anzugeben, der als Höhe für das Layout verwendet wird.
Der auto <length>-Wert 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 verwendet wird, wenn das Element seine Inhalte überspringt.
Dies ermöglicht es, dass Elemente außerhalb des Bildschirms mit content-visibility: auto von der Größenbeschränkung profitieren, ohne dass Entwickler so präzise bei ihren Schätzungen der Elementgröße sein müssen.
Der gespeicherte 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 unten stehenden Beispiel enthält die Seite contain-intrinsic-size ein Live-Beispiel, das die Wirkung der Änderung der intrinsischen Breite und Höhe demonstriert.
Festlegen der intrinsischen Höhe
Der unten stehende HTML-Code 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 es, wenn das Element 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 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
| Spezifikation |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-height |