🥇 Links e botões de toque instantâneo

O efeito de foco do link e do botão fornece feedback para a interação do usuário com o mouse, mas causa atraso ao clicar em dispositivos de toque; especialmente quando usado com transições.

Em projetos recentes, usei o Modernizr com um mixin SCSS personalizado para corrigir isso:

@mixin hover {
  .no-touch &:hover { @content }
}

A no-touchclasse precisa de uma versão customizada do Modernizr com o teste Touch Events.

Exemplo de uso:

# Instead of
a:hover {
  color: red;
}

# Write
a {
  @include hover {
    color: red;
  }
}

E para manipuladores de eventos JavaScript:

var CLICK = Modernizr.touch ? 'touchstart' : 'click';

$('.my-button').on(CLICK, function() { ... })

Related Posts