inset-block-end

inset-block-end ist eine logische CSS-Eigenschaft, die die Länge festlegt, um die ein Element in Blockrichtung von seiner Endkante versetzt wird. Es ist so etwas wie die Deklaration von bottom, außer dass sein Endpunkt durch die direction, text-orientation und writing-mode des Elements bestimmt wird, genau wie andere logische Eigenschaften.

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

.element {
  inset-block-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-block-end-Eigenschaft genau wie bottom und setzt den Versatz des Elements von der unteren Kante. Sie müssen sogar eine explizite position auf demselben Element angeben, damit sie wirksam wird, genau wie bei bottom und anderen physischen Offset-Eigenschaften.

Aber ändern Sie den writing-mode des Elements zu etwas wie vertical-lr, und die "untere" Kante wird vertikal gedreht und verhält sich eher wie die right-Eigenschaft.

Syntax

inset-block-end: <'bottom'>;

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

Werte

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

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

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

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

/* Global values */
inset-block-end: initial
inset-block-end: inherit;
inset-block-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-start
• inset-inline
• inset-inline-end
• inset-inline-start

Weitere Lektüre

• CSS Logical Properties and Values Level 1 specification (Editor’s Draft)
• MDN Dokumentation
• Verständnis von logischen Eigenschaften und Werten (Smashing Magazine)
• CSS Logische Eigenschaften (Adrian Roselli)
• Bidirektionale horizontale Linien in CSS (Hussein Al Hammad)