Les chances sont les suivantes: hover était le tout premier sélecteur de classe de pseudo que vous ayez appris. Zut, c'est peut-être le seul que vous ayez jamais appris. Nous aimons tous cette jolie petite fonctionnalité et l'utilisons constamment pour créer des expériences utilisateur enrichies.
Ma question aujourd'hui pourrait changer votre façon de voir le vol stationnaire pour toujours: «L'omniprésence des écrans tactiles rend-elle les événements de vol stationnaire obsolètes? En d'autres termes, l'iPhone a-t-il tué: le vol stationnaire? Lisez la suite pour voir comment iOS gère un événement de survol CSS, ce que cela signifie pour vous en tant que développeur et comment vous devriez ou non utiliser les événements de survol dans vos conceptions.
Ode To Hover
J'aime CSS3. Il a rendu le développement CSS pur beaucoup plus robuste et amusant. Des fonctionnalités telles que les transitions et les animations d'images clés nous apportent le type d'interaction fascinante que nous avions autrefois recours à JavaScript pour obtenir.
Cependant, lorsque vous parlez d'événements animés via du CSS pur, vos options sont assez limitées. Target nous donne le moyen de faire quelque chose pendant que les utilisateurs ont la souris enfoncée, mais un clic et un blocage ne sont pas nécessairement intuitifs sur le Web. Il existe d'autres moyens de simuler une interaction de clic, comme peut-être moduler des boutons radio en un diaporama complet, mais ces techniques sont encore assez rares.
Avec les images clés, nous avons la possibilité de démarrer une animation dès le chargement de la page et même de la boucler à l'infini. Cela n’est cependant pas toujours souhaitable et peut s’accompagner d’une vitesse de traitement décente pour les animations complexes.
Ensuite, il y a le vol stationnaire. Il s'agit d'une action simple, facile à mettre en œuvre et à comprendre, que vous pouvez utiliser en tant que développeur pour améliorer les interactions de l'utilisateur. Avec les transitions, vous pouvez passer d’une couleur à l’autre, réduire ou augmenter progressivement la taille d’un objet et même l’envoyer en rotation dans un espace 3D si c’est votre objectif. Avec le survol, vous avez le moyen idéal pour lancer tous ces effets.
Je suis tout au sujet des effets de vol stationnaire et ai écrit plusieurs articles donnant des exemples gratuits de mes tours préférés.
Trouble au paradis
Il y a un problème avec les événements de survol en tant que principal moyen d'interaction, ou peut-être devrais-je dire des millions et des millions de problèmes entre les mains de personnes partout dans le monde: les smartphones.
Pendant des décennies, nous avons eu des curseurs à l'écran, un moyen étrange mais largement accepté d'interagir avec le contenu numérique. Les appareils à écran tactile, qu’ils soient dirigés par un doigt ou par un stylet, existent depuis presque aussi longtemps que le curseur, mais le niveau de saturation du secteur a toujours été assez faible et, avouons-le, aucun d’entre eux ne peut supporter le «réel». Web presque partout assez bien pour même déranger avec.
Puis vint l'iPhone. Ce n'était pas le premier smartphone ou le premier téléphone à écran tactile, mais c’était définitivement un appareil pionnier dans le monde du Web mobile non dilué et tactile. Quelques années plus tard, le monde regorge d’appareils iOS et Android accédant largement au Web pur et simple.
La plupart d’entre nous sont maintenant aussi familiers ou encore plus familiers avec les interactions Web tactiles que leurs homologues dirigés par le curseur. Bien sûr, le gros problème est que les téléphones ne détectent pas actuellement votre doigt? au-dessus d'un élément. Cela signifie que l'expérience ne se traduit pas directement d'une méthode d'interaction à une autre.
Cela semble être un petit problème, mais ne vous en privez pas. Les interactions tactiles sont fondamentalement différentes du modèle traditionnel et, par conséquent, nombre de nos astuces préférées, telles que les événements survolés, doivent être repensées. N'est-ce pas?
Que fait iOS avec un survol?
Évidemment, les écrans tactiles posent un problème avec les événements de survol. Une des questions qui m’est venue tout de suite à l’esprit était de savoir s’il s’agissait de mon problème en tant que développeur Web ou d’un obstacle que les fabricants d’appareils ont été obligés de surmonter lorsqu’ils ont développé pour la première fois leurs navigateurs tactiles. Si le survol est une façon fondamentale d’interagir avec le Web, peut-être que les pouvoirs qui en découlent en tiennent compte.
La meilleure façon de savoir ce qui se passe lorsque vous lancez un événement de survol sur un écran tactile est de l'essayer. Nous allons donc coder un exemple très rapide et sale pour tester et voir ce qui se passe. Fondamentalement, je viens de jeter un tas d’images dans une div et de les faire pivoter en vol stationnaire. Voici le CSS:
Le test en direct
Maintenant que nous avons quelque chose à tester, vérifions-le sur un appareil à écran tactile. Saisissez votre iPad ou iPhone et appuyez ici ou sur l'image ci-dessus pour lancer la page de démonstration.
Évidemment, rien ne se produira comme par magie si vous passez votre doigt sur une image, mais que se passe-t-il si vous tapez sur une image?
En fait, l'effet de survol fonctionne plutôt bien, il a simplement été traduit en événement tap. Dans nos démonstrations, aucune image n'est pivotée par défaut. Lorsque vous appuyez sur une image, la rotation animée se produit.
Observations intéressantes
Nous avons donc établi que les événements survolés se traduisent par des événements tapés dans iOS, et d'après ce que je peux dire, un effet similaire se produit sur Android (éventuellement avec un double tap occasionnel requis). Il est important de noter que non seulement ces événements se produisent, mais Comment ils se produisent et affectent différentes circonstances.
Pour commencer, vous devez savoir qu'une fois que vous avez tapé sur un élément, le seul moyen de mettre fin à cet événement survol est d'appuyer sur un autre élément provoquant un survol.Par exemple, dans cette démonstration, taper sur le paragraphe ou l'arrière-plan ne met pas fin à l'événement de survol, mais seulement taper sur une autre image.
La révélation la plus importante survient lorsque nous réalisons que la plupart des événements de survol surviennent sur des éléments qui servent également de liens vers d'autres éléments. Cela signifie que nous avons un survol et un événement de clic sur le même élément.
Comme nous le savons, les appareils à écran tactile transforment également les événements de clic en événements de pression. Que se passe-t-il lorsque nous combinons deux événements de bureau différents qui se traduisent tous deux par le même événement à écran tactile? Comme on peut le voir dans cette démo, l'animation commence lorsque vous appuyez sur l'élément, mais l'événement click apparaît rapidement et redirige la page, même si l'animation n'est pas terminée.
Étant donné que les événements de survol sont souvent utilisés pour informer l'utilisateur qu'un élément est cliquable, cette découverte les rend en grande partie inutiles à cet égard.
Devez-vous abandonner les événements Hover?
La question qui est au cœur de cette discussion est de savoir si le pseudo-sélecteur de survol a sa place dans votre CSS à une époque où de nombreuses personnes naviguent sur le Web avec des appareils à écran tactile. Alors, quelle est la réponse?
En ce qui me concerne, la réponse est retentissante. bien que cela vienne avec plusieurs stipulations. Tout d'abord, il est intéressant de noter que certains projets fonctionneront très bien sur de nombreux appareils à écran tactile malgré leur dépendance aux événements de survol. Un exemple est une galerie de vignettes animée d'un article récent de Design Shack, qui fonctionne à merveille sur mon iPad. Un autre exemple pourrait être un menu déroulant de navigation qui apparaît en survol, dont beaucoup fonctionnent très bien sur les appareils à écran tactile, malgré la conviction commune que le contraire est vrai.
Malgré cela, je recommande toujours absolument de ne pas compter sur les événements de survol en tant que méthode d'interaction critique sur les appareils mobiles. Pour ce faire, vous devez vous préparer à beaucoup de maux de tête. Compte tenu de la diversité des navigateurs et des périphériques tactiles, vous ne pouvez pas être certain sans un niveau ridicule de tests indiquant que les événements de survol se répercutent de la même manière sur tous.
Par conséquent, mon conseil est de toujours supposer, quelle que soit la vérité de la déclaration, que le modèle d'interaction en survol ne fonctionnera pas pour les utilisateurs de téléphones intelligents et de tablettes. Cette hypothèse ne vous empêche toutefois pas de styler le sélecteur de survol dans tout votre travail et même d’utiliser de temps en temps des effets de survol fantaisistes. N'oubliez pas que le succès de l'utilisateur ne doit pas dépendre de cette action. Il s'agit plutôt d'une situation d'amélioration progressive dans laquelle tout le monde peut utiliser votre site à son niveau le plus élémentaire et permettre aux utilisateurs d'ordinateurs de bureau de ressentir quelques émotions visuelles que les utilisateurs d'écrans tactiles pourraient ne jamais avoir. voir.
Optimisation via une requête multimédia
Si vous voulez aller plus loin et différencier clairement les expériences de vos utilisateurs d’écrans tactiles et d’ordinateurs de bureau, vous pouvez écrire du code JavaScript simple, mais je suis un grand fan d’utilisation de CSS dans la mesure du possible afin que mon esprit s’intéresse immédiatement à une solution orientée requête.
Vous pouvez utiliser des requêtes multimédia pour vous assurer que les périphériques de bureau et mobiles offrent une expérience optimisée. Par exemple, une liste de liens peut avoir une petite zone cliquable et un effet de survol agréable sur un bureau tout en ayant une grande zone cliquable et aucun effet de survol sur un périphérique mobile.
Mais disons que nous voulions aller plus loin et rendre le site grand écran complètement dépendant d'un événement de survol pour fonctionner correctement. Ceci est acceptable car notre requête média garantira que les appareils mobiles ont un modèle différent, non? Peut-être pas.
Preuve de l'avenir
Tout au long de cet article, j'ai toujours comparé les appareils à écran tactile aux ordinateurs de bureau. L'hypothèse inhérente est que tous les appareils à écran tactile ont de petits écrans. Il me semble que, bien que cela soit commodément correct dans plus Dans les cas d’aujourd’hui, c’est une hypothèse entièrement fausse qui s’effondre en particulier sur le long terme.
Personnellement, je pense que l’interaction avec l’écran tactile deviendra de plus en plus populaire dans les années à venir. Un PC ou un ordinateur portable à écran tactile est peut-être une rareté à présent, mais je ne suis pas sûr que ce soit une hypothèse sûre que cela reste vrai à long terme. Cela signifie que même si utiliser une requête multimédia pour détecter la taille de l'écran peut sembler être un excellent moyen de différencier les appareils à écran tactile des périphériques à base de curseur, ce n'est probablement pas la meilleure pratique à adopter car les écrans de 20 pouces pourraient utiliser l'interaction tactile. autant ou plus qu'ils ne font des curseurs.
Utilisez Hover à bon escient
Le vol stationnaire est-il éteint? Nan. Sera-t-il éteint de sitôt? Probablement pas. Est-il de plus en plus dangereux de s’appuyer sur les événements de survol en tant que moyen principal d’interaction avec l’utilisateur? Absolument.
Je continuerai à utiliser des styles de survol et continuerai même à dispenser des tutoriels amusants sur les effets de survol, mais je tiens à préciser que je pense que le temps de permettre à votre site de compter sur le survol pour fonctionner est révolu. À moins que le prochain iPhone ne détecte votre doigt au-dessus de l'écran, les écrans tactiles compliquent suffisamment ce modèle d'interaction pour vous laisser supposer qu'il ne fonctionnera tout simplement pas sur ces appareils (qu'ils soient petits ou grands).
Qu'est-ce que tu penses? Faites-vous attention à la manière dont vous appliquez les styles de survol en CSS? Où tracez-vous la ligne pour utiliser le survol comme point d'interaction? Pensez-vous que les écrans tactiles continueront à augmenter dans l'ubiquité? J'aimerais entendre vos pensées.