inset-block-startist eine logische CSS-Eigenschaft, die die Länge festlegt, um die ein Element in Blockrichtung von seiner Startkante versetzt ist. Es ist eine Art , wie erklärt , topaußer seinen Ausgangspunkt wird durch das Element der bestimmt 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-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-block-startEigenschaft eingestellt ist, verhält es sich wie folgt topund legt den Versatz des Elements von seiner Startkante fest, die oben liegt. Sie müssen sogar ein explizites positionElement für dasselbe Element angeben , damit es wie topandere physikalische Offset-Eigenschaften wirksam wird .
Ändern Sie die Elemente jedoch writing-modein "Ähnliches", vertical-rlund die Startkante wird in vertikaler Richtung gedreht, sodass sie eher der leftEigenschaft ähnelt .
Syntax
inset-block-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
topEigenschaft - Animationstyp: nach berechnetem Werttyp
Werte
inset-block-startNimmt einen Längenwert und unterstützt globale Schlüsselwörter. Der Standardwert ist auto.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-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)