Die insetEigenschaft in CSS ist eine Abkürzung für die vier Inset Eigenschaften top, right, bottomund leftin einer Erklärung. Hat genau wie die vier einzelnen Eigenschaften selbst insetkeine Auswirkung auf nicht positionierte (statische) Elemente. Mit anderen Worten, ein Element muss einen expliziten positionWert deklarieren , bevor Inset-Eigenschaften wirksam werden können.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset wird anfänglich in der Spezifikation der logischen CSS-Eigenschaften und -Werte der Stufe 1 definiert, die ab dem 20. April 2020 im Entwurf des Herausgebers enthalten ist.
Syntax
Wie Sie dem obigen Beispiel entnehmen können, insetfolgt dieselbe mehrwertige Syntax von paddingund margin. Das heißt , es so viele akzeptiert als vier Werte (bis declare Offsets für top, right, bottomund left) und so wenig wie ein Wert (zu erklären , eine gleiche Offset für alle vier Eigenschaften). Und wie paddingund marginfließ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 */ )Vorher insetmussten wir jede insetUntereigenschaft separat deklarieren , wie folgt:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Jetzt können wir das einfach auf eine einzelne Zeile CSS übertragen:
.box ( position: absolute; inset: 0; /* ? */ )Werte
Die insetEigenschaft akzeptiert numerische Werte wie oben, rechts, unten und links. Diese Werte können jede gültige CSS Länge sein, wie px, em, remund %, unter anderem.
Lassen Sie uns über logische Eigenschaften sprechen
Wir werden hier nur die Oberfläche der logischen Eigenschaften zerkratzen, da der eigentliche Fokus auf insetund den damit verbundenen Untereigenschaften liegt. In diesem Artikel des Smashing Magazine von Rachel Andrew können Sie sich eingehend mit dem Thema befassen.
Es gibt mehr insetUnter Eigenschaften als top, right, bottomund leftdoch, um sie zu verstehen, lohnt es sich mit logischen Eigenschaften und Werten vertraut zu werden .
Inhalte können in verschiedenen Richtungen angezeigt werden (dh in Schreibmodi), einschließlich von links nach rechts, von rechts nach links, von oben nach unten und von unten nach oben. Wenn wir über „logische“ Konzepte sprechen, beziehen wir uns wirklich auf den Ausgangspunkt, basierend auf der Schreibrichtung des Inhalts.
Stellen Sie sich vor, Sie erstellen eine Website, die sowohl LTR-Sprachen (links nach rechts) wie Englisch und Spanisch als auch RTL-Sprachen (rechts nach links) wie Persisch oder Arabisch unterstützen muss. Angenommen, Sie möchten einen Rand zwischen einem Symbol und einem Zeilentext daneben einfügen.
Natürlich können Sie nach der margin-rightEigenschaft greifen , um LTR zu unterstützen, und dann einen weiteren Regelsatz hinzufügen, der diesen Rand entfernt und margin-leftdurch RTL ersetzt:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Dies ist ein kleiner Teil einer Seite. Stellen Sie sich nun vor, Sie erstellen auf diese Weise eine große Website - das ist viel Arbeit! Aber logische Eigenschaften machen es zum Kinderspiel, wenn wir den Schreibmodus für uns berücksichtigen. Zum Beispiel können wir am Ende des Elements einen Rand hinzufügen , wo immer dies geschieht:
.icon ( margin-inline-end: 1em; )
Dies ist, was wir meinen, wenn wir uns auf logische Eigenschaften beziehen - sie beziehen sich eher auf den Schreibmodus als auf eine physikalische Richtung. Sehen Sie, wie logisch es ist, mit logischen Eigenschaften zu arbeiten?
Logische Eigenschaften einfügen
Wenn Sie wissen, was Sie jetzt über logische Eigenschaften wissen, finden Sie hier vier zusätzliche Untereigenschaften:
| Logische Eigenschaft | Horizontales Durchflussäquivalent | Was es macht |
|---|---|---|
inset-block-start | top | Gibt den Versatz für die Startkante in der Richtung an, die senkrecht zur Schreibrichtung ist. |
inset-block-end | bottom | Gibt den Versatz für die Endkante in der Richtung an, die senkrecht zur Schreibrichtung ist. |
inset-inline-start | left | Gibt den Versatz für die Startkante in Schreibrichtung an, der abhängig vom Schreibmodus, der Richtung und der Textausrichtung des Elements einem physischen Versatz zugeordnet wird. |
inset-inline-end | right | Gibt den Versatz für die Endkante in Schreibrichtung an. |
Wir können diese vier Untereigenschaften sogar in zwei zusätzliche Kurzform-Eigenschaften gruppieren:
| Logische Eigenschaft | Abkürzung für | Was es macht |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Akzeptiert einen einzelnen Wert zum Festlegen von inset-inline-startund inset-inline-end.Akzeptiert auch zwei Werte, wobei der erste inset-inline-startund der zweite angibt inset-inline-end. |
inset-block | inset-block-startinset-block-end | Akzeptiert einen einzelnen Wert, um sowohl inset-block-start als auch zu setzen inset-block-end.Akzeptiert auch zwei Werte, wobei der erste inset-block-startund der zweite angibt inset-block-end. |
Demo
Ändern Sie den Schreibmodus und die Werte der Inset-Eigenschaften, um eine bessere Vorstellung davon zu erhalten, wie sie funktionieren:
Heads up: Die insetEigenschaft ist nicht logisch
Obwohl dies insetTeil der Spezifikation für logische Eigenschaften und Werte ist, werden keine logischen Block- oder Inline-Offsets definiert. Stattdessen werden physische Offsets definiert, unabhängig vom Schreibmodus, der Richtung und der Textausrichtung des Elements. Mit anderen Worten, insetist nur eine Abkürzung für top, right, bottomund left.
Hier auf GitHub wird über die Verwendung einiger Schlüsselwörter diskutiert, um diese Eigenschaft auch logisch verwenden zu können.
Verwenden wir also immer noch physische Offsets? Stellen Sie sich vor, Sie möchten ein Abzeichen oder ein Logo in der oberen und linken Ecke Ihrer Seite und unabhängig von der Sprache möchten, dass es dort ist. In diesem Fall können Sie keine logischen Offsets verwenden und müssen stattdessen auf physikalische Eigenschaften zurückgreifen.
Browser-Unterstützung
Die Unterstützung für die insetImmobilie befindet sich noch in einem frühen Stadium. Zum jetzigen Zeitpunkt schätzt caniuse die weltweite Unterstützung auf lediglich 3,79%.
Desktop
| Internet Explorer | Kante | Feuerfuchs | Chrom | Safari | Oper |
|---|---|---|---|---|---|
| Nein | Nein | 66+ | Nein | Nein | Nein |
Handy, Mobiltelefon
| iOS Safari | Opera Mini | Android Browser | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Nein | Nein | 68 | Nein | Nein |
Mehr Informationen
- Logische CSS-Eigenschaften und -Werte Stufe 1 (Spezifikation, Entwurf des Herausgebers)
- Grundlegendes zu logischen Eigenschaften und Werten (Smashing Magazine)
- CSS Logical Properties (CSS-Tricks)