Anchor notes

Die Idee

Ein Foto kann mehrere Geschichten erzählen. Drei Markierungen zeigen Notizen zu Licht, Komposition und Größenverhältnissen. Verschiebe die Markierungen mit dem Regler: Eine geöffnete Notiz folgt ihrem Anker.

Zwei Browserfunktionen im Zusammenspiel

Die Popover API zeigt die Notiz in der obersten Darstellungsebene des Browsers, oberhalb begrenzender Container. Ein nativer Button öffnet sie; Escape oder ein Klick außerhalb schließt sie. CSS Anchor Positioning richtet die Notiz an ihrer Markierung aus und bietet Ausweichpositionen, wenn der Platz knapp wird.

<button popovertarget="ridge" style="anchor-name: --ridge">  01</button><div id="ridge" popover style="position-anchor: --ridge">  The ridge gives the eye a quiet place to land.</div>

[popover] {  position: fixed;  inset: auto;  position-area: top;  position-try-fallbacks: flip-block, flip-inline;  margin: 12px;}

Ausprobieren

Öffne eine Notiz und verschiebe anschließend die Markierungen. Verkleinere das Fenster und öffne die oberste Markierung. Der Browser entscheidet, wo die Notiz Platz findet. Dafür braucht es keine JavaScript-Schleife zum Vermessen.

Unterstützung und Zugänglichkeit

Die Markierungen sind echte Buttons mit aussagekräftigen Namen. Native Popover lassen sich mit Escape oder einem Klick außerhalb schließen. Ohne Anchor Positioning erscheint die Notiz mittig. Fehlt auch die Popover API, bleiben die Notizen über einen einfachen Umschalter und einen Schließen-Button erreichbar.

Das Muster eignet sich für Anmerkungen, kontextbezogene Hilfe und kleine Menüs. Wichtige Informationen sollten trotzdem im Dokument sichtbar bleiben.

Weiterlesen

• Using the Popover API — MDN
• CSS position-area — MDN