Inset-area | CSS-Tricks

CSS Almanac → Properties → I → inset-area

Juan Diego Rodríguez am 11. Aug. 2024

Die inset-area Eigenschaft erstellt ein imaginäres 3×3-Gitter um ein Anker-Element (Anchor Element), indem sie Zeilen und Spalten deklariert. Sie wird verwendet, um ein anker-positioniertes (oder „Target“-) Element in einer Region des Gitters zu platzieren oder über mehrere Regionen des Gitters zu spannen.

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom end;
}

Für die meisten Anwendungsfälle, wie das Erstellen eines Tooltips, reicht die Verwendung der inset-area Eigenschaft zur Platzierung anker-positionierter Elemente aus. Wenn Sie eine präzisere Steuerung benötigen, können Sie die anchor() Funktion für zusätzliche Möglichkeiten zur Positionierung des anker-positionierten Elements verwenden.

Die inset-area Eigenschaft hat keine Auswirkungen auf ein gewöhnliches Element. Das liegt daran, dass sie Teil des CSS Anchor Positioning Moduls ist – einer Gruppe von Funktionen, die zusammenarbeiten, um ein Element, das wir „Target“ nennen, an einem anderen Element, dem „Anchor“, zu positionieren.

Hinweis: Laut Spezifikation wurde die Eigenschaft inset-area nun in position-area umbenannt. Browser, die Position Anchor bereits implementiert haben (bisher Chromium), verwenden jedoch weiterhin inset-area. Seien Sie also wachsam, da sich dies ändern kann!

Syntax

inset-area: auto | <inset-area>

Initialwert: none
Gilt für: positionierte Elemente mit einem Standard-Anker-Element
Vererbt: Nein
Prozentangaben: N/A
Berechneter Wert: Wie angegeben
Kanonische Reihenfolge: Gemäß Grammatik
Animation: TBD (noch nicht spezifiziert)

Werte

/* Default value */
inset-area: none;

/* Logical values */
inset-area: end start;
inset-area: block-start inline-end;
inset-area: self-block-start self-inline-end;

/* Physical Values */
inset-area: top center;
inset-area: bottom left;
inset-area: x-start y-end;

/* Span Values */
inset-area: center span-left; /* covers anchor */
inset-area: span-bottom right;
inset-area: top span-all;

/* Single Values */
inset-area: center;
inset-area: left;

none: Das .target-Element bewegt sich nicht und wird nicht in Relation zu einem Anker-Element positioniert.
<inset-area>: Platziert das .target in den durch Zeilen und Spalten ausgewählten Regionen des Gitters. Wenn das Target keine passende positon-anchor/anchor-name Beziehung zu einem Anker hat, hat dieser Wert keine Auswirkung.

Verstehen, was eine `inset-area` ist

Wie bereits erwähnt, erstellt die inset-area Eigenschaft ein imaginäres 3×3-Gitter, das wir nutzen können, um Target-Elemente entlang der Kanten von Anker-Elementen zu positionieren.

Three-by-three grid with a yellow element in the center tile labeled 'anchor'.

So nützlich diese Darstellung für das Verständnis des Konzepts der Anker-Positionierung auch ist, sie ist keine exakte Darstellung dessen, wie das Gitter tatsächlich aussieht. In der Realität ist das Gitter überhaupt nicht symmetrisch, sondern wird durch vier imaginäre Linien auf jeder Achse begrenzt, welche Folgendes einschließen:

Der start des Containing Blocks des Targets.
Der start des Anker-Elements oder anchor(start).
Das end des Anker-Elements oder anchor(end).
Das end des Containing Blocks des Targets.

Da Target-Elemente absolut positioniert sein müssen (d. h. position: absolute), ist ihr Containing Block der Viewport, wodurch das Standard-Gitter eher so aussieht:

Asymmetrical three-by-three grid spanning all viewport with a yellow element in the center tile labeled 'anchor'.

Nun, da wir wissen, wie unser Gitter wirklich aussieht, und wir die Verknüpfung von Elementen mit den Eigenschaften anchor-name und position-anchor beherrschen, ist der nächste Schritt, Ihr Target um Ihren Anker herum zu bewegen. Eine Möglichkeit besteht darin, die Inset-Eigenschaften des Targets (top, right, bottom, left usw.) zu manipulieren, aber manchmal möchten wir es einfach oben links am Anker oder direkt daneben platzieren, ohne auf Inset-Eigenschaften zurückzugreifen.

Die Eigenschaft inset-area nimmt Ihnen diese Last ab und positioniert das Target in der angegebenen Gitterregion. Dies geschieht durch Festlegen der Zeile und Spalte des Gitters unter Verwendung von logischen Werten wie start und end (abhängig vom Schreibmodus); physischen Werten wie top, left, right, bottom und dem gemeinsamen Wert center.

Three-by-three grid with a yellow element in the center tile labeled 'anchor' and a legend for each tile

Wenn wir also unser Target beispielsweise in der oberen rechten Ecke platzieren möchten, könnten wir inset-area: top right oder inset-area: start end (bei einem LTR Containing Block) schreiben.

.target {
	position: absolute;
	position-anchor: --my-anchor;

	inset-area: top right;
	/* or */
	inset-area: start end;
}

Um ein Target über zwei benachbarte Gitterregionen zu spannen, können wir das Präfix span- für jeden Wert (außer center) verwenden, jeweils für eine Zeile oder Spalte.

.target {
	position: absolute;
	position-anchor: --my-anchor;

	inset-area: span-top left;
	/* or */
	inset-area: span-start left;
}

Schließlich können wir mit dem Wert span-all über drei benachbarte Gitterregionen spannen.

.target {
	position: absolute;
	position-anchor: --my-anchor;

	inset-area: bottom span-all;
	/* or */
	inset-area: end span-all;
}

Die Reihenfolge der Werte spielt keine Rolle … außer wenn wir mit logischen Eigenschaften arbeiten

Es gibt mehr Werte, als man auf den ersten Blick sieht. Beispielsweise beziehen sich logische Werte auf den Schreibmodus des Containing Blocks des Targets; daher wird ein self- Präfix benötigt, um den eigenen Schreibmodus des Targets zu wählen.

.target {
  position: absolute;
  position-anchor: --my-anchor;

  inset-area: self-end self-start;
}

Ihnen ist vielleicht auch aufgefallen, dass die inset-area Eigenschaft keine strikte Reihenfolge für physische Werte vorschreibt. Technisch gesehen können wir diese Werte vertauschen, da sie dasselbe bedeuten. Zum Beispiel:

.target {
  inset-area: top left;
  /* same as: */
  inset-area: left top
}

Aber halt! Die Reihenfolge ist extrem wichtig, wenn wir stattdessen mit logischen Eigenschaftswerten arbeiten. Das liegt daran, dass die Richtung logischer Eigenschaftswerte relativ zum Schreibmodus einer Person ist (z. B. von rechts nach links).

.target {
  inset-area: start end; /* equates to "top" and "right" in LTR writing mode */
  /* is opposite of: */
  inset-area: end start /* equates to "bottom" and "left" in RTL writing mode */
}

Dies liegt daran, dass physische Werte eindeutig sind, auf welche Achse sie sich beziehen: top bezieht sich immer auf die „oberste Zeile“ des Gitters. Logische Werte hingegen sind mehrdeutig und hängen vom Kontext des Schreibmodus des Browsers ab. Daher legt der erste logische Wert die Zeile und der zweite Wert die Spalte fest.

Verwendung von „mehrdeutigen“ und „expliziten“ logischen Werten

Die Werte sind austauschbar, solange wir explizit angeben, auf welche Richtung sich die Werte beziehen, indem wir dem Wert inline- oder block- voranstellen:

.target {
  position: absolute; /* required */
  position-anchor: --my-anchor;

  inset-area: inline-end block-start;
  /* or */
  inset-area: block-start inline-end;
}

CSS weiß, in welche Richtung jeder Wert zielt, weil wir sehr explizit waren: Dieser hier gehört zur Inline-Richtung, und jener zur Block-Richtung. Daher spielt die Reihenfolge für CSS keine Rolle, da das Ergebnis in beiden Fällen gleich ist!

Was aber, wenn unsere Werte weniger deklarativ und stattdessen mehrdeutig in Bezug auf die Richtung sind? Ein „mehrdeutiger“ Wert wäre start oder end, da sie nicht explizit sagen, ob sie von der Inline- oder Block-Richtung sprechen. Wenn wir beispielsweise mehrdeutige und explizite Werte wie folgt mischen:

.target {
  inset-area: block-end start;
}

…wird CSS den mehrdeutigen Wert start als inline-start auswerten, da die Block-Richtung bereits durch den expliziten Wert block-end abgedeckt ist.

Und wenn wir zwei mehrdeutige logische Werte deklarieren würden:

.target {
  inset-area: start start;
}

…dann wird CSS den ersten Wert der Block-Richtung und den zweiten Wert der Inline-Richtung zuweisen, oder:

.target {
  inset-area: block-start inline-start;
}

Ein einzelner Wert impliziert das Schlüsselwort `span-all`

Nehmen wir aber an, wir geben nur einen Wert an, und zwar einen expliziten, zum Beispiel top:

.target {
  inset-area: top;
}

CSS wird das .target-Element entlang der top-Kante des Anker-Elements positionieren, es aber über alle Spalten spannen, um den gesamten Platz einzunehmen. Effektiv setzt das Deklarieren eines einzelnen expliziten top-Werts implizit das Schlüsselwort span-all für das Element, was dasselbe ist wie zu schreiben:

.target {
  inset-area: top span-all;
}

Demo

Spezifikation

Die Eigenschaft inset-area ist in der Spezifikation „CSS Anchor Positioning Module Level 1“ definiert, die sich zum Zeitpunkt der Erstellung dieses Textes im Status „Working Draft“ befindet. Das bedeutet, dass sich bis zu dem Zeitpunkt, an dem die Funktion eine formale „Candidate Recommendation“ für die Implementierung wird, noch viel ändern kann.