Cursores e ponteiros

Em dispositivos sem tela sensível ao toque, o cursor é uma maneira essencial para os usuários saberem com o que estão interagindo. Você também pode dar dicas úteis sobre como interagir com um elemento ou como um movimento com um trackpad ou mouse vai afetar seu site.

Cursores

Os navegadores processam automaticamente alguns casos de uso comuns para cursores.

Se você estiver lendo isso em um dispositivo com um cursor, explore a página. Talvez você não tenha percebido como os cursores mudam antes, mas observe as dicas que eles oferecem. Quando o ponteiro passa sobre o texto, o cursor muda para um cursor de seleção em forma de I, sugerindo que você pode selecionar o texto. Se você passar o cursor sobre um link, ele vai mudar para uma mão apontando com o dedo indicador, sugerindo que você pode realizar uma ação. Em todos os outros lugares, haverá um cursor padrão, que geralmente é uma seta.

À medida que você cria sites mais interativos, é importante personalizar o cursor para que os usuários entendam melhor as interações.

Os navegadores oferecem suporte a uma variedade de palavras-chave para a propriedade de cursor, que fornece dicas para arrastar, redimensionar, selecionar e muito mais.

Se nenhum dos cursores compatíveis comunicar as interações de um elemento, você também poderá fornecer uma imagem SVG ou PNG para ser usada como cursor.

Acentos circunflexos

Um cursor de inserção é usado para mostrar sua posição no texto editável. Ele é diferente do cursor, porque não segue o mouse. É possível mudar a cor com caret-color.

Responder às entradas de ponteiro de um usuário

Os usuários com mouse ou trackpad podem interagir com um ponto mais preciso na tela do que os usuários com uma tela touchscreen. Se você criar apenas para a precisão de um mouse, os usuários com telas touch ou problemas de controle motor fino talvez não consigam interagir com sua página como precisam.

Problemas comuns incluem botões muito pequenos ou elementos interativos muito próximos uns dos outros. Isso dificulta a interação dos usuários com o elemento correto.

Garantir que seus botões e outros destinos interativos sejam grandes o suficiente é uma etapa importante para garantir que seu site seja acessível. Você também pode personalizar seus estilos com base na precisão dos dispositivos de entrada do usuário com consultas de mídia pointer e any-pointer.

O recurso de mídia pointer se refere ao dispositivo de entrada principal do usuário, enquanto any-pointer se refere a todos os dispositivos de entrada. É possível combinar dispositivos como mouses com fine e telas touch com coarse. O valor none indica que o usuário não está usando um dispositivo de entrada com um ponteiro.

Eventos de ponteiro e toque

Desativar gestos específicos da tela touchscreen

Ao usar uma tela touch, o navegador processa alguns gestos comuns. Por exemplo, tocar na tela com dois dedos e afastá-los geralmente aumenta o zoom do site. Embora não seja necessário implementar esses comportamentos no seu site, talvez você queira desativar ou substituir esse comportamento em determinados casos.

Para recusar que o navegador processe algumas ações, liste as ações que você quer que o elemento processe. pan-x e pan-y ativam gestos de movimento com um dedo. Eles podem ser ativados junto com pinch-zoom, que permite zoom e movimentação com vários dedos.

A palavra-chave manipulation é equivalente a pan-x pan-y pinch-zoom. manipulation exclui outros comportamentos de toque que exigem vários toques em um curto período, como toque duplo para aumentar o zoom.

Depois de desativar o processamento de uma ação pelo navegador excluindo-a de touch-action, você pode configurar eventos de ponteiro para essa ação.

Desativar todos os eventos e ações

Em alguns casos, talvez seja necessário especificar que um elemento não é interativo. Ao definir pointer-events: none em um botão, por exemplo, não será possível clicar nele nem acionar um estado de passar o cursor.

Teste seu conhecimento