Nur genug JavaScript
Wo Feitio Skripte nutzt, was der Browser von selbst tut und die Regeln für das Nicht-Überhandnehmen.
Auf dieser Seite
Das Prinzip
Feitio nutzt JavaScript dort, wo es den Bildschirm besser macht, und muss nicht ohne es arbeiten. Was rausgeht ist Überfluss: eine große Bibliothek für einen kleinen Effekt, ein Skript auf jeder Seite aus Gewohnheit, der ganze Bildschirm im Browser gebaut, während der Server ihn bereit liefern würde.
Der Browser zuerst
Bevor man ein Skript schreibt, prüfe, ob der Browser es bereits tut. Was er von selbst tut ist zugänglich: Tastatur, Screenreader und Fokus.
| Komponente | Der Browser unterstützt dies nicht | Das Skript fügt hinzu |
|---|---|---|
| Drawer | the browser’s popover: opens, closes with Esc and a tap outside | nichts |
| Dialog | das <dialog> des Browsers, mit showModal() | eine Zeile zum Öffnen |
| Details | das <details> des Browsers | die Öffnungs- und Schließanimation |
| AppShell | — | der Header, der beim Scrollen auf mobilen Geräten ausgeblendet wird |
| ScrollFade, BackToTop | — | zeigt an, wenn sie angewendet werden; sanftes Scrollen nach oben |
| StatusOverlay | — | der Lade-, Erfolgs- und Fehlerzustände |
| CodeBlock | — | Kopieren und Code-Farben |
Regeln
- Keine Browser-API, während das Komponente erstellt wird. Die Seite kommt vom Server bereit; das Skript kommt später und fügt nur hinzu.
- Reduzierte Bewegung gilt auch für Skripte: keine handgemachte Animation, wenn das System weniger Bewegung verlangt.
- Skripte nehmen nie die Tastatur oder den Screenreader weg. Wenn der Browser-Element es tut, tut es weiterhin so.
- Klein und nah am Nutzer: ein Komponente-Skript wird mitgeliefert, nicht in einem Bundle für die gesamte Website.