# Como detectar touch com CSS puro

> Aprenda a detectar dispositivos touch com CSS puro usando Interaction Media Features. Hover e pointer para suporte a diferentes tipos de entrada. Detecte!

URL: https://dpw.dev/css/como-detectar-touch-com-css-puro/  
Publicado em: 2019-04-22  
Categoria: css  
Tags: planejamento, web-design-responsivo  
Autor: Tárcio Zemel

**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.

> **Atenção:** no W3C.

> Artigo baseado em [Detect a touch device with only CSS](https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134).

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](https://www.w3.org/TR/mediaqueries-4/) vai fornecer 2 novos recursos: [hover](https://drafts.csswg.org/mediaqueries/#hover) e [pointer](https://drafts.csswg.org/mediaqueries/#pointer).

## Interaction Media Features: Hover

> **Dica:** Em CSS, Interaction Media Features estão relacionadas a vários aspectos de como o usuário interage com a página.

> 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`:

```typescript
@media (hover: 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`:

```typescript
@media (hover: 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`:

```typescript
@media (pointer: coarse) 
```

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

```typescript
@media (pointer: fine) 
```

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

```typescript
@media (pointer: none) 
```

## Segmentar (Target) dispositivos específicos

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

```typescript
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) 

/* stylus-based screens */
@media (hover: none) and (pointer: fine) 

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) 

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) 
```

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](https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-hover) e [any-pointer](https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-hover) 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.

```typescript
/* pelo menos um mecanismo de input do dispositivo inclui dispositivo de apontamento de precisão limitada */
@media (any-pointer: coarse) 

/* pelo menos um mecanismo de input do dispositivo inclui dispositivo de apontamento de precisão preciso */
@media (any-pointer: fine) 

/* o dispositivo não inclui qualquer dispositivo de apontamento */
@media (any-pointer: none) 
```

> `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_).

```typescript
/* um ou mais mecanismo(s) de entrada disponíveis podem passar por cima (hover over) de elementos com facilidade */
@media (any-hover: hover) 

/* um ou mais mecanismo(s) de entrada disponíveis podem fazer hover, mas não com facilidade
  (por exemplo, simulando o foco ao executar um toque longo) */
@media (any-hover: on-demand) 

/* um ou mais mecanismo(s) de entrada disponíveis não podem fazer hover ou não há
   mecanismos de entrada de apontamentos (pointing input mechanisms) */
@media (any-hover: none) 
```

## Conclusão sobre como detectar touch com CSS puro

> **Dica:** .

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](https://caniuse.com/#feat=css-media-interaction), mas ainda há espaço para aprimoramentos.

![Como detectar touch com CSS puro: suporte dos principais navegadores a Interaction Media Features na data de publicação deste artigo.](/images/blog/como-detectar-touch-com-css-puro/como-detectar-touch-com-css-puro-interaction-media-features-suporte-1024x498.webp)

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](https://stackoverflow.com/search?q=detect+a+touch+device+javascript) como a mostrada [neste pen](https://codepen.io/Ferie/pen/vQOMmO).

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.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml