: touchez la pseudo-classe CSS ou quelque chose de similaire?


86

J'essaie de créer un bouton, de sorte que lorsque l'utilisateur clique dessus, il change de style pendant que le bouton de la souris est maintenu enfoncé. Je veux également qu'il change de style de la même manière s'il est touché dans un navigateur mobile. La chose apparemment évidente pour moi était d'utiliser le CSS: pseudo-classe active, mais cela n'a pas fonctionné. J'ai essayé: focus, et ça n'a pas fonctionné aussi. J'ai essayé: survoler, et cela semblait fonctionner, mais cela a gardé le style après avoir enlevé mon doigt du bouton. Toutes ces observations concernaient un iPhone 4 et un Droid 2.

Existe-t-il un moyen de reproduire l'effet sur les navigateurs mobiles (iPhone, iPad, Android et, espérons-le, d'autres)? Pour l'instant, je fais quelque chose comme ceci:

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

La pseudo-classe: active est destinée aux navigateurs de bureau et la classe active aux navigateurs tactiles.

Je me demande s'il existe un moyen plus simple de le faire, sans impliquer Javascript.


2
Presque chaque navigateur tactile gère des choses telles que hoveret mousedown/ mouseupdifféremment, il est difficile de les accueillir toutes.
Chad

Android et iOS ont tous deux des pseudoclasses: touchstart,: touchmove,: touchend et: touchcancel que vous pouvez utiliser.
Paul Hanbury

2
J'ai essayé de définir des styles pour les pseudo-classes: touchstart et: touchend et ils ne fonctionnaient pas sur l'iPhone ou le Droid. @Paul Hanbury, êtes-vous sûr de ne pas confondre les pseudo-classes CSS avec les événements Javascript?
Elias Zamaria

1
@ mikez302 - Je pense que vous avez raison. plugins.jquery.com/plugin-tags/touchstart
Doug Chamberlain

2
Je me sentirais idiot de soumettre ceci comme réponse, mais en fait, la réponse est "Non, ce n'est pas possible, vous devez utiliser Javascript." Ce que vous demandez ne fait pas partie de CSS2 ou CSS3. Je pense que le fait que: active ne fonctionne pas est un problème d'agent utilisateur que vous pourriez potentiellement signaler comme un bogue dans les navigateurs iOS et Android, mais juste pour résoudre votre problème d'utilisateur final ... ouais, vous devez utiliser JS . Vous pouvez envelopper votre code de compatibilité dans une vérification du support ontouchstart .
joelhardi

Réponses:


49

Il n'y a rien de tel que :touchdans les spécifications du W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active devrait fonctionner, je pense.

L'ordre sur la classe :active/ :hoverpseudo est important pour qu'elle fonctionne correctement.

Voici une citation de ce lien ci-dessus

Les agents utilisateurs interactifs modifient parfois le rendu en réponse aux actions de l'utilisateur. CSS fournit trois pseudo-classes pour les cas courants:

  • La pseudo-classe: hover s'applique lorsque l'utilisateur désigne un élément (avec un périphérique de pointage), mais ne l'active pas. Par exemple, un agent utilisateur visuel pourrait appliquer cette pseudo-classe lorsque le curseur (pointeur de la souris) survole une boîte générée par l'élément. Les agents utilisateurs qui ne prennent pas en charge les médias interactifs n'ont pas à prendre en charge cette pseudo-classe. Certains agents utilisateurs conformes prenant en charge les médias interactifs peuvent ne pas être en mesure de prendre en charge cette pseudo-classe (par exemple, un dispositif à stylet).
  • La pseudo-classe: active s'applique lorsqu'un élément est activé par l'utilisateur. Par exemple, entre les moments où l'utilisateur appuie sur le bouton de la souris et le relâche.
  • La pseudo-classe: focus s'applique lorsqu'un élément a le focus (accepte les événements clavier ou d'autres formes d'entrée de texte).

9
Je savais que le toucher n'existait pas. Je me demandais s'il y avait quelque chose de similaire. : active semblait raisonnable mais cela n'a pas fonctionné dans mes tests.
Elias Zamaria

@ mikez302 - Je pensais que vous saviez que je voulais citer ma source. Je suis d'accord avec vous, je ne vois aucune raison pour laquelle cela ne fonctionnerait pas, à part mon point sur le fait que la commande est très importante. J'ai vu que quelqu'un avait publié quelque chose sur les pseudo sélecteurs css pour IOS et Android, mais je ne pouvais pas parler de ces technologies.
Doug Chamberlain

J'ai inversé les règles: active et: hover dans mon exemple et cela ne semblait rien faire.
Elias Zamaria

36
@ mikez302: utilisez la pseudo-classe :active. Il devrait fonctionner, mais dans certains navigateurs vous avez besoin d' un petit hack pour le faire fonctionner: attacher un gestionnaire d'événements à l' touchstartévénement sur le corps (ex: <body ontouchstart="">)
gion_13

5
Juste pour toucher le commentaire @ mikez302 dans la dernière réponse, il y a un correctif intéressant dans le HTML5 Mobile Boilerplate qui renvoie à cet article - alxgbsn.co.uk/2011/10/17
Giles Butler

20

Étant donné que le mobile ne donne pas de retour de survol, je souhaite, en tant qu'utilisateur, voir un retour instantané lorsqu'un lien est activé. J'ai remarqué que -webkit-tap-highlight-colorc'est la réponse la plus rapide (subjective).

Ajoutez ce qui suit à votre corps et vos liens auront un effet de robinet.

body {
    -webkit-tap-highlight-color: #ccc;
}

Cela semble être le plus fiable, mais ce n'est pas le meilleur. La couleur d'arrière-plan semble s'étendre un peu hors de l'élément, ce qui lui donne une apparence plus grande pendant un instant.
Adam

@Adam ouais, je ne pouvais pas contourner cela comme je me souviens, mais ce n'était que pour une fraction de seconde n'était pas trop gros pour moi, surtout que cela permettrait à l'utilisateur d'obtenir des commentaires ce qui compte pour eux pendant cette fraction de temps)
Abdo

En fait, les pseudo styles: active fonctionnent à la fin en liant simplement une fonction à l'événement document.ontouchstart (via jQuery), avec un rappel vide.
Adam

Ce n'est pas une mauvaise idée :-) J'évitais complètement le javascript à cette fin.
Abdo

2
Le partage de cette fonctionnalité -webkit-tap-highlight-colorest une fonctionnalité CSS non standard , j'utilise à la :activeplace, cela correspond vraiment et a du sens.
Ricardo Fornes

0

J'avais des problèmes avec le style des boutons de l'écran tactile mobile. Cela résoudra vos problèmes de hover-stick / bouton actif.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.