Vous l'aurez peut être remarqué, mais lorsqu'une application AIR développée en HTML est lancée, l'utilisateur a la possibilité de sélectionner les élements (texte, images, blocs) comme il le ferait dans un navigateur Web.
Ce comportement est complètement normal étant donné que le rendu HTML est effectué par Webkit, le moteur de rendu de Safari (entre autres). Aussi cohérent soit-il, ce comportement peut donner lieu à des effets disgracieux : interface qui devient bleue/grise quand on sélectionne de larges zones, séléction d'éléments non pertinents comme les libellés de menu, etc.
En fouillant par-ci par là, je suis tombé sur un pseudo-sélecteur CSS 3 concernant la sélection de texte : ::selection . Après quelques tests, notamment en jouant sur la couleur de fond de la sélection, il est possible de rendre invisible la sélection de texte. Cette solution n'est pas satisfaisante pour trois raisons :
- l'utilisateur ne voit plus ce qu'il sélectionne ;
- cela n'empêche pas la sélection des éléments autres que le texte (blocs de structure notamment);
- ce pseudo-élément a été enlevé du brouillon de la spécification W3C (voir : http://www.w3.org/TR/css3-selectors/#selection).
Une solution goût pomme
Je me suis donc attelé à trouver autre chose. La lumière est venue du côté des propriétés CSS propres à Webkit.
En me penchant sur celles-ci, je suis tombé par hasard sur -webkit-user-select .
Selon la documentation officielle Apple (http://developer.apple.com/documentation/appleapplications/Reference/SafariCSSRef/Articles/
StandardCSSProperties.html), cette propriété détermine si un utilisateur peut ou non sélectionner le contenu d'un élément.
Cette propriété prend trois valeurs distinctes :
- auto : l'usager peut sélectionner tout type de contenu à l'intérieur de l'élément ciblé (valeur par défaut);
- text : l'usager ne peut sélectionner que le texte contenu à l'intérieur de l'élément ciblé ;
- none : désactive la sélection utilisateur pour l'élément ciblé.
C'est cette troisième valeur qui va nous intéresser. En effet, en l'appliquant aux éléments qui nous intéresse (un menu par exemple), cela empêchera la sélection par l'utilisateur et tout effet graphique disgracieux.
Exemple d'utilisation de -webkit-user-select
#monMenu { -webkit-user-select:none; }
Implications
Mise en garde : l'utilisation de cette propriété doit se faire avec parcimonie.
Certes, elle apporte un certain confort graphique. Pour autant, il ne faudrait pas, en utilisant cette propriété, arriver au résultat contraire.
Empêcher certaines sélections a son intérêt (les menus par exemple) mais d'autres seraient plus dérangeantes : un texte d'un article dans le cas d'une application de lecture de flux RSS, les coordonnées d'un point sur une carte, etc.
Il n'y a pas vraiment de règle dans ce domaine : le bon sens mène la danse. Ne l'utilisez pas à l'aveuglette, faîtes appel à votre tête !
La suite bientôt !
Bien vu, merci !
Content que ça vous ait aidé :-)