inset-inline

inset-inline ist eine verkürzte logische CSS-Eigenschaft, die die Länge festlegt, um die ein Element in Inline-Richtung versetzt wird, und kombiniert inset-inline-start und inset-inline-end. Sie ähnelt der Deklaration von right und left, außer dass ihre Start- und Endpunkte durch die direction, text-orientation und writing-mode des Elements bestimmt werden, genau wie bei anderen logischen Eigenschaften.

Die Eigenschaft ist Teil der CSS Logical Properties and Values Level 1 specification, die sich derzeit im Entwurfsstadium befindet. Das bedeutet, dass sich die Definition und die Informationen dazu 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 die Schreibrichtung auf horizontal-lr gesetzt ist, verhält sich die Eigenschaft inset-inline genau wie das Setzen von top und bottom und legt den Versatz des Elements vom unteren Rand fest. Sie müssen sogar eine explizite position auf demselben Element angeben, damit sie wirksam wird, genau wie bei physischen Offset-Eigenschaften.

Aber ändern Sie die writing-mode des Elements in etwas wie vertical-lr, und der "untere" Rand wird in vertikaler Richtung gedreht und verhält sich eher wie die Eigenschaften left und right.

Syntax

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

• Anfangswert: auto
• Gilt für: positionierte Elemente
• Vererbt: nein
• Prozentsätze: wie für die entsprechende physische Eigenschaft
• Berechneter Wert: identisch mit den entsprechenden top- und left-Eigenschaften
• Animationstyp: nach berechnetem Werttyp

Werte

inset-inline nimmt einen Längenwert an und unterstützt globale Schlüsselwörter. Sein 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	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-end
• inset-inline-start

Weitere Lektüre

• CSS Logical Properties and Values Level 1 specification (Entwurf des Herausgebers)
• MDN Dokumentation
• Understanding Logical Properties And Values (Smashing Magazine)
• CSS Logical Properties (Adrian Roselli)
• Bidirectional horizontal rules in CSS (Hussein Al Hammad)