inset

Die CSS-Eigenschaft inset ist eine Kurzschreibweise für die vier inset-Eigenschaften, top, right, bottom und left in einer Deklaration. Genau wie die vier einzelnen Eigenschaften selbst hat inset keine Auswirkung auf nicht positionierte (statische) Elemente. Mit anderen Worten, ein Element muss einen expliziten position-Wert deklarieren, bevor inset-Eigenschaften wirksam werden.

.box {
  inset: 10px 20px 30px 40px;
  position: relative;
}

inset ist ursprünglich in der Spezifikation CSS Logical Properties and Values Level 1 definiert, die am 20. April 2020 als Editor’s Draft vorliegt.

Syntax

Wie Sie aus dem obigen Beispiel schließen können, folgt inset der gleichen Mehrwertigkeitssyntax wie padding und margin. Das bedeutet, es können bis zu vier Werte akzeptiert werden (um Abstände für top, right, bottom und left zu deklarieren) und bis zu einem Wert (um einen gleichen Abstand für alle vier Eigenschaften zu deklarieren). Und wie bei padding und margin fließen die Werte im Uhrzeigersinn, beginnend mit top.

.element {
  inset: 1em 2em 3em 0; /* top right bottom left */
  inset: 10% 5% -10%;   /* top left/right bottom */
  inset: 0 10px;        /* top/bottom left/right */
  inset: 20px;          /* all edges = 20px */
}

Vor inset mussten wir jede inset-Unter-Eigenschaft separat deklarieren, so:

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Jetzt können wir das einfach in eine einzige Zeile CSS umwandeln: 

.box {
  position: absolute;
  inset: 0; /* 🎉 */
}

Werte

Die Eigenschaft inset akzeptiert numerische Werte genau wie top, right, bottom und left. Diese Werte können jede gültige CSS-Länge sein, wie z. B. px, em, rem und %, unter anderem.

Lassen Sie uns über logische Eigenschaften sprechen

Wir kratzen hier nur an der Oberfläche der logischen Eigenschaften, da der eigentliche Fokus auf inset und seinen zugehörigen Unter-Eigenschaften liegt. Eine gründliche Auseinandersetzung mit dem Thema finden Sie in diesem Smashing Magazine-Artikel von Rachel Andrew.

Es gibt mehr inset-Unter-Eigenschaften als top, right, bottom und left, aber um sie zu verstehen, lohnt es sich, sich mit logischen Eigenschaften und Werten vertraut zu machen.

Inhalte können in verschiedenen Richtungen angezeigt werden (d. h. Schreibmodi), einschließlich links nach rechts, rechts nach links, von oben nach unten und von unten nach oben. Wenn wir von „logischen“ Konzepten sprechen, beziehen wir uns wirklich auf den Ausgangspunkt basierend auf der Schreibrichtung des Inhalts.

Stellen Sie sich vor, Sie bauen eine Website, die sowohl links-nach-rechts (LTR)-Sprachen wie Englisch und Spanisch als auch rechts-nach-links (RTL)-Sprachen wie Persisch oder Arabisch unterstützen muss. Sagen wir, Sie möchten einen Abstand zwischen einem Symbol und einem daneben stehenden Text hinzufügen.

Natürlich würden Sie die Eigenschaft margin-right für LTR verwenden und dann einen weiteren Stylesheet-Block hinzufügen, der diesen Abstand entfernt und ihn durch margin-left für RTL ersetzt.

.icon {
  margin-right: 1em;
}


/* or .icon:dir(rtl) */
[dir="rtl"] .icon {
  margin-right: 0;
  margin-left: 1em;
}

Dies ist nur ein kleiner Teil einer Seite. Stellen Sie sich nun vor, eine große Website auf diese Weise zu erstellen – das ist viel Arbeit! Aber logische Eigenschaften machen es zum Kinderspiel, indem sie den Schreibmodus für uns berücksichtigen. Zum Beispiel können wir dem Ende des Elements einen Abstand hinzufügen, wo auch immer es sich befindet.

.icon {
  margin-inline-end: 1em;
}

Das meinen wir, wenn wir von logischen Eigenschaften sprechen – sie beziehen sich auf den Schreibmodus und nicht auf eine physische Richtung. Sehen Sie, wie viel logischer es ist, mit logischen Eigenschaften zu arbeiten?

Inset logische Eigenschaften

Wenn Sie nun wissen, was Sie über logische Eigenschaften wissen, hier sind vier zusätzliche inset-Unter-Eigenschaften

Logische Eigenschaft	Äquivalente horizontale Flussrichtung	Was es tut
inset-block-start	top	Legt den Abstand für die Startkante in der Richtung fest, die senkrecht zur Schreibrichtung verläuft.
inset-block-end	bottom	Legt den Abstand für die Endkante in der Richtung fest, die senkrecht zur Schreibrichtung verläuft.
inset-inline-start	left	Legt den Abstand für die Startkante in Schreibrichtung fest, die je nach Schreibmodus, Ausrichtung und Textorientierung des Elements einem physischen Abstand zugeordnet wird.
inset-inline-end	right	Legt den Abstand für die Endkante in Schreibrichtung fest.

Wir können diese vier Unter-Eigenschaften sogar zu zwei zusätzlichen Kurzschreibweisen zusammenfassen

Logische Eigenschaft	Kurzschreibweise für	Was es tut
inset-inline	inset-inline-start inset-inline-end	Akzeptiert einen einzelnen Wert, um sowohl inset-inline-start als auch inset-inline-end festzulegen. Akzeptiert auch zwei Werte, wobei der erste inset-inline-start und der zweite inset-inline-end angibt.
inset-block	inset-block-start inset-block-end	Akzeptiert einen einzelnen Wert, um sowohl inset-block-start als auch inset-block-end festzulegen. Akzeptiert auch zwei Werte, wobei der erste inset-block-start und der zweite inset-block-end angibt.

Demo

Ändern Sie den Schreibmodus und die Werte der inset-Eigenschaften, um eine bessere Vorstellung davon zu bekommen, wie sie funktionieren

Achtung: Die Eigenschaft inset ist nicht logisch

Obwohl inset Teil der Spezifikation Logical Properties and Values ist, definiert sie keine logischen Block- oder Inline-Abstände. Stattdessen definiert sie physische Abstände, unabhängig vom Schreibmodus, der Ausrichtung und der Textorientierung des Elements. Mit anderen Worten, inset ist nur eine Kurzschreibweise für top, right, bottom und left.

Es gibt Diskussionen auf GitHub bezüglich der Verwendung einiger Schlüsselwörter, um diese Eigenschaft auch logisch nutzen zu können.

Verwenden wir also immer noch physische Abstände? Stellen Sie sich vor, Sie möchten ein Abzeichen oder ein Logo in der oberen linken Ecke Ihrer Seite fixieren, und es soll dort sein, unabhängig von der Sprache. In diesem Fall können Sie keine logischen Abstände verwenden und müssen stattdessen auf physische Eigenschaften zurückgreifen.

Browser-Unterstützung

Die Unterstützung für die Eigenschaft inset befindet sich noch in einem frühen Stadium. Zum Zeitpunkt der Erstellung schätzt caniuse die globale Unterstützung auf 69,43 %.

Desktop

Internet Explorer	Edge	Firefox	Chrome	Safari	Opera
Nein	91 (Feature Flag)	66+	87+	14.1+	73+

Mobil

iOS Safari	Opera Mini	Android Browser	Chrome Android	Firefox Android
14.6+	?	91+	91+	89+

Verwandte Eigenschaften

• position
• top / right / bottom / left

Weitere Informationen

• CSS Logical Properties and Values Level 1 (Spezifikation, Editor’s Draft)
• Understanding Logical Properties and Values (Smashing Magazine)
• CSS Logical Properties (CSS-Tricks)