: toque CSS pseudo-clase o algo similar?


86

Estoy tratando de hacer un botón, de modo que cuando el usuario haga clic en él, cambie su estilo mientras se mantiene presionado el botón del mouse. También quiero que cambie su estilo de manera similar si se toca en un navegador móvil. Lo aparentemente obvio para mí fue usar CSS: pseudo-clase activa, pero eso no funcionó. Intenté: concentrarme y tampoco funcionó. Intenté: flotar y pareció funcionar, pero mantuvo el estilo después de que quité el dedo del botón. Todas estas observaciones se realizaron en un iPhone 4 y un Droid 2.

¿Hay alguna forma de replicar el efecto en los navegadores móviles (iPhone, iPad, Android y, con suerte, otros)? Por ahora, estoy haciendo algo como esto:

<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 pseudoclase: active es para navegadores de escritorio y la clase activa es para navegadores táctiles.

Me pregunto si hay una forma más sencilla de hacerlo, sin involucrar a Javascript.


2
Casi todos los navegadores táctiles manejan cosas como hovery mousedown/ de manera mouseupdiferente, es difícil adaptarse a todas.
Chad

Tanto Android como iOS tienen pseudoclases: touchstart,: touchmove,: touchend y: touchcancel que puede usar.
Paul Hanbury

2
Intenté configurar estilos para las pseudoclases: touchstart y: touchend y no funcionaron en el iPhone o el Droid. @Paul Hanbury, ¿está seguro de que no está confundiendo las pseudoclases de CSS con los eventos de Javascript?
Elias Zamaria

1
@ mikez302 - Creo que tienes razón. plugins.jquery.com/plugin-tags/touchstart
Doug Chamberlain

2
Me sentiría tonto al enviar esto como respuesta, pero de hecho, la respuesta es "No, no es posible, tienes que usar Javascript". Lo que está pidiendo no forma parte de CSS2 o CSS3. Creo que el hecho de que: active no funciona es un problema de usuario-agente que potencialmente podría informar como un error en los navegadores de iOS y Android, pero solo para resolver su problema de usuario final ... sí, debe usar JS . Puede envolver su código de compatibilidad en una verificación de compatibilidad con ontouchstart .
joelhardi

Respuestas:


49

No existe tal cosa :touchen las especificaciones de W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active debería funcionar, yo pensaría.

El orden en la pseudoclase :active/ :hoveres importante para que funcione correctamente.

Aquí hay una cita del enlace de arriba

Los agentes de usuario interactivos a veces cambian la representación en respuesta a las acciones del usuario. CSS proporciona tres pseudoclases para casos comunes:

  • La pseudoclase: hover se aplica mientras el usuario designa un elemento (con algún dispositivo señalador), pero no lo activa. Por ejemplo, un agente de usuario visual podría aplicar esta pseudoclase cuando el cursor (puntero del mouse) se desplaza sobre un cuadro generado por el elemento. Los agentes de usuario que no admiten medios interactivos no tienen que admitir esta pseudoclase. Es posible que algunos agentes de usuario compatibles que admitan medios interactivos no admitan esta pseudoclase (por ejemplo, un dispositivo de lápiz).
  • La pseudoclase: active se aplica mientras el usuario activa un elemento. Por ejemplo, entre las veces que el usuario presiona el botón del mouse y lo suelta.
  • La pseudoclase: focus se aplica mientras un elemento tiene el foco (acepta eventos de teclado u otras formas de entrada de texto).

9
Sabía que no existía el tacto. Me preguntaba si habría algo similar. : active parecía razonable pero no funcionó en mis pruebas.
Elias Zamaria

@ mikez302 - Supuse que sabías que quería citar mi fuente. Estoy de acuerdo con usted, no veo ninguna razón por la que no funcionaría, aparte de mi punto de que el pedido es muy importante. Vi que alguien publicó algo sobre los pseudo selectores css para IOS y Android, pero no pude hablar de esas tecnologías.
Doug Chamberlain

Cambié las reglas: active y: hover en mi ejemplo y no pareció hacer nada.
Elias Zamaria

36
@ mikez302: usa la :activepseudoclase. Se debe trabajar, pero en algunos navegadores se necesita un pequeño truco para hacer que funcione: asociar un controlador de eventos para el touchstartevento en el cuerpo (por ejemplo: <body ontouchstart="">)
gion_13

5
Solo para tocar el comentario de @ mikez302 en la última respuesta, hay una buena solución en el HTML5 Mobile Boilerplate que enlaza con este artículo - alxgbsn.co.uk/2011/10/17/…
Giles Butler

20

Dado que los dispositivos móviles no brindan comentarios de desplazamiento, quiero, como usuario, ver comentarios instantáneos cuando se toca un enlace. Noté que -webkit-tap-highlight-colores el más rápido en responder (subjetivo).

Agregue lo siguiente a su cuerpo y sus enlaces tendrán un efecto de toque.

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

Este parece ser el más confiable, pero no parece el mejor. El color de fondo parece extenderse un poco fuera del elemento, haciéndolo parecer más grande por un momento dividido.
Adam

@Adam sí, no pude evitar eso, como recuerdo, pero esto fue solo por una fracción de segundo no fue un gran problema para mí, especialmente porque permitiría al usuario obtener comentarios sobre los que hizo clic (que es lo que les importa durante esta fracción de tiempo)
Abdo

De hecho, conseguí que los pseudoestilos activos funcionaran al final simplemente vinculando una función al evento document.ontouchstart (a través de jQuery), con una devolución de llamada vacía.
Adam

No es una mala idea :-) Estaba evitando javascript por completo para este propósito.
Abdo

2
Solo compartir eso -webkit-tap-highlight-colores una función CSS no estándar , que estoy usando en su :activelugar, realmente encaja y tiene sentido.
Ricardo Fornes

0

Estaba teniendo problemas con el estilo de los botones de la pantalla táctil del móvil. Esto solucionará los problemas del botón activo o del botón de desplazamiento.

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>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.