Eine dieser 'Onboarding' -Ver UIs mit Ankerpositionierung

Tauchen Sie in die faszinierende Welt der CSS -Ankerpositionierung! In diesem Tutorial wird diese innovative CSS-Funktion unter Verwendung von Juan Diego Rodriguez 'umfassender "Ankerpositionierungshandbuch" (verfügbar auf CSS-Tricks) als unsere Referenz untersucht.

Dies ist eine aufregende Entwicklung. Viele werden sich an die Auswirkungen des "Flexbox-Layout-Handbuchs" und des "Grid-Layout-Handbuchs" erinnern-unschätzbare Ressourcen, die ich immer noch regelmäßig benutze! Ich jongliere oft mehrere Registerkarten, um die korrekte Syntax in meinen Codepen -Experimenten zu gewährleisten.

Seit Juans Leitfaden habe ich mit CSS -Ankerpositionierung experimentiert, und ich bin bestrebt, meine Ergebnisse zu teilen, mehr zu erfahren, weiter zu experimentieren und natürlich Dinge zu bauen!

Einführung der CSS -Ankerpositionierung

Ankerpositionierung ermöglicht es uns, ein Element mit einem oder mehreren anderen zu verbinden - oder "Anker" zu verbinden. Entscheidend ist, dass , wie ein "Ziel" Element (das an einen Anker angehängte Element) relativ zum Anker positioniert ist, einschließlich Fallback-Positionierung über das @position-try AT-RULE.

Einfach ausgedrückt, die Ankerpositionierung verbessert die position: absolute; erheblich und hilft absolut positionierte Elemente vorhersehbar. Wir werden dies ausführlich untersuchen.

Derzeit ist eine W3C -Entwurfsspezifikation, die Ankerpositionierung ist relativ neu. Es ist in der Basislinie als "begrenzte Verfügbarkeit" ausgezeichnet, was bedeutet, dass es hauptsächlich von Browsern auf Chrombasis unterstützt wird (Version 125). ODDBird bietet jedoch eine hilfreiche Polyfill für eine breitere Browserkompatibilität.

Browser -Support -Details finden Sie auf caniuse.com. Eine Zahl gibt die Version an, in der die Unterstützung beginnt.

Desktop -Browser -Support

Mobile/Tablet Browser Support

Oddbird erstellt Polyfills für viele neue CSS -Funktionen. Unterstützen Sie ihre Arbeit an Github oder Open Collective!

tab Atkins-Bittner, ein Mitwirkender der W3C-Spezifikation, präsentierte die Ankerpositionierung am CSS-Tag 2024 (Video auf YouTube verfügbar). Juan demonstrierte seine Verwendung mit viewgetriebenen Animationen für einen schwimmenden Noteneffekt auf CSS-Tricks. Kevin Powell präsentierte kürzlich "CSS Popover Anchor Positioning" in einem Video, und Thomas Park erstellte Anchoreum (ein Spiel im Froggy-Stil im Flexbox-Stil), um die Ankerpositionierung zu unterrichten.

Die Zuordnung

Jetzt, da wir die CSS -Ankerpositionierung verstehen, lassen Sie uns seine Funktionalität untersuchen. Die Tethering -Elemente bieten ein immenses Potenzial und lösen viele Probleme, die zuvor mit komplexer absoluter Positionierung und z-index Anpassungen angegangen wurden.

untersuchen wir die grundlegende Syntax. Wir brauchen zwei Elemente: ein Ankerpositionierelement und sein gebundenes Ziel.

<div>
  Anchor
</div>
<div>
  Target
</div>

Wir bezeichnen ein ankerpositioniertes Element mit anchor-name, einem eindeutigen Namen (vorangestellt mit doppelten Strichen wie CSS-benutzerdefinierten Eigenschaften).

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

Das Zielelement erfordert position: absolute; und position-anchor (entspricht dem Anker anchor-name).

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

Diese Elemente sind jetzt verknüpft. position-area erstellt ein unsichtbares 3x3 -Gitter über dem Ankerelement, das eine präzise Zielplatzierung ermöglicht.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

Das Ziel ist jetzt in der oberen Zentren des Ankerelements verankert!

Pseudo-Elemente verankern

Pseudo-Elemente können wie normale Elemente verankert werden:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;

  &::before {
    content: "Target";
    position: absolute;
    position-anchor: --anchor;
    left: anchor(center);
    bottom: anchor(center);
  }
}

Dies ist nützlich, um visuelle Verbesserungen oder Indikatoren hinzuzufügen.

Verankerungsanker

Anker können mit anchor() Funktionen anstelle von position-area.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor-one;
  top: anchor(bottom);
  left: anchor(left);
}

Funktionen verwenden die berechneten Werte des Ankerelements. Hier entspricht die anchor() des Ziels mit der top des Ankers. Übergreifende Veränderungen bottom und glatte Übergänge sind möglich. position-anchor

Fortgeschrittene Experimente

Das Chrome-Team veröffentlichte neue Pseudo-Selektoren für

und <details></details> Elemente (<summary></summary>). Diese können auch verankert werden. Dies ist experimentell, zeigt aber das Potenzial. :details-content

Praktische Anwendungen

Erforschen wir die praktische Verwendung der CSS-Ankerpositionierung (derzeit nur Chrom).

Tooltips

Tooltips sind eine natürliche Passform. Wenn Sie über ein Symbol schweben, wird ein nahe gelegenes Etikett angezeigt. Der Artikel von Zell LEEW über Tooltip Best Practices bietet semantische Anleitung.

<button id="inbox-tool" class="tool" aria-labelledby="inbox-label">
  <svg></svg>
</button>
<div id="inbox-label" role="tooltip">Inbox</div>

Das Tooltip ist ein Geschwister des Ankerelements (

verbindet sie). CSS behandelt die Positionierung und Sichtbarkeit. aria-labelledby

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15binbox-tool {
  anchor-name: --inbox-tool;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15binbox-label {
  position: absolute;
  position-anchor: --inbox-tool;
  position-area: end center;
  visibility: hidden;
}

.tool:hover + [role="tooltip"],
.tool:focus-visible + [role="tooltip"] {
  visibility: visible;
}

Ein funktionierendes CSS-verankerter Tooltip! Betrachten Sie Toggletips für Berührungsgeräte.

schwimmende Offenlegungen

Offenlegungen (wie

/<summary></summary>

) profitieren von der Ankerpositionierung, insbesondere für schwimmende Elemente. Die Popover-API bietet eine nicht-modale, obere Schichtlösung mit Funktionen wie Lichtentsäulen. Zell Liew bietet weitere Informationen zu Popovers, Dialogen und Modalität.

Ein Dropdown -Menü Beispiel:

<div>
  Anchor
</div>
<div>
  Target
</div>

cs

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

Einkaufswagenkomponente

Kombinieren Sie frühere Techniken, können wir eine Einkaufswagenkomponente erstellen:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

CSS verankert den Tooltip, den Einkaufswagen -Dialog und das Abzeichen:

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

Drei Elemente, die an einen einzelnen Anker verankert sind!

kombiniert Techniken

Dieser Abschnitt zeigt die kombinierte Verwendung von Tooltips, Offenlegungen und Abzeichen, wobei die Leistung der Ankerpositionierung demonstriert wird.

Endes Projekt: Onboarding -Tool

Als letztes Projekt habe ich ein CSS-Anker-Positions-Onboarding-Tool (CodePen verfügbar) erstellt. Dies vermeidet die Komplexität meines früheren JavaScript-basierten Versuchs ("HandholdJs").

Ein benutzerdefiniertes Element

verwendet <hand-hold></hand-hold> Attribute, um Tourschritte zu definieren. JavaScript aktualisiert die Ankerpositionen dynamisch und ein Ansichtsübergang sorgt für reibungslose Übergänge. Dieses Projekt ist experimentell und nicht produktionsbereit, da ein begrenzter Browserunterstützung ist. data-tour-stop

Schlussfolgerung

CSS -Ankerpositionierung kann die CSS -Entwicklung revolutionieren, ähnlich wie Flexbox und Grid. Die Anwendungen sind groß und ich freue mich, zukünftige Innovationen aus der Community zu sehen.

Das obige ist der detaillierte Inhalt vonEine dieser 'Onboarding' -Ver UIs mit Ankerpositionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!