Réfléchir aux moyens de résoudre un SIDENAV
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Aujourd'hui, le défi IUG nous permet de créer une expérience utilisateur réactive et accessible qui se glisse hors de la barre de navigation à l'aide de CSS et de JavaScript. Elle fonctionne avec différents navigateurs, tailles d'écran et périphériques d'entrée. Parfait, n'est-ce pas ? Suivez-nous à mesure que nous utilisons une grille, des transformations, des pseudo-classes et une poignée de JavaScript pour gérer cette expérience utilisateur.
@AdamArgyleInk répondra à vos commentaires pendant les 30 premières minutes suivant la sortie de l'épisode. Contactez-nous ici, posez des questions ou envoyez votre propre code.
Chapitres:
- 0:00 – Introduction
- 0:30 – Présentation de la fonctionnalité Angle de débogage
- 2:25 – Grille += Mise en page de la pile de requêtes média
- 3:42 – Transition de transformation accessible
- 4:22 - :target Pseudo-classe
- 5:57 – Expérience utilisateur des touches d'échappement
- 6:16 – Orchestrer le focus
- 6:49 – Expérience utilisateur du lecteur d'écran
- 7:56 – Conclusion et incitation à l'action
Resources:
Regardez d'autres défis IUG → https://goo.gle/GUIchallenges
Abonnez-vous à la newsletter Google Chrome Developers → http://goo.gl/LLLNvf
arrow_back Retourner à tous les épisodes
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2021/01/21 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Il n'y a pas l'information dont j'ai besoin"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Trop compliqué/Trop d'étapes"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsolète"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problème de traduction"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Mauvais exemple/Erreur de code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Autre"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile à comprendre"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"J'ai pu résoudre mon problème"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Autre"
}]
{"lastModified": "Derni\u00e8re mise \u00e0 jour le 2021/01/21\u00a0(UTC)."}
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2021/01/21 (UTC)."],[],[]]