Wykrywanie urządzenia dotykowego samym CSS

Nowe standardy w CSS ułatwiają programistom wykrywanie dotykowych urządzeń przy pomocy CSS.

CSS Media Queries level 4 zapewnią dwie nowe właściwości: hover i pointer.

Właściwości interakcji z mediami: Hover

Właściwość hover jest używana, by odpytać o możliwość najechania na element na stronie kursorem przy pomocy podstawowego urządzenia wskazującego. Jeżeli urządzenie ma wiele urządzeń wskazujących, to właściwość mediów hover musi odzwierciedlać charakterystykę podstawowego urządzenia wskazującego, wyznaczonego przez przeglądarkę.

Właściwość hover może mieć dwie wartości:

• Jeżeli podstawowy mechanizm wprowadzenia potrafi najechać na element, to przyjmuje wartość hover
  

  @media (hover: hover) {
      /* ... */
  }

• Jeżeli podstawowy mechanizm wprowadzania nie potrafi najechać na element natywnie - nawet w przypadku gdy najechanie na element emulowane jest długim dotknięciem palcem - albo w ogóle nie ma mechanizmu wprowadzania, to wartością jest none
  

  @media (hover: none) {
      /* ... */
  }

Właściwość interakcji z mediami: Pointer

Właściwość pointer jest używana do odpytania o obecność precyzyjnego urządzenia wskazującego, takiego jak mysz. Jeżeli urządzenie ma wiele urządzeń wskazujących, właściwość mediów pointer musi odzwierciedlać charakterystykę podstawowego urządzenia wskazującego, wyznaczonego przez przeglądarkę.

Właściwość pointer może mieć 3 wartości

• Jeżeli podstawowy mechanizm wskazujący to urządzenie o ograniczonej precyzji, to wartością będzie coarse
  

  @media (pointer: coarse) {
      /* ... */
  }

• Jeżeli podstawowy mechanizm wskazujący to precyzyjne urządzenie wskazującego, to wartością będzie fine
  

  @media (pointer: fine) {
      /* ... */
  }

• Jeżeli podstawowy mechanizm wskazujący nie zawiera urządzenia wskazującego, to wartością będzie none
  

  @media (pointer: none) {
      /* ... */
  }

Wybieranie określonego, istniejącego urządzenia

Możemy połączyć te dwie właściwości, by dopasować konkretne urządzenia.

/* smartphony, ekrany dotykowe */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* ekrany z rysikiem */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Kontroler Nintendo Wii, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* myszka, touchpad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

Uwaga: jeżeli jest wiele urządzeń wejściowych, to właściwości hover i pointer dotyczą podstawowego urządzenia wejściowego.

Sprawdzenie wszystkich urządzeń wejściowych

Możemy użyć any-hover i any-pointer, by odpytać wszystkie urządzenia wejściowe.

any-pointer jest używane, by sprawdzić obecność i precyzję dostępnych urządzeń wskazujących. Nie bierze pod uwagę urządzeń wejściowych innego typu i nie może być użyte, by testować obecność innych mechanizmów wprowadzenia takich jak pad kierunkowy czy klawiatura, która nie przesuwa kursora na ekranie. 'any-pointer: none' ewaluuje się do true tylko, jeżeli w ogóle nie ma urządzeń wskazujących.

/* przynajmniej jeden mechanizm wprowadzania to urządzenie wskazujące o ograniczonej precyzji. */
@media (any-pointer: coarse) {
    /* ... */
}
/* przynajmniej jeden mechanizm wprowadzania to urządzenie wskazujące o dużej precyzji. */
@media (any-pointer: fine) {
    /* ... */
}
/* urządzenie nie ma urządzeń wskazujących */
@media (any-pointer: none) {
    /* ... */
}

any-hover: none ewaluuje się do true, tylko jeżeli nie ma urządzeń wskazujących albo jeżeli żadne z urządzeń wskazujących nie potrafi najechać na element. Dlatego ta właściwość powinna być rozumiana jako sposób na testowanie obecności jakiegokolwiek urządzenia wskazującego, które ma zdolność najechania na element. Nie potrafi natomiast stwierdzić czy jest jakieś urządzenie, które nie jest w stanie tego osiągnąć. Drugi scenariusz w tym momencie nie może zostać zrealizowany przy użyciu właściwości interakcji z mediami. Dodatkowo właściwość ta nie bierze pod uwagę innych
mechanizmów wprowadzania, takich jak pad kierunkowy czy klawiatura, które z natury nie potrafią najeżdżać na elementy.

/* jeden lub więcej mechanizmów wprowadzania potrafi najechać na element natywnie */
@media (any-hover: hover) {
    /* ... */
}
/* jeden lub więcej mechanizmów wprowadzania potrafi najechać na element, ale wymaga to dodatkowej implementacji (np. przez emulację długim przyciśnięciem) */
@media (any-hover: on-demand) {
    /* ... */
}
/* jeden lub więcej mechanizmów prowadzania nie potrafi najechać na element albo nie ma urządzeń wskazujących */
@media (any-hover: none) {
    /* ... */
}

Podsumowanie

Używaj tych funkcji tylko, jeżeli masz pewność, że Twoja aplikacja jest używana tylko na odpowiednich przeglądarkach.

Standard jest obecnie w fazie Candidate Recommendation. Większość głównych przeglądarek wspiera już te funkcje, jednak jest też wiele, które nie dają takich możliwości:

Być może w przyszłości pojawi się nowa oficjalna wersja CSS 4, która będzie zawierać te funkcje?

Jeżeli jednak potrzebujesz szerokiego wsparcia dla każdej przeglądarki i platformy, to możesz przyjrzeć się rozwiązaniom javascriptowym takim jak to.

Oryginalny tekst w języku angielskim przeczytasz tutaj.