Aujourd'hui, lors du défi de l'IUG, @AdamArgyleInk crée une info-bulle avec un élément personnalisé (sans composant Web !), :has(), transformations et propriétés logiques. Hormis un petit script de sauvegarde pour l'utilisation de :has(), il est entièrement basé sur CSS. Ne passez pas à côté de l'expérience de lecteur d'écran, qui a fait l'objet d'une attention particulière, comme d'habitude.
Chapitres:
- 0:00 – Introduction
- 0:20 – Info-bulles et conseils d'activation
- 2:22 – Présentation des fonctionnalités
- 6:25 – Expérience utilisateur du lecteur d'écran
- 9:06 – Arborescence d'accessibilité
- 14:12 - :has()
- 14:55 – HTML
- 15:18 – CSS
- 18:50 – JavaScript
- 20:21 – Conclusion
Resources:
- Essayez une démonstration → https://goo.gle/3SDW5YT
- Télécharger la source → https://goo.gle/3SCNxBj
Regardez d'autres défis IUG → https://goo.gle/GUIchallenges
Abonnez-vous à la newsletter Google Chrome Developers → https://goo.gle/ChromeDevs