Passe o mouse e concentre-se para n√£o tocar, Ativo para toque

iOS e Android s√£o inteligentes o suficiente para usar :hovere :focusestilizar os bot√Ķes, mas de uma maneira √ļnica. H√° muito tempo meus projetos s√£o atormentados por estados de foco em bot√Ķes e links que persistem depois que os usu√°rios os tocam. Voc√™ tamb√©m pode ter encontrado isso …

O que eu criei foi uma cadeia de classes adicionadas pelo Modernizr que limitam o acesso :hovere as :focusclasses aos .no-touchnavegadores, enquanto adicionam os mesmos estilos a um :activeestado quando .touchest√° presente, bem como um .no-jsfallback.

Como a cadeia de aulas é complicada, transformei tudo em um mixin SASS bacana. Aqui está o mixin:

/*
* Provide a hover effect for non-touch devices, turn it into an Active state for mobile, and maintain a fallback.

* @requires Modernizr as a JS dependency to get .no-touch classes

* Adds styles via @content

*/

@mixin touch-hover() {
.no-js &:hover, // the fallback
.no-js &:focus,
.js.no-touch &:hover, // enhanced for no-touch
.js.no-touch &:focus,
.js.touch &:active { // relay same styles to active for touch devices
@content;
}
}

Para usar, ele pode ser colocado dentro de uma adeclaração, assim:

a {
color
: blue;

@include touch-hover() {
color
: purple;
}
}

Para aplicá-lo a uma classe específica, o mixin deve ser aplicado dentro dessa classe, desta forma (já que depende do &operador):

.anchor {

@include touch-hover() {
color
: purple;
}
}

O resultado é o esperado em dispositivos desktop / ponteiro do mouse. Para telas sensíveis ao toque, entretanto, os estilos de foco são aplicados apenas quando o botão é tocado. Eles desaparecem depois que a torneira é concluída.

Isso foi testado, mas não extensivamente. Eu gostaria de ouvir comentários sobre quais navegadores ignoram essas regras e o que acontece quando você tem um dispositivo que suporta eventos de toque e ponteiro ao mesmo tempo.