Caractéristiques des médias d'interaction et leur potentiel (pour des hypothèses incorrectes)

Cet article, une mise à jour considérablement élargie d'une pièce Dev.Opera 2015, clarifie les idées fausses entourant les fonctionnalités des médias d'interaction des requêtes multimédias de niveau 4 ( pointer , hover , any-pointer , any-hover ). L'article original a mal interprété any-hover: none ; Cette version s'aligne sur le dernier projet de travail, aborder les incohérences entre les implémentations du navigateur (voir les résultats actuels des tests et les rapports de bogues connexes).

Les requêtes multimédias Level 4 visent à adapter le style et les fonctionnalités du site Web (interactivité CSS ou comportement JavaScript via window.matchMedia ) en fonction des périphériques d'entrée utilisateur. Bien que généralement bien soutenus, les variations de mise en œuvre persistent.

Les cas d'utilisation courants impliquent d'ajuster les tailles de commande en fonction de l'écran tactile vs utilisation de la souris / stylet, ou permettant de manière conditionnelle des menus basés sur le plan de survol:

 <code>@media (pointer: fine) { /* Mouse or stylus: small controls okay */ } @media (pointer: coarse) { /* Touchscreen: larger touch targets */ } @media (hover: hover) { /* Enable hover menus */ } @media (hover: none) { /* Disable hover menus */ }</code>

Les développeurs exploitent souvent ces fonctionnalités pour la détection tactile, écoutant généralement des événements tactiles lorsque pointer: coarse est détecté:

 if (window.matchMedia && window.matchMedia ("(pointeur: grossier)"). Matches) {
 / * Pointeur grossier: écoutez les événements tactiles * /
 Target.AddeventListener ("TouchStart", ...);
} autre {
 / * Sinon, utilisez des événements de souris / clavier * /
}

Cette approche, cependant, est simpliste et méconnue l'objectif des fonctionnalités.

Limitations d'entrée primaires

pointer et hover révèlent uniquement les caractéristiques de l'entrée du pointeur . Cela peut différer de l'entrée principale réelle de l'utilisateur, en particulier avec des lignes de périphérique / d'entrée floues. Surtout, ces fonctionnalités ne détectent pas les utilisateurs du clavier uniquement. Par conséquent, assurez-vous l'accessibilité du clavier, quels que soient les résultats de la requête.

Un téléphone avec une souris Bluetooth peut signaler pointer: coarse et hover: none , malgré l'utilisateur utilisant principalement la souris. À l'inverse, une tablette de surface peut principalement utiliser le trackpad ( pointer: fine ), mais l'utilisateur peut préférer l'écran tactile.

Ce problème est résolu par any-pointer et any-hover .

Évaluation de toutes les entrées

any-pointer et any-hover reflètent les capacités combinées de toutes les entrées du pointeur. Plusieurs valeurs peuvent correspondre si les entrées ont des caractéristiques différentes. Les implémentations actuelles se comportent généralement comme suit:

Pour améliorer les cas d'utilisation d'origine, les décisions de base sur toutes les entrées du pointeur: «Si une entrée est grossière, agrandissez les commandes» et «Activer les menus de survol si au moins une entrée prend en charge le plan de survol».

 <code>@media (any-pointer: coarse) { /* At least one coarse pointer: larger controls */ } @media (any-hover: hover) { /* At least one hover-capable input: enable hover menus */ }</code>

any-pointer: none n'est vrai uniquement si aucune entrée de pointeur n'existe. any-hover: none n'est vrai uniquement si aucune des entrées ne prend en charge, ce qui le rend largement redondant.

Combiner les requêtes pour nuance

Combinez les requêtes pour les évaluations raffinées:

 <code>@media (pointer: coarse) and (any-pointer: fine) { /* Primary input is touchscreen, but a fine input exists. Prioritize touch, but mouse/stylus users can still interact. */ } @media (pointer: fine) and (any-pointer: coarse) { /* Primary input is mouse/stylus, but a touchscreen exists. Larger controls might be safest. */ } @media (hover: none) and (any-hover: hover) { /* Primary input lacks hover, but another input supports it. Treat hover as optional. */ }</code>

Les navigateurs réévaluent dynamiquement les requêtes en réponse aux changements environnementaux (par exemple, ajoutant une souris Bluetooth).

Les scripts peuvent être nécessaires

Les fonctionnalités des supports d'interaction n'indiquent pas l'entrée actuellement utilisée . Outils comme quelle entrée? Suivez les événements JavaScript, mais cela ne fournit des informations qu'après le début de l'interaction et peut être inexacte en raison d'événements truqués (technologies d'assistance, support complet du clavier iOS).

Éviter les expériences brisées

La détection tactile basée sur des événements ( pointer: coarse -> Écouter les événements tactiles) est imparfait. Il empêche d'utiliser des entrées non à l'écran sur les périphériques tactiles et les entrées à écran tactile sur des appareils principalement pilotés par la souris. Au lieu de cela, écoutez toujours les événements de souris / clavier et ajoutez des écouteurs d'événements Touch uniquement si any-pointer: coarse est vrai:

 / * Écoutez toujours les événements de souris / clavier * /
Target.AdDeventListener ("Click", ...);

if (window.matchMedia && window.matchMedia ("(tout points: grossier)"). Matches) {
 / * Si un pointeur grossier existe, écoutez également les événements tactiles * /
 Target.AddeventListener ("TouchStart", ...);
}

Alternativement, utilisez des événements de pointeur pour la manipulation unifiée des entrées.

Choix de l'utilisateur explicite

Fournissez un mode sélectionnable (Touch / Mouse) pour éviter les pièges de détection d'entrée. Utilisez des requêtes multimédias pour informer le paramètre par défaut et détecter l'entrée tactile pour inviter un commutateur de mode.

Interrogation responsable

Comprendre les limites des fonctionnalités des médias d'interaction. N'assumez pas un seul type d'entrée, comptez uniquement sur pointer et hover , ou négligez l'accessibilité au clavier. Au lieu de cela, hiérarchisez la convivialité tactile, offrez un choix d'utilisateurs et assurez-vous toujours de l'accessibilité du clavier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!