Wie verknüpfen Sie derzeit ein Element mit einem anderen? Sie können versuchen, ihre Positionen zu verfolgen oder eine Art Wrapper-Element zu verwenden.
<!-- index.html -->
<div class="container">
<a href="/link" class="anchor">I’m the anchor</a>
<div class="anchored">I’m the anchored thing</div>
</div>
/* styles.css */
.container {
position: relative;
}
.anchored {
position: absolute;
}
Diese Lösungen sind oft nicht ideal. Sie benötigen JavaScript oder zusätzliches Markup. Die CSS-API für die Ankerpositionierung soll dieses Problem lösen, indem eine CSS-API für das Anbinden von Elementen bereitgestellt wird. Damit können Sie ein Element basierend auf der Position und Größe anderer Elemente positionieren und skalieren.
Unterstützte Browser
Sie können die CSS-Positionierungs-API für Anker in Chrome Canary unter der Flagge „Experimentelle Webplattformfunktionen“ ausprobieren. Öffnen Sie dazu Chrome Canary und rufen Sie chrome://flags auf. Aktivieren Sie dann das Flag „Experimentelle Webplattformfunktionen“.
Das Team von Oddbird arbeitet außerdem an einer Polyfill-Entwicklung. Sehen Sie sich das Repository unter github.com/oddbird/css-anchor-positioning an.
So prüfen Sie, ob die Verankerung unterstützt wird:
@supports(anchor-name: --foo) {
/* Styles... */
}
Diese API befindet sich noch in der experimentellen Phase und kann sich ändern. In diesem Artikel werden die wichtigsten Teile allgemein beschrieben. Die aktuelle Implementierung entspricht außerdem nicht vollständig der Spezifikation der CSS-Arbeitsgruppe.
Das Problem
Warum ist das nötig? Ein prominenter Anwendungsfall wäre das Erstellen von Kurzinfos oder ähnlichen Elementen. In diesem Fall sollten Sie die Kurzinfo häufig an den Inhalt binden, auf den sie verweist. Oft ist es erforderlich, ein Element an ein anderes zu binden. Außerdem erwarten Sie, dass die Interaktion mit der Seite diese Verknüpfung nicht unterbricht, z. B. wenn ein Nutzer scrollt oder die Größe der Benutzeroberfläche ändert.
Ein weiteres Problem ist, dass das angedockte Element im Blickfeld bleiben soll, z. B. wenn Sie eine Kurzinfo öffnen und sie durch die Grenzen des Darstellungsbereichs abgeschnitten wird. Das ist für Nutzer möglicherweise nicht sehr praktisch. Sie möchten, dass sich die Kurzinfo anpasst.
Aktuelle Lösungen
Derzeit gibt es verschiedene Möglichkeiten, das Problem zu lösen.
Zuerst ist der rudimentäre Ansatz „Ankern umschließen“ an der Reihe. Sie legen beide Elemente in einen Container. Anschließend können Sie mit position die Kurzinfo relativ zum Anker positionieren.
<div class="containing-block">
<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>
</div>
.containing-block {
position: relative;
}
.tooltip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
}
Sie können den Container verschieben und alles bleibt größtenteils an der gewünschten Stelle.
Eine andere Möglichkeit besteht, wenn Sie die Position Ihres Ankers kennen oder sie irgendwie verfolgen können. Sie können sie mit benutzerdefinierten Eigenschaften an Ihre Kurzinfo übergeben.
<div class="tooltip">Anchor me!</div>
<a class="anchor">The anchor</a>
:root {
--anchor-width: 120px;
--anchor-top: 40vh;
--anchor-left: 20vmin;
}
.anchor {
position: absolute;
top: var(--anchor-top);
left: var(--anchor-left);
width: var(--anchor-width);
}
.tooltip {
position: absolute;
top: calc(var(--anchor-top));
left: calc((var(--anchor-width) * 0.5) + var(--anchor-left));
transform: translate(-50%, calc(-100% - 10px));
}
Aber was ist, wenn Sie die Position des Ankers nicht kennen? Sie müssen wahrscheinlich JavaScript verwenden. Sie könnten etwas Ähnliches wie im folgenden Code tun, aber das bedeutet, dass Ihre Stile aus CSS in JavaScript fließen.
const setAnchorPosition = (anchored, anchor) => {
const bounds = anchor.getBoundingClientRect().toJSON();
for (const [key, value] of Object.entries(bounds)) {
anchored.style.setProperty(`--${key}`, value);
}
};
const update = () => {
setAnchorPosition(
document.querySelector('.tooltip'),
document.querySelector('.anchor')
);
};
window.addEventListener('resize', update);
document.addEventListener('DOMContentLoaded', update);
Das wirft einige Fragen auf:
- Wann berechne ich die Stile?
- Wie berechne ich die Stile?
- Wie oft werden die Stile berechnet?
Wurde das Problem dadurch behoben? Das mag für Ihren Anwendungsfall zutreffen, aber es gibt ein Problem: Unsere Lösung passt sich nicht an. Es reagiert nicht. Was passiert, wenn mein angedocktes Element vom Darstellungsbereich abgeschnitten wird?
Jetzt müssen Sie entscheiden, ob und wie Sie darauf reagieren möchten. Die Anzahl der Fragen und Entscheidungen, die Sie treffen müssen, nimmt zu. Sie möchten einfach nur ein Element an ein anderes ankern. In einer idealen Welt passt sich Ihre Lösung an ihre Umgebung an und reagiert darauf.
Um diese Probleme zu vermeiden, können Sie eine JavaScript-Lösung verwenden. Das würde jedoch dazu führen, dass Ihrem Projekt eine Abhängigkeit hinzugefügt wird, was je nach Verwendung zu Leistungsproblemen führen kann. Einige Pakete verwenden beispielsweise requestAnimationFrame, um die Position korrekt zu halten. Das bedeutet, dass Sie und Ihr Team sich mit dem Paket und seinen Konfigurationsoptionen vertraut machen müssen. Daher werden Ihre Fragen und Entscheidungen möglicherweise nicht reduziert, sondern stattdessen geändert. Das ist einer der Gründe für die Positionierung von CSS-Ankern. So müssen Sie sich bei der Berechnung der Position nicht um Leistungsprobleme kümmern.
So könnte der Code für die Verwendung von floating-ui aussehen, einem beliebten Paket für dieses Problem:
import {computePosition, flip, offset, autoUpdate} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.1/+esm';
const anchor = document.querySelector('.anchor')
const tooltip = document.querySelector('.tooltip')
const updatePosition = () => {
computePosition(anchor, tooltip, {
placement: 'top',
middleware: [offset(10), flip()]
})
.then(({x, y}) => {
Object.assign(tooltip.style, {
left: `${x}px`,
top: `${y}px`
})
})
};
const clean = autoUpdate(anchor, tooltip, updatePosition);
Versuchen Sie, den Anker in dieser Demo neu zu positionieren, in der dieser Code verwendet wird.
Die Kurzinfo verhält sich möglicherweise nicht wie erwartet. Er reagiert, wenn der Darstellungsbereich auf der Y-Achse, aber nicht auf der X-Achse verlassen wird. In der Dokumentation finden Sie wahrscheinlich eine Lösung, die für Sie geeignet ist.
Es kann jedoch viel Zeit in Anspruch nehmen, ein Paket zu finden, das für Ihr Projekt geeignet ist. Es sind zusätzliche Entscheidungen erforderlich und es kann frustrierend sein, wenn es nicht ganz so funktioniert, wie Sie es sich wünschen.
Ankerpositionierung verwenden
Geben Sie die CSS-API für die Positionierung von Ankern ein. Das Ziel besteht darin, die Stile in Ihrem CSS zu belassen und die Anzahl der Entscheidungen zu reduzieren, die Sie treffen müssen. Sie möchten dasselbe Ergebnis erzielen, aber das Ziel besteht darin, die Entwicklerfreundlichkeit zu verbessern.
- JavaScript ist nicht erforderlich.
- Lassen Sie den Browser die beste Position anhand Ihrer Angaben ermitteln.
- Keine Abhängigkeiten mehr von Drittanbietern
- Keine Wrapper-Elemente.
- Funktioniert mit Elementen in der obersten Ebene.
Lassen Sie uns das Problem, das wir oben zu lösen versucht haben, noch einmal nachstellen und angehen. Verwenden Sie stattdessen die Analogie eines Bootes mit einem Anker. Sie stellen das verankerte Element und den Anker dar. Das Wasser steht für den enthaltenden Block.
Zuerst müssen Sie festlegen, wie der Anker definiert werden soll. Dazu können Sie in Ihrem CSS die Eigenschaft anchor-name für das Ankerelement festlegen. Es kann ein gestrichelter Wert verwendet werden.
.anchor {
anchor-name: --my-anchor;
}
Alternativ können Sie einen Anker in Ihrem HTML-Code mit dem anchor-Attribut definieren. Der Attributwert ist die ID des Ankerelements. Dadurch wird ein impliziter Anker erstellt.
<a id="my-anchor" class="anchor"></a>
<div anchor="my-anchor" class="boat">I’m a boat!</div>
Nachdem Sie einen Anker definiert haben, können Sie die Funktion anchor verwenden. Die anchor-Funktion verwendet drei Argumente:
- Anchor-Element:Der
anchor-namedes zu verwendenden Ankers. Sie können den Wert auch weglassen, um einenimplicit-Anker zu verwenden. Sie kann über die HTML-Beziehung oder mit eineranchor-default-Property mit einemanchor-name-Wert definiert werden. - Ankerseite:Ein Keyword für die gewünschte Position. Das kann
top,right,bottom,left,centerusw. sein. Du kannst auch einen Prozentsatz übergeben. 50% entspricht beispielsweisecenter. - Fallback:Dies ist ein optionaler Fallbackwert, der eine Länge oder einen Prozentsatz annehmen kann.
Die Funktion anchor wird als Wert für die Inset-Properties (top, right, bottom, left oder ihre logischen Äquivalente) des verankerten Elements verwendet. Sie können die Funktion anchor auch in calc verwenden:
.boat {
bottom: anchor(--my-anchor top);
left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));
}
/* alternative with anchor-default */
.boat {
anchor-default: --my-anchor;
bottom: anchor(top);
left: calc(anchor(center) - (var(--boat-size) * 0.5));
}
Es gibt keine center-Einzug-Eigenschaft. Wenn Sie die Größe des verankerten Elements kennen, können Sie calc verwenden. Warum sollte ich translate nicht verwenden? Sie können Folgendes verwenden:
.boat {
anchor-default: --my-anchor;
bottom: anchor(top);
left: anchor(center);
translate: -50% 0;
}
Der Browser berücksichtigt jedoch nicht die transformierten Positionen für verankerte Elemente. Das wird bei der Betrachtung von Fallback-Positionen und automatischer Platzierung deutlich.
Sie haben vielleicht schon bemerkt, dass oben das benutzerdefinierte Attribut --boat-size verwendet wird. Wenn Sie die Größe des angedockten Elements jedoch an die Größe des Ankers anpassen möchten, können Sie auch auf diese Größe zugreifen. Anstatt die Laufzeit selbst zu berechnen, können Sie die Funktion anchor-size verwenden. Wenn unser Boot beispielsweise viermal so breit wie der Anker sein soll, gehen wir so vor:
.boat {
width: calc(4 * anchor-size(--my-anchor width));
}
Mit anchor-size(--my-anchor height) hast du auch Zugriff auf die Höhe. Außerdem können Sie damit die Größe einer oder beider Achsen festlegen.
Was ist, wenn Sie ein Element mit absolute-Positionierung ankern möchten? Die Elemente dürfen keine Geschwister sein. In diesem Fall können Sie den Anker in einen Container mit relative-Positionierung einschließen. Dann können Sie sie anpinnen.
<div class="anchor-wrapper">
<a id="my-anchor" class="anchor"></a>
</div>
<div class="boat">I’m a boat!</div>
In dieser Demo können Sie den Anker verschieben und das Boot folgt ihm.
Scrollposition erfassen
In einigen Fällen befindet sich das Ankerelement in einem scrollbaren Container. Gleichzeitig befindet sich das verankerte Element möglicherweise außerhalb dieses Containers. Da das Scrollen in einem anderen Thread als dem Layout erfolgt, müssen Sie es erfassen können. Das ist mit der Property anchor-scroll möglich. Sie legen es auf dem verankerten Element fest und geben ihm den Wert des Ankers, den Sie erfassen möchten.
.boat { anchor-scroll: --my-anchor; }
In dieser Demo können Sie anchor-scroll über das Kästchen in der Ecke aktivieren und deaktivieren.
Die Analogie hinkt hier jedoch ein wenig, da in einer idealen Welt sowohl Ihr Boot als auch Ihr Anker im Wasser sind. Außerdem tragen Funktionen wie die Popover API dazu bei, ähnliche Elemente nah beieinander zu platzieren. Die Anlegeposition funktioniert jedoch mit Elementen in der obersten Ebene. Das ist einer der Hauptvorteile der API: Sie können Elemente in verschiedenen Abläufen verknüpfen.
Sehen Sie sich diese Demo mit einem scrollbaren Container mit Ankern mit Kurzinfos an. Die Pop-up-Tooltips sind möglicherweise nicht an derselben Stelle wie die Anker:
Sie werden jedoch feststellen, dass die Pop-ups ihre jeweiligen Ankerlinks erfassen. Sie können die Größe dieses scrollbaren Containers ändern. Die Positionen werden dann automatisch aktualisiert.
Fallback-Position und automatische Positionierung
Hier kommt die Kraft der Ankerpositionierung ins Spiel. Mit einem position-fallback kann Ihr verankertes Element anhand einer Reihe von von Ihnen bereitgestellten Fallbacks positioniert werden. Sie geben dem Browser mit Ihren Stilen die Richtung vor und lassen ihn die Position für Sie ermitteln.
Ein häufiger Anwendungsfall ist hier eine Kurzinfo, die entweder über oder unter einem Anker angezeigt werden soll. Dieses Verhalten hängt davon ab, ob die Kurzinfo von ihrem Container abgeschnitten wird. Dieser Container ist in der Regel der Viewport.
Wenn Sie sich den Code der letzten Demo genauer angesehen haben, haben Sie festgestellt, dass eine position-fallback-Property verwendet wurde. Wenn Sie im Container gescrollt haben, haben Sie möglicherweise festgestellt, dass diese verankerten Pop-ups gesprungen sind. Das passierte, wenn sich die jeweiligen Anker der Ansichtsgrenze näherten. In diesem Moment versuchen die Pop-ups, sich so anzupassen, dass sie im Darstellungsbereich bleiben.
Bevor Sie eine explizite position-fallback erstellen, können Sie mit der Ankerpositionierung auch eine automatische Positionierung vornehmen. Sie können diese Funktion kostenlos nutzen, indem Sie sowohl in der Ankerfunktion als auch in der gegenüberliegenden Inset-Property den Wert auto verwenden. Wenn Sie beispielsweise anchor für bottom verwenden, setzen Sie top auf auto.
.tooltip {
position: absolute;
bottom: anchor(--my-anchor auto);
top: auto;
}
Die Alternative zur automatischen Platzierung ist die Verwendung eines expliziten position-fallback. Dazu müssen Sie einen Fallback-Satz für die Position definieren. Der Browser sucht dann nach einer geeigneten Position und wendet sie an. Wenn keine funktionierende Verbindung gefunden werden kann, wird standardmäßig die erste definierte Verbindung verwendet.
Ein position-fallback, mit dem versucht wird, die Kurzinfos zuerst oben und dann unten anzuzeigen, könnte so aussehen:
@position-fallback --top-to-bottom {
@try {
bottom: anchor(top);
left: anchor(center);
}
@try {
top: anchor(bottom);
left: anchor(center);
}
}
Die Anwendung auf die Kurzinfos sieht so aus:
.tooltip {
anchor-default: --my-anchor;
position-fallback: --top-to-bottom;
}
Wenn Sie anchor-default verwenden, können Sie position-fallback für andere Elemente wiederverwenden. Sie können anchor-default auch mit einem benutzerdefinierten Attribut mit Bereich festlegen.
Sehen wir uns noch einmal die Demo mit dem Boot an. Es ist ein position-fallback festgelegt. Wenn Sie die Position des Ankers ändern, passt sich das Boot an, um innerhalb des Containers zu bleiben. Ändern Sie auch den Wert für den Abstand, um den Abstand des Body-Elements anzupassen. Beachten Sie, wie der Browser die Position korrigiert. Die Positionen werden durch Ändern der Rasterausrichtung des Containers geändert.
Die position-fallback ist diesmal ausführlicher und versucht, Positionen im Uhrzeigersinn zu finden.
.boat {
anchor-default: --my-anchor;
position-fallback: --compass;
}
@position-fallback --compass {
@try {
bottom: anchor(top);
right: anchor(left);
}
@try {
bottom: anchor(top);
left: anchor(right);
}
@try {
top: anchor(bottom);
right: anchor(left);
}
@try {
top: anchor(bottom);
left: anchor(right);
}
}
Beispiele
Sie haben nun eine Vorstellung von den wichtigsten Funktionen für die Positionierung von Ankern. Sehen wir uns nun einige interessante Beispiele an, die über Kurzinfos hinausgehen. Diese Beispiele sollen Ihnen Ideen dazu liefern, wie Sie die Positionierung von Ankern nutzen können. Die Spezifikation lässt sich am besten mit dem Input echter Nutzer wie Ihnen weiterentwickeln.
Kontextmenüs
Beginnen wir mit einem Kontextmenü mit der Popover API. Wenn Sie auf die Schaltfläche mit dem Dreistrich klicken, soll ein Kontextmenü angezeigt werden. Dieses Menü hat wiederum ein eigenes Menü, das maximiert werden kann.
Das Markup ist hier nicht der wichtige Teil. Sie haben jedoch drei Schaltflächen, die jeweils popovertarget verwenden. Sie haben dann drei Elemente mit dem Attribut popover. So können Sie die Kontextmenüs ohne JavaScript öffnen. Das könnte so aussehen:
<button popovertarget="context">
Toggle Menu
</button>
<div popover="auto" id="context">
<ul>
<li><button>Save to your Liked Songs</button></li>
<li>
<button popovertarget="playlist">
Add to Playlist
</button>
</li>
<li>
<button popovertarget="share">
Share
</button>
</li>
</ul>
</div>
<div popover="auto" id="share">...</div>
<div popover="auto" id="playlist">...</div>
Sie können jetzt eine position-fallback definieren und für alle Kontextmenüs verwenden. Außerdem entfernen wir alle inset-Stile für die Pop-ups.
[popovertarget="share"] {
anchor-name: --share;
}
[popovertarget="playlist"] {
anchor-name: --playlist;
}
[popovertarget="context"] {
anchor-name: --context;
}
#share {
anchor-default: --share;
position-fallback: --aligned;
}
#playlist {
anchor-default: --playlist;
position-fallback: --aligned;
}
#context {
anchor-default: --context;
position-fallback: --flip;
}
@position-fallback --aligned {
@try {
top: anchor(top);
left: anchor(right);
}
@try {
top: anchor(bottom);
left: anchor(right);
}
@try {
top: anchor(top);
right: anchor(left);
}
@try {
bottom: anchor(bottom);
left: anchor(right);
}
@try {
right: anchor(left);
bottom: anchor(bottom);
}
}
@position-fallback --flip {
@try {
bottom: anchor(top);
left: anchor(left);
}
@try {
right: anchor(right);
bottom: anchor(top);
}
@try {
top: anchor(bottom);
left: anchor(left);
}
@try {
top: anchor(bottom);
right: anchor(right);
}
}
So erhalten Sie eine adaptive, verschachtelte Benutzeroberfläche für das Kontextmenü. Versuchen Sie, die Inhaltsposition mit der Auswahl zu ändern. Die von Ihnen ausgewählte Option aktualisiert die Rasterausrichtung. Das wirkt sich darauf aus, wie die Pop-ups anhand der Ankerpositionierung positioniert werden.
Fokus und Verfolgung
In dieser Demo werden CSS-Primitive kombiniert, indem :has() verwendet wird. Ziel ist es, einen visuellen Indikator für die input zu ändern, die den Fokus hat.
Legen Sie dazu bei der Laufzeit einen neuen Anker fest. In dieser Demo wird eine benutzerdefinierte Property mit Bereich aktualisiert, wenn der Fokus auf die Eingabe gelegt wird.
#email {
anchor-name: --email;
}
#name {
anchor-name: --name;
}
#password {
anchor-name: --password;
}
:root:has(#email:focus) {
--active-anchor: --email;
}
:root:has(#name:focus) {
--active-anchor: --name;
}
:root:has(#password:focus) {
--active-anchor: --password;
}
:root {
--active-anchor: --name;
--active-left: anchor(var(--active-anchor) right);
--active-top: calc(
anchor(var(--active-anchor) top) +
(
(
anchor(var(--active-anchor) bottom) -
anchor(var(--active-anchor) top)
) * 0.5
)
);
}
.form-indicator {
left: var(--active-left);
top: var(--active-top);
transition: all 0.2s;
}
Aber wie könnten Sie das weiterführen? Du könntest es für eine Art Anleitungs-Overlay verwenden. Eine Kurzinfo kann zwischen POIs wechseln und ihren Inhalt aktualisieren. Du könntest die Inhalte per Crossfade überblenden. Hier eignen sich diskrete Animationen, mit denen Sie display oder Ansichtsübergänge animieren können.
Balkendiagramm – Berechnung
Eine weitere Möglichkeit ist die Kombination der Ankerpositionierung mit calc. Angenommen, Sie haben ein Diagramm mit Pop-ups, die das Diagramm ergänzen.
Sie können die höchsten und niedrigsten Werte mit den CSS-Werten min und max erfassen. Das CSS könnte in etwa so aussehen:
.chart__tooltip--max {
left: anchor(--chart right);
bottom: max(
anchor(--anchor-1 top),
anchor(--anchor-2 top),
anchor(--anchor-3 top)
);
translate: 0 50%;
}
Es wird JavaScript verwendet, um die Diagrammwerte zu aktualisieren, und CSS, um das Diagramm zu formatieren. Die Positionierung des Ankers sorgt jedoch dafür, dass das Layout automatisch aktualisiert wird.
Ziehpunkte zur Größenanpassung
Sie müssen nicht nur an einem Element verankern. Sie können für ein Element viele Anker verwenden. Das haben Sie vielleicht schon im Beispiel für Balkendiagramme bemerkt. Die Kurzinfos wurden am Diagramm und dann an der entsprechenden Balken verankert. Wenn Sie dieses Konzept ein wenig weiterführen, können Sie damit die Größe von Elementen ändern.
Sie können die Ankerpunkte wie benutzerdefinierte Größenänderungs-Ziehpunkte behandeln und einen inset-Wert verwenden.
.container {
position: absolute;
inset:
anchor(--handle-1 top)
anchor(--handle-2 right)
anchor(--handle-2 bottom)
anchor(--handle-1 left);
}
In dieser Demo werden die Ziehpunkte mit GreenSock Draggable beweglich gemacht. Das <img>-Element wird jedoch so skaliert, dass es den Container füllt, der sich an die Lücke zwischen den Ziehpunkten anpasst.
Ein SelectMenu?
Dieses letzte Bild ist ein kleiner Vorgeschmack auf das, was noch kommt. Sie können jedoch ein Pop-up-Fenster erstellen, das fokussiert werden kann. Sie könnten die Grundlagen für ein stilisierbares <select>-Element erstellen.
<div class="select-menu">
<button popovertarget="listbox">
Select option
<svg>...</svg>
</button>
<div popover="auto" id="listbox">
<option>A</option>
<option>Styled</option>
<option>Select</option>
</div>
</div>
Eine implizite anchor vereinfacht das. Das CSS für einen rudimentären Ausgangspunkt könnte jedoch so aussehen:
[popovertarget] {
anchor-name: --select-button;
}
[popover] {
anchor-default: --select-button;
top: anchor(bottom);
width: anchor-size(width);
left: anchor(left);
}
Wenn Sie die Funktionen der Popover API mit der CSS-Positionierung kombinieren, sind Sie schon fast am Ziel.
Es ist toll, wenn Sie Dinge wie :has() einführen. Sie können die Markierung in geöffnetem Zustand drehen:
.select-menu:has(:open) svg {
rotate: 180deg;
}
Wohin könnten Sie ihn als Nächstes bringen? Was brauchen wir sonst noch, damit das eine funktionierende select ist? Das besprechen wir im nächsten Artikel. Aber keine Sorge, es sind stilisierbare „select“-Elemente in Planung. Mehr dazu demnächst!
Geschafft!
Die Webplattform entwickelt sich weiter. Die Positionierung von CSS-Ankern ist ein wichtiger Schritt, um die Entwicklung von UI-Steuerelementen zu verbessern. So müssen Sie einige dieser schwierigen Entscheidungen nicht mehr treffen. Außerdem können Sie damit Dinge tun, die vorher nicht möglich waren. z. B. das Stilisieren eines <select>-Elements. Sag uns deine Meinung.
Foto von CHUTTERSNAP auf Unsplash