Comment désactiver efficacement les styles de survol sur les appareils tactiles : un guide complet

Comment désactiver les styles de survol sur les appareils tactiles : un guide complet

Problème :
Lorsque les appareils tactiles visitent des sites Web, : survolez les déclencheurs de style CSS lors de clics ou de pressions. Cela peut être distrayant ou même rendre les éléments interactifs inaccessibles.

Objectif :
Supprimer ou ignorer toutes les déclarations CSS :hover pour les appareils tactiles sans connaître le sélecteur de chaque déclaration.

Solutions :

Suppression de JavaScript

Supprimez toutes les règles CSS contenant :hover à l'aide de JavaScript.

<code class="javascript">if (hasTouch()) {
  for (var si in document.styleSheets) {
    for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
      if (styleSheet.rules[ri].selectorText.match(':hover')) {
        styleSheet.deleteRule(ri);
      }
    }
  }
}</code>

Avantages :

• Compatible avec les anciens navigateurs et ne nécessite pas de modifications CSS.
  Inconvénients :
• Désactive les survols sur les appareils mixtes souris et tactiles, ce qui nuit à l'UX.
• Peut uniquement supprimer les feuilles de style hébergées sur le même domaine.

CSS uniquement avec les requêtes multimédias

Utilisez les blocs @media pour contenir les règles de survol.

<code class="css">@media (hover: hover) {
  a:hover { color: blue; }
}</code>

Avantages :

• Facile à mettre en œuvre en CSS.
  Inconvénients :
• Nécessite la prise en charge des médias de survol requêtes (iOS 9.0, Chrome pour Android, Android 5.0).
• Incohérent pour les appareils mixtes souris et tactiles.

Détection tactile et injection CSS

Détecter les événements tactiles en utilisant JavaScript et ajoutez conditionnellement une classe CSS.

<code class="js">if (!hasTouch()) document.body.className += ' hasHover'</code>

<code class="css">body.hasHover a:hover { color: blue; }</code>

Avantages :

• Plus fiable que les requêtes multimédias pour les appareils tactiles mixtes.
  Inconvénients :
• Toujours affecté par les événements d'émulation tactile (par exemple, le curseur de la souris sur les écrans tactiles).

Solution ultime : détection de survol dynamique

Activez ou désactivez les styles de survol en fonction du curseur de la souris et des événements tactiles.

<code class="js">function watchForHover() {
  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)
}</code>

Avantages :

• Solution la plus robuste, fonctionne sur tous les navigateurs.
• Adapte dynamiquement les styles de survol aux entrées de l'appareil.
  Inconvénients :
• A un court délai après les événements tactiles (par exemple, 500 ms) pour empêcher les événements de déplacement de souris émulés.

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!