WordPress : wp-fading-content-slider

Après un premier essai de packaging de plugin WordPress j’ai renouvelé l’expérience pour MBA Multimedia en partageant le plugin maison réalisé pour les besoins de notre blog : http://blog.mba-multimedia.com/

J’ai donc ajouté une nouvelle page dans la rubriques « Réalisations » du site. Le plugin est nommé wp-fading-content-slider : Voir la page dédiée

Le plugin est téléchargeable sur le site officiel des plugins WordPress ici

Supprimer l’effet automatique de sélection du texte en CSS

Comme le cas s’est présenté pour moi, je vais indiquer la solution ici afin d’éviter à certains de chercher trop longtemps.

Le contexte

La tendance est actuellement au développement d’applications Web, avec de plus en plus de mouvements gérés, d’animations, de transitions, etc. Grâce aux nouvelles fonctionnalités CSS3, HTML5, et aux nombreuses librairies Javascript (notamment JQuery que j’utilise beaucoup), il est carrément possible de gérer les gestes utilisés sur les appareils tactiles (Touch, Tap, Swipe, Zoom, Multitouch…)

Le HTML étant fait à la base pour présenter de l’information sur le Web, notamment du texte, on peut parfois obtenir des effets parasites, dus au comportement natif des navigateurs. Ainsi, en tentant de simuler un mouvement de Swipe avec la souris, l’effet indésiré va être la sélection de texte. Visuellement, cela se traduit par la mise en surbrillance de la sélection et le changement de couleur de la police :

Exemple de sélection de texte sous Chrome
Texte sélectionné mis en surbrillance

Ce comportement paraît logique et est même intuitif lorsque l’utilisateur veut sélectionner un texte, par exemple pour le copier. Dans certains cas, notamment si on souhaite ajouter des effets tactiles sur une page, ce comportement peut gêner l’expérience utilisateur.

Dans l’image ci-dessus, le texte est mis en surbrillance alors que l’utilisateur tente de faire glisser un élément vers la gauche ou la droite avec sa souris (swipe). La gestion de ce mouvement est rendue possible par l’utilisation de la librairie jQuery jGestures

Mais, pourquoi c’est gênant ?

Ici, l’utilisateur ne souhaitait vraiment pas sélectionner de texte (Je le sais, c’est moi 🙂 !). La mise en surbrillance est donc inattendue pour lui et va perturber son expérience de navigation.

Alors que faire ?

Ce comportement étant natif, il va falloir le surcharger. On peut pour cela utiliser des propriétés CSS particulières et un sélecteur « ::selection » (Cf. W3Schools)

On peut ainsi facilement customiser les couleurs et obtenir différents rendus, plus ou moins satisfaisants :

Surbrillance du texte sélectionné modifiée
Couleur de surbrillance du texte sélectionné modifiée

Le code CSS utilisé ici est le suivant :

Ok, mais comment on supprime cet effet alors ?

On va donc pouvoir utiliser cette technique pour simplement supprimer l’effet de surbrillance. Il suffit pour cela de définir une couleur de background « transparente » :

C’est donc simple et efficace !
Remarque : Le sélecteur ::selection est supporté par IE9+, Opera, Google Chrome et Safari. Firefox supporte cette fonctionnalité par un sélecteur propriétaire ::-moz-selection (Source W3Schools)

Encore mieux, on empêche vraiment la sélection !

Solution alternative, et permettant en plus d’empêcher les copier-coller, il y a la propriété CSS ‘user-select’.

Ainsi, le code précédant  permettra d’empêcher les utilisateurs de sélectionner du texte, que ce soit par erreur ou de manière volontaire. Il faut donc l’utiliser avec précaution et avoir bien conscience qu’on prive l’utilisateur d’une fonctionnalité importante.

3D Memory HTML5 et CSS3

Avant d’avoir le droit de jouer au jeu, voici la vidéo de démonstration du 3D-memory que j’ai développé pour la semaine de l’innovation en Bretagne, afin d’illustrer ce que nous savons faire en terme de 3D native avec HTML5, CSS3 et jQuery.

Plus d’infos sont disponibles sur le site de notre projet de R&D, sur lequel nous travaillons en partenariat avec l’INRIA, Polymorph et le laboratoire LOUSTIC.