Ação de toque - CSS-Tricks

Anonim

A touch-actionpropriedade em CSS oferece controle sobre o efeito das interações da tela de toque com um elemento, semelhante à pointer-eventspropriedade mais amplamente usada para controlar as interações do mouse.

#element ( touch-action: pan-right pinch-zoom; )

A touch-actionpropriedade é útil principalmente para elementos de interface do usuário interativos que precisam de um comportamento ligeiramente diferente, dependendo do tipo de dispositivo que está sendo usado. Quando seus usuários podem esperar que um elemento se comporte de uma maneira particular com um mouse, e um comportamento ligeiramente diferente em uma tela de toque, touch-actionserá útil.

O exemplo mais óbvio disso é um elemento de mapa interativo. Se você já viu um mapa que não foi projetado para funcionar com dispositivos de toque, provavelmente tentou pinçar e aplicar zoom apenas para encontrar o navegador ampliando o elemento, mas não ampliando o mapa real.

Por padrão, um navegador irá lidar com as interações de toque automaticamente: apertar os dedos para ampliar, deslizar para rolar, etc. Definir touch-actioncomo nonedesativará todo o tratamento desses eventos pelo navegador, deixando a sua implementação (via JavaScript). Se você deseja assumir apenas uma interação, diga ao navegador para lidar com o resto. Por exemplo, se você escreveu alguns JavaScript que apenas alças zoom, você pode dizer ao navegador para lidar com tudo o resto com esta propriedade: touch-action: pan-x pan-y;.

Veja os exemplos da caneta de ação de toque por CSS-Tricks (@ css-tricks) no CodePen.

Sintaxe

touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulation

Valores

A touch-actionpropriedade aceita os seguintes valores:

  • auto: Permite que o navegador controle todas as interações de panorâmica e zoom.
  • none: Desativa os navegadores de lidar com todas as interações de panorâmica e zoom. Isso abre a capacidade de definir essas interações de forma personalizada em JavaScript.
  • pan-x: Ativa a panorâmica horizontal com a interação de um único dedo. Ele é a abreviatura para os pan-lefte pan-rightvalores, mas pode ser usado em combinação com pan-y, pan-up, pan-downe pinch-zoom.
  • pan-yAtiva a panorâmica vertical com a interação de um único dedo. Ele é a abreviatura para os pan-upe pan-downvalores, mas pode ser usado em combinação com pan-x, pan-left, pan-righte pinch-zoom.
  • manipulation: Ativa as interações de pinça e zoom, mas desativa outras que você pode encontrar em alguns dispositivos, como tocar duas vezes para aplicar zoom. É uma abreviatura para a combinação de pan-x pan-y pinch-zoom.
  • pan-left (Experimental): Ativa uma única interação com o dedo quando o dedo de um usuário se move para a direita, que faz uma panorâmica para a esquerda.
  • pan-right (Experimental): Ativa uma única interação com o dedo quando o dedo de um usuário se move para a esquerda, que faz uma panorâmica para a direita.
  • pan-down (Experimental): Ativa uma única interação com o dedo quando o dedo de um usuário se move para cima, que move para baixo.
  • pan-up (Experimental): Ativa uma única interação com o dedo quando o dedo de um usuário se move para baixo, que move para cima.
  • pinch-zoom: Permite interações com vários dedos e pode ser combinado com qualquer outro pan-valor.

Relacionado

  • pointer-events

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
36 52 10 * 12 Não

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 13,0-13,1

Safari é a omissão flagrante de suporte de ação por toque. iOs Safari tem suporte limitado, apenas para os valores autoe manipulation.

Informações adicionais

  • Especificação de nível 2 de eventos de ponteiro - A especificação está atualmente na recomendação candidata, mas deve ser movida para a recomendação proposta no início de 2019, no momento da redação deste documento. A intenção é que o documento se torne uma recomendação oficial do W3C.
  • Documentação MDN
  • Amostra de propriedade CSS de ação de pinça-zoom de toque - demonstração de implementação do Google Chrome
  • WebKit Bugzilla Ticket # 133112 - Abra o ticket para propor suporte ao Safari. Adicione o seu voto para aumentar.