Terence Eden hat sich damit beschäftigt, wie man Fußnoten mit den Elementen <details>/<summary> erstellt. Ich finde es ziemlich clever. Anstatt eines Hyperlinks, der nach unten springt, um die Fußnote woanders zu erklären, sind die Details direkt neben dem Text vorhanden. Ich mag diese Nähe im Code. Außerdem hat man die native Öffnen/Schließen-Interaktivität des Offenlegungs-Widgets.
Es gibt jedoch einige knifflige Stellen. Das <details>-Element ist blockorientiert, daher muss es inline werden, um die Fußnote zu sein, und so dimensioniert/positioniert werden, dass es "richtig" aussieht. Ich finde es schade, dass es nicht innerhalb eines <p>-Tags sitzen kann, was es für meinen eigenen Gebrauch unpraktisch macht.
Craig Shoemaker hat in den Kommentaren das Original neu arrangiert, um mit dem CSS herumzuspielen, und das hat mich inspiriert, dasselbe zu tun.
Anstatt den Fußnotentext selbst direkt inline anzuzeigen (was besonders knifflig ist), habe ich diesen Inhalt an eine fest positionierte Stelle am unteren Rand der Seite verschoben.
Ich bin mir nicht zu 100% sicher, ob es eine gute Idee ist, aber ich bin auch nicht davon überzeugt, dass es eine schreckliche ist.
Am auffälligsten ist der Nachteil: Die Details können die Zusammenfassung blockieren und verhindern, dass man sie wieder schließt. :P
Ich bin mir nicht sicher, ob es reif für die breite Masse ist, aber es lohnt sich auf jeden Fall, es zu erforschen!
Die dritte Fußnote überlagert (auf meinem Handy) den 'Button', der notwendig ist, um sie wieder auszublenden!
Tolle Idee! Sie könnten alle anderen Details schließen, sobald ein Detail geöffnet ist (mit etwas JS).
document.querySelectorAll("details").forEach((targetDetail, i, allDetails) => {targetDetail.onclick = () => {
[...allDetails]
.filter(detail => detail !== targetDetail)
.forEach(detail => detail.removeAttribute("open"));
}
});
Ich denke, die Inline-Version funktioniert viel besser als die fürked Version hier. Die separate Box-Version hat einige Probleme.
Klicken außerhalb der Zusammenfassung schließt sie nicht (entweder gut oder schlecht, je nachdem).
Keine Schließen-Option auf der Box selbst (schlecht).
Das Öffnen anderer Zusammenfassungen schließt nicht die bereits geöffnete, sodass sie sich gegenseitig überlagern (oder hinter bereits geöffneten Boxen versteckt sind) (schlecht).
Die Zeitung Le Monde Diplo hat einen (unabhängigen) Artikel mit einem sehr interessanten Fußnotensystem geschrieben: Beim Scrollen aktualisiert ein Fußbereich eine Liste nur der Fußnoten, die sich auf im Artikelkörper sichtbare Referenzen beziehen.
Sehen Sie hier: https://www.monde-diplomatique.fr/2020/02/SIZAIRE/61344
Ist es nicht der Sinn von Fußnoten, ganz unten auf der Seite zu stehen? Wenn die Inhalte, die in Fußnoten platziert werden sollen, für das Verständnis entscheidend sind, sollten sie besser im Haupttext stehen.
Anstatt grundlegende Konzepte neu zu mischen, schlage ich vor, hier bei einem ordentlichen Content-Design zu bleiben. Sowohl Fußnoten als auch Details haben eindeutige Anwendungsfälle und glänzen in ihrer reinen semantischen Schönheit :)
Ja, am Ende einer "Seite". Das Web könnte einige Fuß"Viewport"noten gebrauchen... :)
Definitiv keine schreckliche Idee! Ich bin mir zwar nicht sicher, warum wir immer noch in Bezug auf nummerierte Fußnoten für das Web denken. Die Nummern sind ein notwendiger Schlüssel, wenn man mit Tinte und Papier arbeitet und einige Wörter hier nicht mit anderen Wörtern dort verknüpfen kann (ohne überall Linien und Pfeile zu zeichnen). Aber wenn wir einem elektronischen Dokument Pop-up-Fußnoten geben, warum nicht die Nummern ganz weglassen?
Ich beantworte meine eigene Frage und sage, es ist, weil wir nicht möchten, dass unsere Fußnotenlinks wie externe Hyperlinks aussehen. Das ist auch eine Ursache für Verwirrung zwischen In-Page-Ankern und externen Links, aber wir haben uns alle daran gewöhnt.