Sidenotes mit CSS Anchor Positioning: Randnotizen ohne JavaScript

Notizen im Seitenrand brauchten auf Websites bisher JavaScript oder Notiztext mitten im Absatz. Der Entwickler Vincent Bernat heftet solche Notizen per CSS Anchor Positioning an ihre Fundstelle im Text, auf schmalen Bildschirmen rückt der Notiztext unter den Absatz. Den Kern der Technik unterstützen seit Firefox 147 alle großen Browser.

Eine Fußnote kostet den Leser zwei Sprünge: hinunter zum Seitenende und zurück zu der Zeile, an der er aufgehört hat. CSS Anchor Positioning erspart beide Wege, weil der Browser die Notiz auf Höhe des Verweiszeichens in den Seitenrand setzt. Bernat beschreibt das Verfahren in seinem Blog und nutzt die Randnotizen auf seiner eigenen Website.^[1]

Wie heftet CSS eine Notiz an ihre Fundstelle?

Das Verweiszeichen im Text erhält per anchor-name einen Ankernamen, die Notiz wählt diesen Anker per position-anchor aus. Die Funktion anchor(top) setzt die Oberkante der Notiz auf die Höhe des Verweiszeichens, die Eigenschaft left schiebt die Notiz rechts neben die Textspalte.^[1]

Im HTML steht die Notiz als eigenes Element aside mit role=“note“ direkt hinter dem Absatz, der das Verweiszeichen enthält. Den Ankernamen liest die CSS-Funktion attr() aus einem data-Attribut, per Typangabe custom-ident als Bezeichner statt als Text.

Gegen überlappende Notizen hilft eine einzige Zeile: Jede Notiz trägt zusätzlich einen gemeinsamen Ankernamen, über den die folgende Notiz die Unterkante ihrer Vorgängerin abfragt. Die Funktion max() wählt den größeren Wert aus der Höhe des eigenen Verweiszeichens und der Unterkante der vorigen Notiz plus einer Zeilenhöhe. Bei dicht liegenden Verweisen rutscht die zweite Notiz deshalb nach unten.

Die Randposition greift erst ab 72 rem Fensterbreite und nur in Browsern, die die Technik beherrschen. Sonst bleibt die Notiz in gedämpfter Schriftfarbe unter ihrem Absatz. Die Technik reiht sich in eine Serie nativer CSS-Funktionen ein, die frühere Hilfsmittel ablösen, von text-fit für die Schriftgröße bis zu den zwölf Funktionen ohne Build-Schritt.

Was unterscheidet den Ansatz von Tufte CSS?

Tufte CSS setzt den Notiztext als span-Element mitten in den Absatz und blendet die Notiz auf kleinen Bildschirmen erst nach einem Klick ein. Bernats Notizen stehen als vollständige Blöcke hinter dem Absatz und dürfen mehrere Absätze umfassen.^[4][1]

Die Reihenfolge im Quelltext bestimmt, wie Screenreader, Textbrowser und Lesemodi eine Seite ausgeben. Eine Notiz im span-Element unterbricht dort den Satz, in dem sie steht. Das aside-Element hinter dem Absatz liest ein Screenreader erst, nachdem der Gedanke abgeschlossen ist.^[1]

Eric Meyer führte die Grundidee im September 2023 unter dem Titel „Nuclear Anchored Sidenotes“ vor.^[5] Unter Meyers Beitrag schreibt Bernat, dass er seine Notizen zuvor über den Absatz setzen musste und auf schmalen Bildschirmen deshalb auf Endnoten auswich.

Worauf sollten Teams in Deutschland achten?

Die CSS-Bausteine anchor-name und anchor() gelten seit dem 13. Januar 2026 als Baseline: An diesem Tag zog Firefox 147 als letzter großer Browser nach. Das typisierte attr() unterstützen laut web-features erst Chrome und Edge ab Version 133 sowie Firefox ab Version 155.^[2][3]

Für Safari verzeichnen die Kompatibilitätsdaten des Projekts web-features in Version 3.40.0 noch keine Unterstützung der Typangabe, Bernat selbst nennt Safari 27.^[2] Weil Bernats @supports-Abfrage genau diese Typangabe prüft, zeigt ein Browser ohne typisiertes attr() die Notizen unter dem Absatz. Mehr Reichweite bringt Bernats Alternative mit dem Ankernamen als style-Attribut im HTML.

Ein Sonderfall betrifft Firefox ESR, die Langzeitversion für Organisationen: Version 140 kennt Anchor Positioning nicht, der am 21. Juli 2026 erschienenen Version 153 fehlt noch das typisierte attr().^[3][6] Firmen und Verwaltungen mit einer der beiden Versionen sehen Randnotizen nach Bernats Muster deshalb unter dem Absatz. In Deutschland kam Firefox im August auf 8,54 % Marktanteil, weltweit auf 2,98 %.^[7]

Für die Barrierefreiheit nach dem Barrierefreiheitsstärkungsgesetz zählt die Reihenfolge im Quelltext: WCAG 2.1 verlangt im Erfolgskriterium 1.3.2, dass eine sinntragende Lesereihenfolge maschinell erkennbar bleibt. Eine Notiz hinter dem Absatz hält diese Reihenfolge ein, gleich ob der Browser die Notiz im Rand oder darunter zeigt.

Für den Einstieg empfiehlt sich dieses Vorgehen:

• Die Randposition per @supports und Media Query absichern, damit ältere Browser die Notiz unter dem Absatz zeigen.
• In der eigenen Webanalyse die Anteile von Firefox ESR und älteren Safari-Versionen ablesen, bevor Sie zwischen attr() und style-Attribut wählen.

Anchor Positioning ersetzt bereits Tooltip-Bibliotheken. Welche Browser im deutschsprachigen Raum verbreitet sind, zeigt der Browser-Vergleich für den DACH-Raum.

Quellen

Mehr Newshunger?

• GitHub verbessert die Website-Performance mit mehr CSS statt CSS-in-JS
• Die letzte Zeile im responsiven CSS-Raster füllen
• Warum Ihre Zahlen falsch aussehen: die vier CSS-Schalter für saubere Ziffern
• field-sizing in CSS: Wie Formularfelder ohne JavaScript mitwachsen
• State of CSS 2026: Nur 28 Prozent des CSS kommen von der KI