Touch events et contenus cachés au survol

Touch events et contenus cachés au survol (le 1 janvier 2015)

Sur le dernier site que j’ai mis en ligne, j’ai eu un petit souci sous les iPad et autres iPhone à cause d’un comportement tout bête : quand on survole un des liens de la navigation principale du site Arcora, un petit élément apparait pour signaler le lien.

Survol de la navigation principale du site Arcora

Rien de bien méchant, cet élément .navigation-redhover est caché par défaut et je le fais apparaitre au :hover. Sauf que sur iPad et autres iBidules, ce genre de comportement va s’effectuer ainsi si on fait un « tap » sur le lien :

  1. on fait un « tap » sur le lien ;
  2. cela affiche le lien en état hover ;
  3. et il faut faire un second « tap » sur le lien pour l’activer !

Ce qui est particulièrement casse-pied dans ce cas-là : devoir faire deux « tap » à la suite pour activer un lien d’une navigation principale, c’est pénible et contre-intuitif au possible pour un utilisateur lambda.

Sans trop le savoir, même si j’avais déjà constaté ce comportement à l’époque, c’est ce que je déclenchais sur le site de CSM avec l’effet de survol sur les portfolios. Sauf que dans ce cas, ce comportement ne me dérangeait pas, bien au contraire ! Dans ce cas, comme il y avait pas mal d’informations à afficher, je trouvais le comportement plutôt adapté.

Survol d’un élément sur le site CSM

C’est plus ou moins expliqué dans la doc Apple sur les événements.

En clair, si nous sommes sur un lien, et qu’il y a un changement de contenu sur un « tap » (un contenu qui apparait dans mon cas), il n’y a pas d’événement propagé (il ne se passe rien en somme), même sur un lien tout ce qu’il y a de plus standard. Cela peut se comprendre, cela évite de faire perdre une information potentielle aux utilisateurs. Ceci dit, dans mon cas, c’est plutôt fâcheux.

Côté solution, il n’y en a pas des milliers :

La seconde solution ajoutera une classe touch ou no-touch sur l’élément html. Et du coup, l’effet de hover sera à activer seulement si on a la classe no-touch (autrement dit, à rendre visible que dans ce cas), via :

.no-touch .navigation-link:hover .navigation-redhover {
display: block;
}

Ce n’est pas parfait, mais cela évitera quelques tracas sur des tablettes et autres smartphones.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1646

3 commentaires

Posté par Victor Brito le 01/01/2015 à 13:24:16
Le constat est-il le même avec la pseudo-classe :focus ?
Posté par David FF le 01/01/2015 à 17:52:36
Attention à la classe touch/no-touch de modernizr car les ordinateurs ayant aussi un écran tactile (il commence à en avoir pas mal)seront considérés comme touch et donc avec une souris le rendu sera moyen...

J'ai pas mal bidouillé pour trouver une solution et malheureusement pour le moment pas grand chose de parfait. Ma solution préférée est, vu que j'utilise très souvent WordPress, d'utiliser la fonction "wp_is_mobile" qui regarde l'user agent et je rajoute une classe dans le body. Les tablettes et smartphones sont considérés comme mobile.
ça peut donner ça :

function add_body_classes( $classes ) {
if(wp_is_mobile()) $classes[] = "is-mobile";
else $classes[] = "is-desktop";
return $classes;
}
add_filter( 'body_class', 'add_body_classes' );

A savoir que pour utiliser cette fonction sur un site sans Wordpress il vous suffit de regarder le code que Wordpress utilise et de faire votre propre fonction.

Voila, en esperant que ça sera utile à certains (clin d’oeil)
Posté par Nico le 05/01/2015 à 8:03:08
@Victor : je n'ai pas testé, je regarde dès que possible ^^

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.