Wie verbinden Sie derzeit ein Element per Tethering mit einem anderen? Sie können versuchen, ihre Positionen zu verfolgen, oder ein Wrapper-Element 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 fügen zusätzliches Markup ein. Dieses Problem lässt sich mit der CSS Anchor Positioning API lösen, indem sie eine CSS API für Tethering-Elemente bereitstellt. Sie ermöglicht die Positionierung und Größe eines Elements basierend auf der Position und Größe der anderen Elemente.
Unterstützte Browser
Sie können die CSS Anchor Positioning API in Chrome Canary ausprobieren, die sich hinter den experimentellen Funktionen der Webplattform verbirgt. melden. Öffne Chrome Canary und rufe chrome://flags auf, um dieses Flag zu aktivieren. Aktivieren Sie dann die Option „Experimentelle Webplattform-Funktionen“. melden.
Das Oddbird-Team arbeitet derzeit an einem Polyfill in der Entwicklung. Überprüfen Sie das Repository unter github.com/oddbird/css-anchor-positioning.
So prüfen Sie, ob Verankerungen unterstützt werden:
@supports(anchor-name: --foo) {
/* Styles... */
}
Diese API befindet sich noch in der Testphase und kann sich ändern. In diesem Artikel werden die wichtigsten Teile ganz allgemein behandelt. Außerdem ist die aktuelle Implementierung nicht vollständig mit der Spezifikation der Preisvergleichsportal-Arbeitsgruppe synchron.
Das Problem
Warum sollten Sie das tun? Ein wichtiger Anwendungsfall ist das Erstellen von Kurzinfos oder beispielhaften Inhalten. In diesem Fall bietet es sich an, die Kurzinfo an den Inhalt anzubinden, auf den sie verweist. Häufig besteht die Notwendigkeit, ein Element per Tethering mit einem anderen zu verbinden. Sie erwarten außerdem, dass die Interaktion mit der Seite das Tethering nicht unterbricht, z. B. wenn ein Nutzer scrollt oder die Größe der Benutzeroberfläche ändert.
Ein weiteres Problem ist, dass das Tethering-Element immer sichtbar bleibt, z. B. wenn Sie eine Kurzinfo öffnen und es durch die Begrenzungen des Darstellungsbereichs abgeschnitten wird. Dies ist möglicherweise keine positive Nutzererfahrung. Die Kurzinfo soll angepasst werden.
Aktuelle Lösungen
Derzeit gibt es verschiedene Möglichkeiten, das Problem anzugehen.
Das erste ist das rudimentäre Konzept „Wrap the anchor“ Ansatz. Sie nehmen beide Elemente und verpacken sie in einem Container. Dann können Sie position verwenden, um die Kurzinfo relativ zum Anker zu 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. Alles bleibt dann größtenteils an der gewünschten Stelle.
Eine andere Möglichkeit wäre, die Position des Ankers zu kennen oder sie zu verfolgen. 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? Wahrscheinlich müssen Sie mit JavaScript eingreifen. Sie könnten einen Vorgang wie den folgenden Code ausführen, aber das bedeutet jetzt, dass Ihre Stile aus CSS und in JavaScript austreten.
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);
Dies wirft einige Fragen auf:
- Wann berechne ich die Stile?
- Wie berechne ich die Stile?
- Wie oft berechne ich die Stile?
Ist das Problem damit behoben? Das mag für Ihren Anwendungsfall relevant sein, aber es gibt ein Problem: Unsere Lösung passt sich nicht an. Sie reagiert nicht. Was passiert, wenn mein verankertes 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, wächst. Sie möchten lediglich ein Element an einem anderen verankern. Im Idealfall passt sich Ihre Lösung an die Umgebung an und reagiert darauf.
Um einige dieser Probleme zu entlasten, könnten Sie nach einer JavaScript-Lösung greifen, die Ihnen hilft. Dies verursacht Kosten für das Hinzufügen einer Abhängigkeit zu Ihrem Projekt und kann je nach Verwendung zu Leistungsproblemen führen. Bei einigen Paketen wird beispielsweise requestAnimationFrame verwendet, um die Position korrekt zu halten. Das bedeutet, dass Sie und Ihr Team sich mit dem Paket und seinen Konfigurationsoptionen vertraut machen müssen. Infolgedessen werden Ihre Fragen und Entscheidungen möglicherweise nicht reduziert, sondern angepasst. Dies ist Teil des „Warum“, für die Positionierung von CSS-Ankern. So können Sie bei der Berechnung der Position nicht mehr über Leistungsprobleme nachdenken.
So könnte der Code bei Verwendung des beliebten Pakets floating-ui für dieses Problem aussehen:
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 nicht wie erwartet verhalten. Sie reagiert auf den Weg außerhalb des Darstellungsbereichs auf der y-Achse, aber nicht auf die x-Achse. Lies dir die Dokumentation durch. Dort findest du wahrscheinlich eine Lösung, die für dich funktioniert.
Es kann jedoch viel Zeit in Anspruch nehmen, ein Paket zu finden, das für Ihr Projekt funktioniert. Das bedeutet zusätzliche Entscheidungen. Es kann frustrierend sein, wenn es nicht so funktioniert, wie Sie es sich wünschen.
Ankerpositionierung verwenden
Geben Sie die CSS Anchor Positioning API ein. Der Gedanke dabei ist, Ihre Stile in Ihrem CSS-Code beizubehalten und die Anzahl der Entscheidungen zu reduzieren, die Sie treffen müssen. Sie hoffen, das gleiche Ergebnis zu erzielen, aber das Ziel ist es, die Erfahrung für Entwickler zu verbessern.
- JavaScript ist nicht erforderlich.
- Lassen Sie den Browser anhand Ihrer Anweisungen die beste Position ermitteln.
- Keine Abhängigkeiten von Drittanbietern mehr
- Keine Wrapper-Elemente
- Funktioniert mit Elementen, die sich im obersten Layer befinden.
Lassen Sie uns das Problem reproduzieren und angehen, das wir oben lösen wollten. Verwenden Sie stattdessen die Analogie eines Bootes mit einem Anker. Sie stellen das verankerte Element und den Anker dar. Das Wasser stellt den dichten Block dar.
Zuerst müssen Sie auswählen, wie der Anker definiert werden soll. Legen Sie dazu in Ihrem CSS die Eigenschaft anchor-name für das Anchor-Element fest. Als Wert wird ein gestrichelter Wert akzeptiert.
.anchor {
anchor-name: --my-anchor;
}
Alternativ können Sie mit dem Attribut anchor einen Anker in Ihrem HTML-Code 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. Für die Funktion anchor sind drei Argumente erforderlich:
- Anchor-Element:Der
anchor-namedes Ankers, der verwendet werden soll. Sie können den Wert auch weglassen, um einenimplicit-Anker zu verwenden. Sie kann über die HTML-Beziehung oder mit eineranchor-default-Eigenschaft mit einemanchor-name-Wert definiert werden. - Ankerseite:Ein Keyword für die Position, die Sie verwenden möchten. Das können
top,right,bottom,left,centerusw. sein. Sie können auch einen Prozentsatz übergeben. 50% sind beispielsweise gleichcenter. - Fallback: Dies ist ein optionaler Fallback-Wert, für den eine Länge oder ein Prozentsatz zulässig ist.
Sie verwenden die anchor-Funktion als Wert für die eingesetzten Eigenschaften (top, right, bottom, left oder ihre logischen Entsprechungen) des verankerten Elements. Sie können auch die Funktion anchor 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));
}
Da es keine center-Inset-Eigenschaft gibt, können Sie calc verwenden, wenn Sie die Größe des verankerten Elements kennen. Warum nicht translate? Sie können Folgendes verwenden:
.boat {
anchor-default: --my-anchor;
bottom: anchor(top);
left: anchor(center);
translate: -50% 0;
}
Der Browser berücksichtigt jedoch keine transformierten Positionen für verankerte Elemente. Es wird deutlich, warum dies bei der Berücksichtigung von Positions-Fallbacks und der automatischen Positionierung wichtig ist.
Vielleicht ist dir schon aufgefallen, dass du die benutzerdefinierte Eigenschaft --boat-size oben verwendest. Wenn die Größe des verankerten Elements jedoch auf der Größe des Ankers basieren soll, können Sie auch auf diese Größe zugreifen. Anstatt sie selbst zu berechnen, können Sie die Funktion anchor-size verwenden. So machen Sie unser Boot beispielsweise viermal so breit wie der Anker:
.boat {
width: calc(4 * anchor-size(--my-anchor width));
}
Mit anchor-size(--my-anchor height) haben Sie auch Zugriff auf die Höhe. Außerdem können Sie die Größe einer oder beider Achsen festlegen.
Wie können Sie bei einem Element mit absolute-Positionierung verankern? Die Regel besagt, dass die Elemente nicht gleichgeordnet sein dürfen. In diesem Fall können Sie den Anker mit einem Container mit relative-Positionierung umschließen. Dann können Sie es verankern.
<div class="anchor-wrapper">
<a id="my-anchor" class="anchor"></a>
</div>
<div class="boat">I’m a boat!</div>
Sehen Sie sich diese Demo an, in der Sie den Anker bewegen können, damit das Boot folgt.
Scrollposition wird erfasst
In einigen Fällen kann sich Ihr Ankerelement in einem scrollbaren Container befinden. Gleichzeitig kann sich das verankerte Element außerhalb dieses Containers befinden. Da das Scrollen in einem anderen Thread als das Layout erfolgt, müssen Sie eine Möglichkeit zum Verfolgen des Scrollens haben. Mit der Eigenschaft anchor-scroll ist das möglich. Sie legen ihn für das verankerte Element fest und geben ihm den Wert des Ankerelements, das Sie verfolgen möchten.
.boat { anchor-scroll: --my-anchor; }
In dieser Demo kannst du anchor-scroll über das Kästchen in der Ecke ein- und ausschalten.
Die Analogie ist hier jedoch ein wenig flach, da sich im Idealfall beide Boote und Anker im Wasser befinden. Außerdem fördern Funktionen wie die Popover API die Möglichkeit, verwandte Elemente nah zu halten. Die Positionierung von Ankern funktioniert jedoch bei Elementen, die sich im obersten Layer befinden. Dies ist einer der größten Vorteile hinter der API: Elemente können in verschiedenen Abläufen per Tethering verbunden werden.
Sehen Sie sich diese Demo an, die einen scrollbaren Container mit Ankern mit Kurzinfos enthält. Die Kurzinfo-Elemente, bei denen es sich um Pop-over handelt, werden möglicherweise nicht zusammen mit den Ankern platziert:
Sie werden jedoch feststellen, wie die jeweiligen Ankerlinks von den Popovers verfolgt werden. Sie können die Größe dieses scrollbaren Containers anpassen. Die Positionen werden automatisch aktualisiert.
Fallback und automatische Positionierung positionieren
Hier steigt die Stärke der Positionierung von Ankern um ein Niveau. Ein position-fallback kann Ihr verankertes Element basierend auf einem von Ihnen angegebenen Fallback-Satz positionieren. Sie leiten den Browser mit Ihren Stilen an und lassen ihn die Position für Sie bestimmen.
Häufig wird hier eine Kurzinfo verwendet, die zwischen der Anzeige über und unter einem Anker wechseln sollte. Dieses Verhalten hängt davon ab, ob die Kurzinfo durch ihren Container abgeschnitten wird. Dieser Container ist normalerweise der Darstellungsbereich.
Wenn Sie sich den Code der letzten Demo genauer angesehen haben, werden Sie feststellen, dass eine position-fallback-Property verwendet wird. Wenn Sie durch den Container gescrollt haben, haben Sie vielleicht bemerkt, dass die verankerten Popovers springen. Dies war der Fall, wenn sich die jeweiligen Anker der Begrenzung des Darstellungsbereichs näherten. In diesem Moment versuchen die Popovers, sich so anzupassen, dass sie im Darstellungsbereich bleiben.
Vor dem Erstellen eines expliziten position-fallback bietet die Ankerposition auch eine automatische Positionierung an. Sie können diese Spiegelung kostenlos erhalten, indem Sie einen Wert von auto sowohl in der Anchor-Funktion als auch in der gegenüberliegenden eingefügten Eigenschaft verwenden. Wenn Sie beispielsweise anchor für bottom verwenden, legen Sie top auf auto fest.
.tooltip {
position: absolute;
bottom: anchor(--my-anchor auto);
top: auto;
}
Die Alternative zur automatischen Positionierung ist die Verwendung eines expliziten position-fallback. Dazu müssen Sie einen Positions-Fallback-Satz definieren. Der Browser geht dann so lange durch, bis er einen passenden findet, den er verwenden kann, und wendet dann diese Positionierung an. Wenn kein passendes Ergebnis gefunden wird, wird standardmäßig das zuerst festgelegte verwendet.
Ein position-fallback, der versucht, die Kurzinfos oben und 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;
}
Die Verwendung von anchor-default bedeutet, dass du das position-fallback für andere Elemente wiederverwenden kannst. Sie können auch ein benutzerdefiniertes Attribut auf Umfang verwenden, um anchor-default festzulegen.
Sehen Sie sich diese Demo noch einmal an. Es ist ein position-fallback festgelegt. Wenn Sie die Position des Ankers ändern, passt sich das Boot so an, dass es im Container bleibt. Versuchen Sie, auch den Padding-Wert zu ändern, wodurch sich der Text-Padding-Wert anpasst. Beachten Sie, wie der Browser die Positionierung korrigiert. Die Positionen werden durch Ändern der Rasterausrichtung des Containers geändert.
Die position-fallback ist diesmal ausführlicher, wenn du Positionen im Uhrzeigersinn versuchst.
.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 Ankeranzeigen. Sehen wir uns einige interessante Beispiele neben den Kurzinfos an. Diese Beispiele zielen darauf ab, Ihre Ideen zum Fließen zu bringen und die Positionierung von Ankeranzeigen zu nutzen. Wenn Sie die Spezifikationen noch weiter ausbauen möchten, sollten Sie die Unterstützung von echten Nutzern wie Ihnen berücksichtigen.
Kontextmenüs
Beginnen wir mit einem Kontextmenü, das die Popover API verwendet. Wenn Sie auf die Schaltfläche mit dem Chevron klicken, wird ein Kontextmenü eingeblendet. Dieses Menü hat dann 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. Dann gibt es drei Elemente, die das Attribut popover verwenden. Dadurch 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>
Jetzt können Sie ein position-fallback definieren und von den Kontextmenüs gemeinsam nutzen. Außerdem müssen alle inset-Stile für die Pop-over aufgehoben werden.
[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);
}
}
Dadurch erhalten Sie eine adaptive verschachtelte Benutzeroberfläche für das Kontextmenü. Versuchen Sie, die Inhaltsposition mit der Auswahl zu ändern. Durch die ausgewählte Option wird die Rasterausrichtung aktualisiert. Dies wirkt sich auf die Positionierung von Ankeranzeigen aus.
Konzentrieren und folgen
In dieser Demo werden CSS-Primitive durch Einbinden von :has() kombiniert. Die Idee dabei ist, einen visuellen Indikator für das hervorgehobene input zu ändern.
Legen Sie dazu zur Laufzeit einen neuen Anker fest. In dieser Demo wird eine auf einen Bereich reduzierte benutzerdefinierte Eigenschaft anhand des Eingabefokus aktualisiert.
#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 noch weitergehen? Sie könnten es für eine Form von eingeblendeten Anleitungen verwenden. Eine Kurzinfo kann sich zwischen POIs bewegen und ihren Inhalt aktualisieren. Sie könnten den Inhalt überblenden. Hier können Sie diskrete Animationen verwenden, mit denen Sie display animieren oder Übergänge ansehen können.
Balkendiagramm berechnen
Außerdem haben Sie die Möglichkeit, die Ankerpositionierung mit calc zu kombinieren. Stellen Sie sich ein Diagramm mit einigen Pop-overs vor, die das Diagramm mit Anmerkungen versehen.
Sie könnten die höchsten und niedrigsten Werte mithilfe der CSS-Attribute min und max erfassen. Das CSS dafür 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 gibt JavaScript-Code, um die Diagrammwerte zu aktualisieren, und CSS, um das Diagramm zu gestalten. Die Positionierung von Ankern übernimmt für uns jedoch die Aktualisierung des Layouts.
Ziehpunkte zur Größenanpassung
Sie müssen nicht nur bei einem einzigen Element verankern. Sie können für ein Element mehrere Anker verwenden. Vielleicht haben Sie dies im Beispiel mit dem Balkendiagramm bemerkt. Die Kurzinfos waren am Diagramm und dann am entsprechenden Balken verankert. Wenn Sie dieses Konzept noch ein wenig weiter fortgeschritten haben, könnten Sie es verwenden, um die Größe der Elemente zu ändern.
Sie könnten die Ankerpunkte wie benutzerdefinierte Ziehpunkte zur Größenanpassung behandeln und einen inset-Wert heranziehen.
.container {
position: absolute;
inset:
anchor(--handle-1 top)
anchor(--handle-2 right)
anchor(--handle-2 bottom)
anchor(--handle-1 left);
}
In dieser Demo macht GreenSock Draggable die Ziehpunkte ziehbar. Die Größe des <img>-Elements wird jedoch so angepasst, dass der Container ausgefüllt wird. Dieser wird so angepasst, dass die Lücke zwischen den Ziehpunkten ausgefüllt wird.
Ein Auswahlmenü?
Die letzte Frage ist ein kleiner Vorgeschmack auf das, was sie erwartet. Sie können jedoch ein fokussierbares Popover erstellen und haben jetzt die Positionierung von Ankern. So könntest du die Grundlagen für ein anpassbares <select>-Element schaffen.
<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 macht dies einfacher. Das CSS für einen rudimentären Ausgangspunkt könnte jedoch wie folgt aussehen:
[popovertarget] {
anchor-name: --select-button;
}
[popover] {
anchor-default: --select-button;
top: anchor(bottom);
width: anchor-size(width);
left: anchor(left);
}
Kombinieren Sie die Funktionen der Popover API mit der CSS-Ankerpositionierung und schon sind Sie nah dran.
Es ist toll, wenn du anfängst, Dinge wie :has() einzuführen. Sie könnten die Markierung beim Öffnen drehen:
.select-menu:has(:open) svg {
rotate: 180deg;
}
Wie könntest du es als Nächstes einschlagen? Was brauchen wir noch, damit diese select funktionieren? Das speichern wir im nächsten Artikel. Aber keine Sorge, es wird bald auch anpassbare ausgewählte Elemente geben. Mehr dazu demnächst!
Geschafft!
Die Webplattform entwickelt sich ständig weiter. Die Positionierung von CSS-Ankern ist ein entscheidender Bestandteil bei der Entwicklung von UI-Steuerelementen. Es wird Sie von einigen dieser kniffligen Entscheidungen abstrahieren. Aber es ermöglicht Ihnen auch, Dinge zu tun, die Sie vorher noch nicht einmal hatten. Zum Beispiel die Gestaltung eines <select>-Elements. Sag uns deine Meinung.
Foto von CHUTTERSNAP auf Unsplash