inset-inline-end

inset-inline-end ist eine CSS-Eigenschaft, die die Länge festlegt, um die ein Element in der beginnenden Inline-Richtung versetzt wird. Sie ähnelt der Deklaration von right, da sie für positionierte Elemente gilt und ein Element nach links versetzt, außer dass seine Start- und Endpunkte je nach direction, text-orientation und writing-mode des Elements geändert werden können, genau wie andere logische Eigenschaften.

Die Eigenschaft ist Teil der CSS Logical Properties and Values Level 1 specification, die sich derzeit im Entwurfsstatus befindet. Das bedeutet, dass die Definition und Informationen dazu sich zwischen jetzt und der offiziellen Empfehlung ändern können.

.element {
  inset-inline-end: 50px;
  position: relative; /* Apples to positioned elements */
  writing-mode: vertical-rl; /* Determines the block start direction */
}

Wenn beispielsweise der Schreibmodus auf horizontal-lr eingestellt ist, verhält sich die inset-inline-end-Eigenschaft genauso wie die Einstellung von left und versetzt ein Element vom linken Rand weg. Sie müssen sogar eine explizite position für dasselbe Element angeben, damit sie wirksam wird, genau wie bei physischen Offset-Eigenschaften.

Aber ändern Sie den writing-mode des Elements auf etwas wie vertical-lr, und die "beginnende" Kante wird in vertikaler Richtung gedreht und verhält sich dann eher wie top.

Syntax

inset-inline-end: <'left'>;

• Anfangswert: auto
• Gilt für: positionierte Elemente
• Vererbt: nein
• Prozentsätze: wie für die entsprechende physische Eigenschaft
• Berechneter Wert: dasselbe wie die entsprechende left-Eigenschaft
• Animationstyp: nach berechnetem Werttyp

Werte

inset-block nimmt einen Längenwert an und unterstützt globale Schlüsselwörter. Sein Standardwert ist auto.

/* Length values */
inset-inline-end: 50px;
inset-inline-end: 4em;
inset-inline-end: 3.5rem
inset-inline-end: 25vh;

/* Percentage values */
inset-inline-end: 50%;

/* Keyword values */
inset-inline-end: auto; /* initial value */

/* Global values */
inset-inline-end: initial
inset-inline-end: inherit;
inset-inline-end: unset;

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	Nein	63+	Nein	Nein	Nein

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
Nein	79+	Nein	Nein	Nein

Demo

Verwandte Eigenschaften

• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-start

Weitere Lektüre

• CSS Logical Properties and Values Level 1 specification (Editor’s Draft)
• MDN Dokumentation
• Understanding Logical Properties And Values (Smashing Magazine)
• CSS Logical Properties (Adrian Roselli)
• Bidirectional horizontal rules in CSS (Hussein Al Hammad)