inset-inline-startist eine CSS-Eigenschaft, die die Länge festlegt, um die ein Element in der Inline-Startrichtung versetzt ist. Es ist eine Art , wie erklärt left, dass es gilt für positionierte Elemente und Offsets ein Element in der Richtung nach links, mit Ausnahme dessen Start- und Endpunkte können auf der Basis des Elements geändert direction, text-orientationund writing-modegenau 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-inline-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Wenn beispielsweise der Schreibmodus auf horizontal-lrdie inset-inline-startEigenschaft festgelegt ist, verhält es sich wie beim Festlegen leftund versetzt ein Element vom linken Rand. Sie müssen sogar ein explizites positionElement für dasselbe Element angeben, damit es wirksam wird, genau wie physikalische Offset-Eigenschaften.
Ändern Sie jedoch die Elemente writing-modein etwas wie, vertical-lrund die Startkante wird in vertikaler Richtung gedreht, wobei Sie sich eher wie die topstattdessen verhalten.
Syntax
inset-inline-start: ;- 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
leftEigenschaft - Animationstyp: nach berechnetem Werttyp
Werte
inset-blockNimmt einen Längenwert und unterstützt globale Schlüsselwörter. Der Standardwert ist auto.
/* Length values */ inset-inline-start: 50px; inset-inline-start: 4em; inset-inline-start: 3.5rem inset-inline-start: 25vh; /* Percentage values */ inset-inline-start: 50%; /* Keyword values */ inset-inline-start: auto; /* initial value */ /* Global values */ inset-inline-start: initial inset-inline-start: inherit; inset-inline-start: 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)