Quiconque a déjà intégré un design responsive sait ce que sont les Media Queries. Grâce à elles, nous pouvons détecter les propriétés de l’appareil utilisé pour accéder à notre site (smartphone, tablette, PC, etc).
Les media queries les plus populaires sont device-width et width, qui nous permettent de gérer nos adaptations design en fonction de la largeur de l’appareil ou de la zone d’affichage, mais on peut aussi faire ces détections par résolution, orientation (portrait ou paysage), etc.
Mais les media queries évoluent toujours, pour apporter toujours plus de précision dans le choix de nos designs, et nous nous dirigeons désormais vers les Media Queries de niveau 4. Elles ne sont pour l’instant supportée par aucun navigateur, mais cela ne nous empêche de voir à l’avance à quoi ça va ressembler.
Quoi de neuf ?
Ceux d’entre-vous qui aiment lire les descriptions W3C pourront retrouver les fonctionnalités exactes sur l’Editor’s Draft correspondant.
Ces nouvelles media queries nous permettront de détecter le mode d’interaction avec le site, l’environnement utilisateur via les senseurs des appareils les plus récents, et certains paramètres de navigateur. Pour l’instant, nous obtenons 4 nouvelles media queries :
- Script
- Luminosity
- Pointer
- Hover
Script : détection du javascript
Cette media query permet de détecter si le javascript est activé ou non. Il prend les valeurs true ou false, selon le réglage. Elle permettra d’obtenir un design alternatif en fonction de l’option. Elle sera probablement utile dans le cas où une partie du design est gérée par javascript, afin d’afficher un design qui soit malgré tout « visible » même avec cette option désactivée.
Luminosity : ambiance lumineuse
C’est probablement la media query qui fait le plus rêver actuellement. Elle classifie la luminosité ambiante de l’utilisateur en trois valeurs : dim, normal et washed.
- dim : obscurité
- normal : conditions idéales de luminosité
- washed : forte lumière
Il sera possible donc d’adapter les couleurs et le contraste de son design en fonction de la luminosité, permettant une meilleure lecture et un site plus agréable pour les yeux de l’utilisateur.
Pointer : le type de pointeur
pointer permet de détecter le type de pointeur utiliser pour interagir avec le site. Une souris correspondra à fine, une surface tactile à coarse, et si aucun des deux n’existe, à none (par exemple avec seulement le clavier).
Il sera donc possible de gérer sa navigation selon ce critère, par exemple en augmentant la taille des boutons d’interaction dans les formulaires.
Hover : peut-on déclencher l’évenement hover ?
hover permet de savoir si le mode d’interaction actuel permet de déclencher des événements de type hover, ce qui est par exemple possible avec une souris, mais pas avec du tactile.Il peut sembler similaire à la media query précédente, car il différencie clairement le tactile et la souris, mais n’aura pas nécessairement les mêmes applications.Encore du chemin à faire
Ces nouvelles queries donnent envie, mais montrent aussi que tout le chemin n’est pas fait, en particulier concernant la détection du support tactile. En effet, ce type d’option va devenir plus que nécessaire, à présent que nos écrans tactiles atteignent des largeurs en pixels similaires à celles des écrans de taille moyenne pour PC.
Le hic, c’est pour les écrans hybrides, tels que la Surface de Microsoft ou la Asus Transformer, qui permettent d’utiliser les deux modes d’interaction simultanément, et de se débrancher de leur support clavier-souris. Ceux-là sont pour le moment détectés exclusivement comme des éléments tactiles, mais on peut espérer une évolution qui nous permettra enfin par un moyen sûr de différencier le fonctionnement tactile de la souris.
