- Stellt aktuelle Methoden vor, mit denen sich von JS abhängige Funktionen im Web durch HTML/CSS ersetzen lassen
- Mit Standard-Elementen wie
details·summary, datalist und popover lassen sich Akkordeons, Autovervollständigung, Modals und Offscreen-Navigation umsetzen
- Dieser Ansatz reduziert Download-, Auswertungs- und Speichernutzung und verbessert so Performance und User Experience
- Zu jeder Funktion werden CodePen-Beispiele, MDN-Dokumentation und Informationen zur Browser-Kompatibilität bereitgestellt
- JS sollte nur dort eingesetzt werden, wo es wirklich nötig ist, und die fortgeschrittenen Funktionen von HTML/CSS sollten aktiv genutzt werden
JS-Funktionen durch HTML und CSS ersetzen
- JavaScript war lange Zeit für Funktionen zuständig, die sich nicht mit HTML und CSS umsetzen ließen
- Mit dem erweiterten Funktionsumfang von HTML und CSS lassen sich jedoch einige JS-Funktionen heute durch native Webtechnologien ersetzen
- Da JS heruntergeladen, entpackt, ausgewertet und im Speicher gehalten werden muss, ist es effizient, geeignete Funktionen auf HTML/CSS zu verlagern
- Vorgeschlagen wird ein Ansatz, bei dem sich JS auf komplexe Logik konzentriert und einfache UI-Steuerung an HTML/CSS delegiert wird
Akkordeon / erweiterbare Inhaltsbereiche
- Mit den Elementen
details und summary lassen sich Akkordeons ohne JS umsetzen
- Inhalte können per Klick geöffnet und geschlossen werden, und mit dem Attribut
open lässt sich der Standardzustand festlegen
- Wird dasselbe Attribut
name verwendet, kann nur ein Panel gleichzeitig geöffnet sein
- Das Styling ist per CSS möglich, ebenso eine Steuerung des Öffnens/Schließens per JS
- Verwandte Ressourcen: MDN-Dokumentation zu
details, CodePen-Beispiel, Browser-Kompatibilitätstabelle
Eingabefeld mit Autovervollständigungs-Vorschlägen
- Mit der Kombination aus
input und datalist lässt sich ein automatisch gefiltertes Dropdown umsetzen
- Beim Eingeben wird die Vorschlagsliste automatisch gefiltert
- Unterstützt neben Text auch verschiedene Eingabetypen wie
number, time usw.
- Firefox unterstützt derzeit nur textbasierte Eingaben, außerdem gibt es Einschränkungen bei der mobilen Barrierefreiheit
- Verwandte Ressourcen: MDN-Dokumentation zu
datalist, SitePoint-Tutorial, Browser-Kompatibilitätstabelle
Modal / Popover
- Mit den Attributen
popover und popovertarget lassen sich Modals und Popover ohne JS umsetzen
- Es gibt drei Modi:
auto, hint und manual
auto wird durch Klick außerhalb oder ESC geschlossen, manual nur manuell
- Firefox und iOS unterstützen den Modus
hint nicht
- Verwandte Ressourcen: MDN-Dokumentation zu
popover, Chrome-Blog, CodePen-Beispiel, Video zur Barrierefreiheit
Offscreen-Navigation / Offscreen-Inhalte
- Mit der
popover-Funktion lässt sich ein Offscreen-Navigationsmenü umsetzen
- Mit dem Element
nav wird semantische Bedeutung gegeben, per CSS translate wird es in und aus dem sichtbaren Bereich bewegt
- Es schließt sich bei Klick außerhalb, und mit
popover="manual" kann manuelles Schließen festgelegt werden
- Mit dem Pseudoelement
::backdrop lässt sich der Hintergrund halbtransparent gestalten
- Verwandte Ressourcen: MDN Popover API, Chrome-Blog, CodePen-Beispiel
Fazit
- Die Stärke von JS wird anerkannt, es sollte jedoch nur dort eingesetzt werden, wo es nötig ist
- Durch die jüngsten Fortschritte bei HTML/CSS sind zahlreiche Alternativen ohne JS entstanden
- Weitere Beispiele finden sich im Blogbeitrag des Autors „Replace JS with No-JS or Lo-JS Options“
- Betont wird eine bessere User Experience durch Minimierung von JS und Performance-Optimierung
Noch keine Kommentare.