Kommt Ihnen das bekannt vor? Ein Dropdown-Menü hängt am falschen Rand des Viewports, ein Tooltip springt beim Scrollen weg, und im Bundle Ihres CMS sitzen 16 Kilobyte Bibliothekscode für eine Funktion, die der Browser inzwischen selbst beherrscht. Die CSS Anchor Positioning-API hat 2026 in allen großen Browser-Engines Baseline-Status erreicht und löst eines der ältesten Probleme im Frontend.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Wichtigste in Kürze
- Chrome 125+, Firefox 132+ und Safari 18.2+ unterstützen die API ohne Flags.
- Tooltips, Dropdowns und Popover entstehen mit drei CSS-Eigenschaften statt JavaScript-Berechnungen.
- Kombiniert mit dem Popover-Attribut entfällt auch die Toggle-Logik im JavaScript.
- Bibliotheken wie Floating UI bleiben nur für Spezialfälle wie virtualisierte Listen oder Shadow-DOM-Tooltips relevant.
Was die API technisch löst
Drei Bausteine reichen für 80 Prozent aller Tooltip- und Dropdown-Fälle: anchor-name markiert das Bezugselement, position-anchor verknüpft das schwebende Element damit, und position-area bestimmt die Lage. Ein Klassiker wie „Tooltip oben mittig über dem Button“ reduziert sich auf wenige Zeilen Code, die der Browser zuverlässig auch beim Scrollen, Resize und in scrollbaren Containern korrekt auflöst. Wer sich für die übergeordneten Designentscheidungen interessiert, findet im Webdesign Trends 2026-Überblick die strategische Einordnung dieser Verschiebung.
Warum das den Tech-Stack verändert
Bundle-Diät: Floating UI Core liefert pro Woche über 23 Millionen npm-Downloads. Jedes dieser Projekte trägt einen Layout-Berechner mit, den der Browser inzwischen nativ leistet. Für ein typisches WordPress-Theme mit Mega-Menü, Tooltips und Filter-Dropdowns summiert sich das auf 40 bis 80 Kilobyte JavaScript, die schlicht entfallen. Wer ohnehin schon mit modernen CSS Container Queries arbeitet, kennt das Muster: Layoutlogik wandert vom Skript ins Stylesheet, und mit ihr verschwindet eine ganze Klasse von Bugs.
Fallback und progressive Verbesserung
Sicherheitsnetz: Mit @supports (anchor-name: --a) lassen sich ältere Browser auf konservative position: absolute-Regeln zurückführen. Auf 91 Prozent des Traffics greift die native Implementierung. Für die restlichen 9 Prozent kippt der Tooltip in der Regel an eine Standardposition, ohne dass der Nutzer es bemerkt. Die @position-try-Regel sorgt zusätzlich dafür, dass am Viewport-Rand automatisch geflippt wird, statt aus dem Bildschirm zu rutschen.
Wenn der Browser eine Aufgabe besser löst als jede Bibliothek, wird es Zeit, die Bibliothek aus dem Bundle zu werfen. Bei Anchor Positioning sind wir an genau diesem Punkt.
— Michael Dobler, Herausgeber Dr. Web
Was Sie jetzt prüfen sollten
Audit: Sehen Sie sich Ihr Bundle an. Falls dort Floating UI, Popper.js, Tippy.js oder eine eigene Tooltip-Routine sitzt, klären Sie mit Ihrem Frontend-Team, welche Komponenten umgestellt werden können. Bei einem Relaunch ist die Migration ein Ein-Tages-Job und reduziert messbar das JavaScript-Volumen. Der ausführliche Einführungsartikel im Chrome-Developer-Blog erklärt die Detailfälle. Wer parallel an responsivem Design ohne Media-Query-Chaos arbeitet, profitiert doppelt, weil beide Verschiebungen denselben Geist atmen: Weniger JavaScript, mehr deklaratives CSS.
Mehr Newshunger?
