Bei der heutigen GUI-Herausforderung erstellt @AdamArgyleInk eine Kurzinfo mit einem benutzerdefinierten Element (keine Webkomponente!), :has(), Transformationen und logische Attribute. Abgesehen von einem kleinen Backup-Skript für die Verwendung von :has() wird alles CSS unterstützt. Den Screenreader sollten Sie sich nicht entgehen lassen. Er hat wie üblich eine besondere Aufmerksamkeit erhalten.
Kapitel:
- 0:00 – Einführung
- 0:20 – Kurzinfos vs. Ein-/Aus-Schaltflächen
- 2:22 – Übersicht über die Funktionen
- 06:25 – Screenreader-UX
- 9:06 – Baum für Barrierefreiheit
- 14:12 – :has()
- 14:55 – HTML
- 15:18 – CSS
- 18:50 – JavaScript
- 20:21 – Outro
Ressourcen:
- Demo ansehen → https://goo.gle/3SDW5YT
- Quelle abrufen → https://goo.gle/3SCNxBj
Weitere GUI-Herausforderungen ansehen → https://goo.gle/GUIchallenges
Abonniere Google Chrome-Entwickler → https://goo.gle/ChromeDevs