Pourquoi les éléments HTML <button> n'ont-ils pas de pointeur de curseur CSS par défaut?
Un ami était demandant moi pourquoi <button> Les éléments HTML n'ont pas de curseur CSS pointer par défaut?
C'est le comportement par défaut pour les liens, et peut être réalisé sur un bouton avec
button { cursor:pointer; }
Mais pourquoi cette différence? Les sources sont un plus.
Cela vaut la peine de considérer l'ordre historique dans lequel ces choses ont vu le jour.
Les boutons existaient depuis très tôt à l'époque de l'informatique graphique. Ils avaient un effet d'ombre pour donner une impression skeuomorphique de leur ressemblance avec des boutons physiques, ce qui servait à indiquer qu'ils pouvaient être cliqués autant que l'on pousserait un tel bouton physique. En effet, puisque vous pouvez cliquer sur un bouton physique de la souris pour le faire (en supposant que vous ne tabuliez pas sur le clavier pour naviguer), le skeuomorphisme a été sauvegardé par cette action physique.
Lorsque le curseur était au-dessus d'eux, ils ont obtenu le curseur par défaut qui indiquait que bien qu'il soit possible de cliquer ou de double-cliquer sur tout ce qui était sous le curseur, ils ne pouvaient pas être saisis, et ils n'étaient pas non plus le bord glissant d'un objet redimensionnable . Surtout le fait qu'ils ressemblaient un peu à des boutons physiques suffisait à indiquer qu'ils étaient cliquables.
Lorsque l'hypertexte (dont le Web n'est pas le premier exemple, mais a été l'application de tueur qui l'a amené à un large public) est apparu, les bits de texte cliquables ont été indiqués par un soulignement et (lorsque la couleur était disponible) des couleurs différentes pour les non texte lié. Il était encore relativement faible en tant que signal physique, de sorte que le curseur en forme de main a été inventé comme indication supplémentaire.
C'était quelque temps avant <input> a donné des boutons lorsque type était submit ou reset. Comme les autres types de <input> ils ont été implémentés à travers les mécanismes que les OS avaient pour les widgets standard et auraient des boutons standard. Comme les systèmes d'exploitation mettaient des curseurs fléchés sur ces widgets, ils disposaient de curseurs fléchés. C'était bien car dans la gamme relativement limitée de fonctionnalités que l'on pouvait avoir dans une page Web à l'époque, elles étaient évidemment des boutons et évidemment cliquables. Il serait également un peu bizarre d'avoir autre chose qu'un comportement normal du système d'exploitation à l'époque, car cela signifierait que les navigateurs Web agissent étrangement par rapport à d'autres programmes. Si même de nombreuses applications au format riche (comme les jeux et certains logiciels bureautiques haut de gamme qui personnalisaient les fonctionnalités de l'interface utilisateur au-delà de la norme des systèmes d'exploitation) utilisaient des flèches ici, pourquoi ne serait-ce pas une chose relativement ennuyeuse comme une page Web, qui est juste du noir sur le gris du texte avec des morceaux bleus et peut-être quelques images flottant d'un côté ou de l'autre?
Lorsque CSS a rendu les opportunités de présentation des pages Web beaucoup plus riches (même si elles avaient déjà des choix de couleurs et de polices, bien que horribles à coder), les boutons étaient toujours rendus en appelant les appels du système de fenêtrage du système d'exploitation, donc pas affectés par CSS. Lorsque CSS a par la suite fait des curseurs l'une des choses qui pouvaient être modifiées pour un élément, les boutons n'étaient pas affectés car ils étaient hors de la portée de ce que CSS pouvait changer.
Les navigateurs ont commencé à dessiner leurs propres boutons pour que CSS puisse changer l'apparence et pour ne pas "briller" les éléments positionnés "au-dessus" d'eux dans des effets en couches, mais il y avait maintenant plus d'une décennie que le curseur de la main était le curseur normal pour un lien et un curseur fléché étant le curseur normal d'un bouton. Même si l'on pourrait soutenir maintenant que les boutons dans les navigateurs ne sont plus la même chose que les boutons dans d'autres applications (ce qui est encore un argument discutable), la cohérence s'oppose à un tel changement, en particulier par défaut; ok, il serait techniquement facile de le changer maintenant, mais il est techniquement facile pour le concepteur de page de le changer maintenant aussi, alors pourquoi changer l'apparence des pages des personnes qui n'ont pas décidé de le changer?
Voici pourquoi:
guides de conception de Microsoft parler de faible coût:
Les liens texte et graphique utilisent un pointeur […] à main […] en raison de leur faible capacité financière. Alors que les liens peuvent avoir d'autres indices visuels pour indiquer qu'ils sont des liens (tels que des soulignements et un placement spécial), l'affichage du pointeur de la main en survol est l'indication définitive d'un lien. Pour éviter toute confusion, il est impératif de ne pas utiliser le pointeur manuel à d'autres fins. Par exemple, les boutons de commande sont déjà très abordables, ils n'ont donc pas besoin d'un pointeur manuel. Le pointeur de la main doit signifier "cette cible est un lien" et rien d'autre.
Apple Human Interface Guidelines indique que le curseur de la main doit être utilisé lorsque "le contenu est un lien URL".
Directives de l'interface utilisateur du W3C dit encore la même chose avec "Le curseur est un pointeur qui indique un lien".
De "Les boutons ne devraient pas avoir de curseur à main" par Adam Silver
Selon curseur W3C :
pointeur Le curseur est un pointeur qui indique un lien.
La spécification indique uniquement que les liens sont censés avoir le curseur de pointeur. Les boutons ne sont pas censés avoir le curseur du pointeur dans la spécification et probablement c'est la raison pour laquelle les navigateurs ne l'attribuent pas par défaut et nous devons le faire manuellement.
Quant à savoir pourquoi les liens auraient besoin du curseur de pointeur, en plus de réponse de Dipak , ma compréhension est que la spécification a considéré qu'il pourrait ne pas être évident (en comparaison avec le texte environnant) que les liens de texte sont des liens.
- Utilisé pour la plupart des objets. 
- Utilisé pour les liens texte.
Exemple de pointeur de souris
Le changement de curseur de survol dans l'image animée vers la droite est un exemple de curseur de souris se déplaçant sur l'écran sous forme de flèche pointue, sur du texte sous forme de curseur en I, puis sur un lien sous forme de pointeur à main.
(source: computerhope.com )
Conclusion:
La flèche de la souris est destinée à la sélection de la plupart des objets (comme le bouton)
Le pointeur manuel est destiné à sélectionner un objet ou des liens de texte
Je voudrais simplement souligner que, contrairement à leurs directives, les boutons de soumission de commentaires sur les sites Web d'Apple et de Microsoft ont tous deux un curseur de pointeur sur le survol. Les deux sont des éléments d'entrée [type = submit].
L'un des principaux principes de l'expérience utilisateur est "ne me faites pas penser" .... si vous n'avez pas de pointeur sur un bouton, vous devez penser "est-ce un bouton?" ... donc vous brisez ce principe principal et aggravez l'UX.
C'est probablement pourquoi (comme le dit @tyletrotter) Apple et Microsoft utilisent tous les deux cela sur leurs sites Web.
Première, <button> n'est pas un lien. Par conséquent, aucune réponse n'indiquant ce qui se passe lorsque vous survolez un lien ne s'applique pas. Deuxièmement, CSS est une spécification distincte et indépendante de HTML. L'un ne précise pas ce que l'autre doit faire. C'est le fournisseur du navigateur qui décide du CSS qui est fourni pour toutes les actions, même si elles ont tendance à s'en tenir à la même chose si ce n'est pas dans la spécification.
Cela fait longtemps que je n'ai pas lu cette partie de la spécification et je devrais l'examiner pour ce qui est là, mais je suis sûr qu'il y a une indication que rien ne doit se produire dans ce cas car un bouton devrait être un bouton et si ce n'est pas un bouton ça devrait être autre chose!
La règle simple que j'utilise est:
S'il s'agit d'un bouton mais qu'il ressemble à un lien texte, donnez-lui un curseur à main.
Parfois, vous voulez un bouton qui ressemble à un lien car les boutons sont parfois plus pratiques et sémantiques (par exemple, vous n'avez pas besoin de simuler un href comme "#login-modal" Et de faire event.preventDefault() si ça ne va nulle part). Disons que vous avez un nav avec: Home, About, Login.
Home et About sont des liens qui mènent à une autre page. Cependant, même si Login leur ressemble, c'est en fait un bouton qui ouvre un mode de connexion. Il est plus sémantique d'être un bouton car il ne change pas l'URL. Dans ce cas, il est absolument logique qu'il ait le même curseur que le lien.