A propriedade CSS touch-action permite que um desenvolvedor restrinja como um usuário
pode interagir com um elemento, o que é especialmente útil para evitar que eventos
sejam enviados quando não for necessário.
Antes da versão 55, o Chrome oferecia suporte a pan-x e pan-y, que restringem os elementos
à rolagem em uma direção.
O vídeo abaixo mostra um exemplo de um elemento sem uma ação de toque definida (à esquerda), bem como pan-x e pan-y (meio e direita).
O CSS para os screencasts do meio e da direita:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
No Chrome 55, pan-left, pan-right, pan-up e pan-down foram adicionados. Essas
propriedades têm uma diferença sutil, mas importante, no comportamento.
Essas propriedades forçam o usuário a iniciar gestos em uma direção antes que o elemento responda. Isso é semelhante ao gesto "puxe para atualizar", que só responde quando o usuário faz gestos para baixo na tela.
O vídeo a seguir demonstra pan-right e pan-down, que
exigem gestos para começar da direita para a esquerda e de baixo para cima, respectivamente.
Uma vez iniciado o gesto, você pode
poder ir para a frente e para trás. Somente a direção inicial é afetada.
Embora o vídeo demonstre esse comportamento, talvez seja mais fácil tentar por conta própria. Para isso, confira o exemplo.
O CSS para esta demonstração é:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
A última coisa que está acontecendo no mundo da ação de toque é a
propriedade pinch-zoom. Essa é uma nova propriedade no Chrome 55, atrás de uma flag,
que pode ser usada com qualquer uma das opções de pan
(ou seja, pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Se você fizer o gesto de pinça em um site, o conteúdo da página vai ser ampliado.
A definição de um touch-action vai impedir esse comportamento, mas a adição do zoom
ativará esse comportamento novamente.
Este vídeo mostra a diferença entre touch-action: pan-x e
touch-action: pan-x pinch-zoom.
Todas essas propriedades simplificam parte da lógica que, de outra forma,
precisaria ser implementada pelos desenvolvedores usando pointer-events.