inset-block-endist eine logische CSS-Eigenschaft, die die Länge festlegt, um die ein Element in Blockrichtung von seiner Endkante versetzt ist. Es ist irgendwie wie erklärt bottomaußer seinem Endpunkt des Elements bestimmt wird direction, text-orientationund writing-mode, genau wie andere logische Eigenschaften.
Die Eigenschaft ist Teil der Spezifikation für logische CSS-Eigenschaften und -Werte der Ebene 1, die sich derzeit im Entwurfsstatus des Editors befindet. Das bedeutet, dass sich die Definition und Informationen darüber zwischen jetzt und der offiziellen Empfehlung ändern können.
.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Wenn beispielsweise der Schreibmodus auf horizontal-lrdie inset-block-endEigenschaft festgelegt ist, verhält es sich wie folgt bottomund legt den Versatz des Elements von der unteren Kante fest. Sie müssen sogar ein explizites positionElement für dasselbe Element angeben , damit es wie bottomandere physikalische Offset-Eigenschaften wirksam wird .
Ändern Sie jedoch die Elemente writing-modein etwas Ähnliches, vertical-lrund die „untere“ Kante wird in vertikaler Richtung gedreht, sodass sie eher der rightEigenschaft ähnelt .
Syntax
inset-block-end: ;- Ursprünglicher Wert:
auto - Gilt für: positionierte Elemente
- Geerbt: nein
- Prozentsätze: wie für die entsprechende physikalische Eigenschaft
- Berechneter Wert: Entspricht der entsprechenden
bottomEigenschaft - Animationstyp: nach berechnetem Werttyp
Werte
inset-block-endNimmt einen Längenwert und unterstützt globale Schlüsselwörter. Der Standardwert ist auto.
/* Length values */ inset-block-end: 50px; inset-block-end: 4em; inset-block-end: 3.5rem inset-block-end: 25vh; /* Percentage values */ inset-block-end: 50%; /* Keyword values */ inset-block-end: auto; /* initial value */ /* Global values */ inset-block-end: initial inset-block-end: inherit; inset-block-end: unset;Browser-Unterstützung
| IE | Kante | Feuerfuchs | Chrom | Safari | Oper |
|---|---|---|---|---|---|
| Nein | Nein | 63+ | Nein | Nein | Nein |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mini |
|---|---|---|---|---|
| Nein | 79+ | Nein | Nein | Nein |
Demo
Weiterführende Literatur
- Spezifikation der logischen Eigenschaften und Werte von CSS Level 1 (Entwurf des Herausgebers)
- MDN-Dokumentation
- Grundlegendes zu logischen Eigenschaften und Werten (Smashing Magazine)
- Logische CSS-Eigenschaften (Adrian Roselli)
- Bidirektionale horizontale Regeln in CSS (Hussein Al Hammad)