inset-block-start

inset-block-start ist eine logische CSS-Eigenschaft, die die Länge festlegt, um die ein Element in Blockrichtung von seiner Anfangskante versetzt wird. Es ist so ähnlich wie die Deklaration von top, außer dass sein Ausgangspunkt 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 Spezifikation, die sich derzeit im Editor's Draft Status befindet. Das bedeutet, dass sich die Definition und Informationen dazu zwischen jetzt und der offiziellen Empfehlung ändern können.

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

Wenn der Schreibmodus beispielsweise auf horizontal-lr eingestellt ist, verhält sich die Eigenschaft inset-block-start genau wie top und legt den Versatz des Elements von seiner Anfangskante, d.h. der Oberkante, fest. Sie müssen sogar eine explizite position für dasselbe Element angeben, damit sie wirksam wird, genau wie top und andere physische Versatzeigenschaften.

Aber ändern Sie den writing-mode des Elements auf etwas wie vertical-rl, und die Anfangskante wird in vertikaler Richtung gedreht, was eher der left-Eigenschaft entspricht.

Syntax

inset-block-start: <'top'>;

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

Werte

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

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

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

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

/* Global values */
inset-block-start: initial
inset-block-start: inherit;
inset-block-start: unset;

Browser-Unterstützung

Daten zur Unterstützung des mdn-css__properties__inset-block-start Features über die wichtigsten Browser hinweg

Demo

Verwandte Eigenschaften

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

Weitere Lektüre

• CSS Logical Properties and Values Level 1 Spezifikation (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)