: toque na pseudo-classe CSS ou algo semelhante?


86

Estou tentando fazer um botão que, quando o usuário clica nele, muda de estilo enquanto o botão do mouse é pressionado. Também quero que ele mude seu estilo de maneira semelhante se for tocado em um navegador móvel. O que parecia óbvio para mim era usar o CSS: pseudo-classe ativa, mas não funcionou. Eu tentei: foco, e não funcionou também. Eu tentei: pairar, e pareceu funcionar, mas manteve o estilo depois que tirei meu dedo do botão. Todas essas observações foram feitas em um iPhone 4 e um Droid 2.

Existe alguma maneira de replicar o efeito em navegadores móveis (iPhone, iPad, Android e, possivelmente, outros)? Por enquanto, estou fazendo algo assim:

<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>

A pseudo classe: active é para navegadores de desktop, e a classe active é para navegadores de toque.

Gostaria de saber se existe uma maneira mais simples de fazer isso, sem envolver Javascript.


2
Quase todo navegador de toque lida com coisas como hovere mousedown/ mouseupdiferentemente, é difícil acomodar todos eles.
Chade

O Android e o iOS têm: touchstart,: touchmove,: touchend e: touchcancel pseudoclasses que você pode usar.
Paul Hanbury

2
Tentei definir estilos para as pseudo classes: touchstart e: touchend e não funcionaram no iPhone ou no Droid. @Paul Hanbury, tem certeza de que não está confundindo pseudo-classes CSS com eventos Javascript?
Elias Zamaria

1
@ mikez302 - Acho que você está certo. plugins.jquery.com/plugin-tags/touchstart
Doug Chamberlain

2
Eu me sentiria bobo se enviasse isso como uma resposta, mas na verdade a resposta é "Não, não é possível, você tem que usar Javascript." O que você está pedindo não faz parte do CSS2 ou CSS3. Eu acho que o fato de: active não funcionar é um problema de agente de usuário que você poderia relatar como um bug nos navegadores iOS e Android, mas apenas para resolver seu problema de usuário final ... sim, você precisa usar JS . Você pode agrupar seu código de compatibilidade em uma verificação de suporte ontouchstart .
joelhardi de

Respostas:


49

Não existe algo como :touchnas especificações W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active deve funcionar, eu acho.

A ordem na pseudo classe :active/ :hoveré importante para que funcione corretamente.

Aqui está uma citação do link acima

Os agentes de usuário interativos às vezes alteram a renderização em resposta às ações do usuário. CSS fornece três pseudo classes para casos comuns:

  • A pseudo classe: hover se aplica enquanto o usuário designa um elemento (com algum dispositivo apontador), mas não o ativa. Por exemplo, um agente de usuário visual pode aplicar esta pseudo classe quando o cursor (ponteiro do mouse) passa sobre uma caixa gerada pelo elemento. Os agentes de usuário que não oferecem suporte a mídia interativa não precisam oferecer suporte a essa pseudoclasse. Alguns agentes de usuário compatíveis com mídia interativa podem não ser capazes de oferecer suporte a essa pseudo classe (por exemplo, um dispositivo de caneta).
  • A pseudo classe: active aplica-se enquanto um elemento está sendo ativado pelo usuário. Por exemplo, entre os momentos em que o usuário pressiona o botão do mouse e o solta.
  • A pseudo classe: focus se aplica enquanto um elemento tem o foco (aceita eventos de teclado ou outras formas de entrada de texto).

9
Eu sabia que não existia tal coisa como: toque. Eu queria saber se havia algo semelhante. : active parecia razoável, mas não funcionou em meus testes.
Elias Zamaria

@ mikez302 - Achei que você sabia que eu queria citar minha fonte. Concordo com você, não vejo nenhuma razão para que não funcione, além do meu ponto sobre o pedido ser muito importante. Eu vi que alguém postou algo sobre os pseudo seletores de css para IOS e Android, mas não pude falar sobre essas tecnologias.
Doug Chamberlain

Mudei as regras: active e: hover no meu exemplo e não pareceu fazer nada.
Elias Zamaria

36
@ mikez302: use a :activepseudoclasse. Ele deve funcionar, mas em alguns navegadores, você precisa de um pequeno truque para fazê-lo funcionar: anexar um manipulador de eventos para o touchstartevento no corpo (ex: <body ontouchstart="">)
gion_13

5
Apenas para tocar no comentário de @ mikez302 na última resposta, é uma correção bacana no HTML5 Mobile Boilerplate que leva
Giles Butler

20

Uma vez que o celular não fornece feedback ao passar o mouse, quero, como usuário, ver o feedback instantâneo quando um link é tocado. Percebi que -webkit-tap-highlight-coloré o mais rápido a responder (subjetivo).

Adicione o seguinte ao seu corpo e seus links terão um efeito de toque.

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

Este parece ser o mais confiável, mas não parece o melhor. A cor de fundo parece se estender um pouco para fora do elemento, fazendo com que pareça maior por um momento dividido.
Adam

@Adam, sim, não pude contornar isso pelo que me lembro, mas sendo apenas por uma fração de segundo não foi um grande negócio para mim, especialmente porque permitiria ao usuário obter feedback de que clicou (o que é o que importa para eles durante esta fração de tempo)
Abdo

Na verdade, consegui fazer com que os pseudoestilos: active funcionassem no final, apenas vinculando uma função ao evento document.ontouchstart (por meio do jQuery), com um retorno de chamada vazio.
Adam de

Não é uma má ideia :-) Eu estava evitando o javascript completamente para esse propósito.
Abdo

2
Apenas compartilhar isso -webkit-tap-highlight-coloré um recurso CSS fora do padrão , estou usando :active, ele realmente se encaixa e faz sentido.
Ricardo Fornes

0

Eu estava tendo problemas com o estilo dos botões da tela de toque móvel. Isso resolverá os problemas do hover-stick / botão ativo.

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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.