inset-inline-start

inset-inline-start ist eine CSS-Eigenschaft, die die Länge festlegt, um die ein Element in der inline-startenden Richtung versetzt wird. Es ist ähnlich wie die Deklaration von left, da es auf positionierte Elemente angewendet wird 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-start: 50px;
  position: relative; /* Apples to positioned elements */
  writing-mode: vertical-rl; /* Determines the block start direction */
}

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

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

Syntax

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

• Anfangswert: auto
• Gilt für: positionierte Elemente
• Vererbt: nein
• Prozentsätze: wie für die entsprechende physische Eigenschaft
• Berechneter Wert: entspricht der entsprechenden 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-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	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-end

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)