inset-inlineist eine logische Kurzform-CSS-Eigenschaft, die die Länge festlegt, um die ein Element in Inline-Richtung versetzt wird, indem inset-inline-startund kombiniert wird inset-inline-end. Es ist irgendwie wie erklärt rightund leftaußer seinem Start- und Endpunkten des Elements bestimmt werden 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-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Wenn beispielsweise der Schreibmodus auf horizontal-lrdie inset-inlineEigenschaft festgelegt ist, verhält es sich wie beim Festlegen topund Festlegen bottomdes Versatzes des Elements von der unteren Kante. Sie müssen sogar ein explizites positionElement für dasselbe Element angeben, damit es wirksam wird, genau wie physikalische Offset-Eigenschaften.
Ändern Sie die Elemente jedoch writing-modein "Ähnliches", vertical-lrund die "untere" Kante wird in vertikaler Richtung gedreht, wobei sie sich eher wie die leftund right-Eigenschaften verhält.
Syntax
inset-inline: ;- Ursprünglicher Wert:
auto - Gilt für: positionierte Elemente
- Geerbt: nein
- Prozentsätze: wie für die entsprechende physikalische Eigenschaft
- Berechneter Wert: wie korrespondierend
topundleftEigenschaften - Animationstyp: nach berechnetem Werttyp
Werte
inset-inlineNimmt einen Längenwert und unterstützt globale Schlüsselwörter. Der Standardwert ist auto.
/* Length values */ inset-inline: 50px; inset-inline: 4em; inset-inline: 3.5rem inset-inline: 25vh; /* Percentage values */ inset-inline: 50%; /* Keyword values */ inset-inline: auto; /* initial value */ /* Global values */ inset-inline: initial inset-inline: inherit; inset-inline: 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)