10 mar 2022

#shorts - wykrycie za pomocą css czy ekran ma funkcje dotykowe czy nie

Dość często potrzebujemy aby style były widoczne lub inaczej się zachowaywały/wyglądały gdy użytkownik używa strony na desktopie a inaczej na urządzeniu mobilnym "dotykowym" bez urządzenia sterującego np. myszy.

Do detekcji typu urządzenia możemy użyć "media queries".

Najpierw przyglądnijmy się @media (hover: hover)
W poniższym przykładzie jedynie urządzenia które mają możliwość najechania kursorem na element zmienią jego background. Oczywiście ten przykład jest mało życiowy, ale wyobraź sobie że możemy ukryć/pokazać element w zależności od urządzenia i nie potrzebujemy do tego js.

<a href="#">Link który powinien być podświetlić</a>
@media (hover: hover) {
  a:hover {
    background: red;
  }
}

Inne dość przydatne media queries to @media (pointer: fine), @media (pointer: coarse)
Za jego pomocą możemy sprawdzić jak dokładne - precyzyjne jest urządzenie sterujące.

<input id="test" type="checkbox" />
<label for="test">Look at me!</label>
input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}

@media (pointer: coarse) za jego pomocą sprawdzamy jak urządzenie jest dokładne. Użycie palca poruszając się po stronie i dotykanie elementów jest mniej precyzyjne niż użycie kursora myszki.

W powyższym kodzie na urządzeniu mobilnym wielkość checkboxa zostanie zwiększona do 30px a także color i wielkość bordera.

Jeżeli ciekawi Was ten temat polecam oczywiście skarbnicę wiedzy Using_media_queries. Znajdziecie tam więc różnych Media features. Zerknij również na stronę MEDIA QUERY TESTER na której możesz przetestować własne urządzenia, aby zobaczyć, które z tych zapytań o media mają do niego zastosowanie, a także zobaczyć niektóre z najpopularniejszych ustawień urządzeń.