Gostaria de fornecer um comportamento separado para os navegadores que suportam o hover (por exemplo, navegadores de desktop) e os que não suportam (por exemplo, dispositivos com tela de toque). Especificamente, quero declarar um estado de foco em navegadores que o suportam, mas não em navegadores que não suportam, para evitar que os navegadores móveis o emulem com toques extras, pois isso interrompe outras interações na página - não definindo um foco estado para esses navegadores, isso é evitado.

Eu li sobre oConsultas de mídia de interação recurso e parece que deve fazer o truque. Eu seria capaz de fazer algo como:

@media (hover: none) {
  /* behaviour for touch browsers */
}

De acordo comEu posso usar está disponível em todos os navegadores que eu preciso oferecer suporte, exceto IE11 e Firefox.

Então, eu me perguntava se eu poderia fazer o contrário - já que os principais dispositivos de toque o suportam e o negam:

@media not (hover: none) {
  /* behaviour for desktop browsers */
}

No entanto, isso parece não funcionar.

Exemplo de pseudocódigo do que estou tentando fazer:

.myelement {
  /* some styling */
  /* note: no hover state here */
}
@media(this device supports hover) {
  .myelement:hover {
    /* more styling */
  }
}

Então, existe uma maneira de fazer isso funcionar da maneira pretendida, ou estou no caminho errado?