Bei der heutigen GUI-Herausforderung schaffen wir mit CSS und JavaScript eine responsive, barrierefreie Seitennavigation, die ausblendbar ist. Die seitliche Navigationsleiste funktioniert für verschiedene Browser, Bildschirmgrößen und Eingabegeräte. Super, oder? Wir nutzen Raster, Transformationen, Pseudoklassen und eine ganze Menge JavaScript, um diese UX zu handhaben.
@AdamArgyleInk wird in den ersten 30 Minuten nach Veröffentlichung der Folge auf deine Kommentare reagieren. Hier können Sie Kontakt mit uns aufnehmen, Fragen stellen oder Ihren eigenen Code einreichen.
Kapitel:
- 0:00 – Einführung
- 0:30 – Übersicht über Debugging Corner-Funktionen
- 2:25 – Raster += Media Query-Stack-Layout
- 3:42 – Übergang zur barrierefreien Transformation
- 4:22 - :target Pseudoklasse
- 5:57 – Escape-Tasten-UX
- 6:16 – Fokus orchestrieren
- 6:49 – Screenreader-UX
- 7:56 – Outro und Call-to-Action
Ressourcen:
- Programmieren → https://goo.gle/3sQ8Xif
- Mitlesen → https://goo.gle/2Np83J9
- Demo ansehen → http://goo.gle/3bVBFYT
- So erstellen andere Nutzer Seitennavigationen (GUI Submissions) → https://goo.gle/36CAeuO
Weitere GUI-Herausforderungen ansehen → https://goo.gle/GUIchallenges
Abonnieren Sie die Google Chrome-Entwickler → http://goo.gl/LLLNvf