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.