Como detectar touch com CSS puro

Detectar touch com CSS puro?! Muitos devs ansiávamos pelo dia em que seria possível, através da evolução do CSS, conseguir identificar touch com CSS puro. E esta nossa antiga aspiração está bem perto de se tornar realidade.

Então, continue lendo e saiba como detectar touch com CSS puro (ou, se preferir, como identificar touch com CSS puro) através de novas features de folhas de estilo.

Os novos padrões de desenvolvimento em CSS estão proporcionando um futuro melhor para os desenvolvedores que precisamos detectar dispositivos touch (dispositivos de toque) apenas com CSS puro.

De fato, CSS Media Queries Level 4 vai fornecer 2 novos recursos: hover e pointer.

Interaction Media Features: Hover

Hover media feature é usado para consultar (query) a capacidade do usuário de passar o mouse (hover) sobre elementos na página com o dispositivo apontador principal (primary pointing device).

Se um dispositivo tiver suporte para múltiplos pointing devices, o recurso de mídia instantânea deve refletir as features do dispositivo apontador “principal”, conforme determinado pelo agente do usuário (user agent).

Com o termo dispositivo apontador “principal” (“primary” pointing device), o rascunho do W3C pretende designar o sistema de mecanismo de entrada principal (input mechanism system), via método ou gesto ou hardware.

Como o rascunho do W3C está padronizado, o Interaction Media Features “hover” pode ter 2 valores diferentes.

1. Se o sistema de mecanismo de entrada principal do dispositivo puder passar sobre elementos (hover) com facilidade, usa-se hover:

2. Se o sistema de mecanismo de entrada principal do dispositivo não puder passar facilmente sobre elementos (hover) ou eles puderem, mas não facilmente (por exemplo, um toque longo for executado para emular o foco) ou não houver nenhum mecanismo de entrada principal, usa-se none:

Interaction Media Features: Pointer

O recurso de mídia de ponteiro (pointer media feature) é usado para consultar (query) a presença e a precisão de um dispositivo apontador (pointing device), como um mouse.

Se vários dispositivos apontadores (pointing devices) estiverem presentes, o recurso de mídia do ponteiro deve refletir as características do dispositivo apontador “principal”, conforme determinado pelo agente do usuário (user agent).

Novamente, na questão sobre como detectar touch com CSS puro, o dispositivo apontador “primário” (“primary” pointing device) é planejado como o mecanismo de entrada principal (input mechanism system).

Como o rascunho do W3C está padronizado, o Interaction Media Features “pointer” pode ter 3 valores diferentes.

1. Se o mecanismo de entrada principal do dispositivo inclui um dispositivo apontador de precisão limitada (pointing device of limited accuracy), usa-se coarse:

2. Se o mecanismo de entrada principal do dispositivo incluir um dispositivo apontador preciso (accurate pointing device), usa-se fine:

3. Se o mecanismo de entrada principal do dispositivo não incluir um dispositivo apontador, usa-se none:

Segmentar (Target) dispositivos específicos

Também é possível combinar esses 2 recursos para corresponder (match) a dispositivos existentes específicos:

Nota: em caso de várias entradas (multiple inputs), hover e pointer estão direcionados ao dispositivo de entrada principal (primary input device).

Segmentar (Target) todos os dispositivos

Para identificar touch com CSS, também é possível usar any-hover e any-pointer para consultar (query) todos os dispositivos de entrada, dessa forma,

any-pointer é usado para consultar (query) a presença (presence) e a precisão (accuracy) dos dispositivos apontadores.

Ele não leva em conta nenhuma entrada adicional de dispositivo não apontador e não pode ser usado para testar a presença de outros mecanismos de entrada, como d-pads ou controles somente de teclado (keyboard-only) que não movem um ponteiro na tela.

any-pointer: none só será avaliado (evaluated) como verdadeiro se não houver dispositivos apontadores presentes.

any-hover: none só será avaliado (evaluate) como verdadeiro se não houver dispositivos apontadores ou se todos os dispositivos apontadores apresentarem falta de capacidades para hover. Como tal, deve ser entendido como uma consulta (query) para testar se estão presentes dispositivos apontadores capazes de passar o cursor (hover-capable) em vez de saber se algum dos dispositivos apontadores é ou não capaz de passar o mouse (hover-incapable).

O último cenário atualmente não pode ser determinado usando any-hover ou qualquer outro recurso de interação (media feature). Além disso, ele não leva em consideração nenhuma entrada de dispositivo não apontador (non-pointing device inputs), como d-pads ou controles somente de teclado (keyboard-only), que por sua própria natureza também não são capazes de passar o mouse (not hover-capable).

Conclusão sobre como detectar touch com CSS puro

Sobre como detectar touch com CSS puro, lembre-se de usar esses recursos somente se tiver certeza de que seu sistema é usado apenas por determinados tipos de navegadores.

Como alertado mais acima, por enquanto, trata-se apenas de um rascunho. É cedo para esses recursos terem a devida acolhida. Em outras palavras, o suporte dos principais navegadores para Interaction Media Features não é ruim, mas ainda há espaço para aprimoramentos.

Fica a dúvida: no final das contas, haverá uma nova versão oficial, CSS 4, incluindo isso?

Na data de publicação deste artigo, para uma solução cross browser/cross device, é preciso recorrer a soluções JavaScript como a mostrada neste pen.

De qualquer maneira, está próximo, muito próximo, o dia em que nós, desenvolvedores web, conseguiremos detectar dispositivos de toque, os famosos touch, somente com CSS puro nativamente.

Só temos que ter mais um pouco de paciência. Falta só mais um pouquinho.