Réfléchir aux moyens de résoudre les BUTTONS
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Aujourd'hui, lors du défi de l'IUG, @AdamArgyleInk applique un style à tous les types de boutons du Web à l'aide de propriétés personnalisées et de :where(), pour des boutons adaptatifs clair/sombre qu'il est facile de créer des variantes.
Chapitres:
- 0:00 – Introduction
- 0:19 – Présentation
- 2:08 – Expérience utilisateur du clavier
- 2:46 – Nouveau sélecteur de thème
- 3:09 – Expérience utilisateur avec la souris
- 3:34 – Les boutons dans les formulaires
- 4:30 – Bouton désactivé
- 5:22 – HTML
- 5:43 – Sélecteur de base CSS
- 6:24 – Propriétés personnalisées adaptatives
- 7:20 – Variantes de boutons
- 10:10 – Création de variantes du bouton "En direct"
- 11:18 – Récapitulatif
- 11:50 – Mouvements réduits
- 12:57 – Conclusion
Resources:
Regardez d'autres défis IUG → https://goo.gle/GUIchallenges
Abonnez-vous à la newsletter Google Chrome Developers → https://goo.gle/ChromeDevs
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 2022/05/18 (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 2022/05/18\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 2022/05/18 (UTC)."],[],[]]