More

    Jak ugryźć CSS :hover w ekranach dotykowych?

    Ekrany dotykowe odgrywają coraz większą rolę w korzystaniu z aplikacji, co rodzi zarówno nowe możliwości, jak również wyzwania dla programistów. W tym wpisie pokażę jak za pomocą :hover w media query można wykryć typ ekranu, a także dlaczego powinniśmy uwzględnić ten podział tworząc CSS aplikacji czy strony.

    Najprawdopodobniej pierwszym, co przychodzi Ci do głowy, kiedy widzisz frazę „media query” to min-width oraz max-width. Są to dwie podstawowe właściwości, które pozwalają zdefiniować style dla konkretnych szerokości ekranu. Jednak media query ma wiele innych opcji pozwalających napisać bardziej dokładne style, niezależne tylko od szerokości ekranu. Dzięki temu mamy możliwość lepszego dostosowania witryny pod specyficzne wymagania różnych urządzeń, na których użytkownik będzie korzystał z naszej aplikacji.

    Jedną z podstawowych cech, którą różnią się od siebie urządzenia, zaraz po szerokości ekranu, jest jego typ. Chodzi tutaj o to, czy mamy do czynienia z ekranem dotykowym, czy standardowym. W zależności od tego, z którymi z nich mamy do czynienia, możemy zastosować inne style.

    Zastosowanie selektora hover

    W aplikacjach internetowych wielokrotnie używamy pseudo selektora hover. Jest on uaktywniany zawsze wtedy, kiedy kursor myszki znajduje się nad wybranym elementem. To z kolei sprawia, że strona staje się bardziej atrakcyjna dla użytkownika. Taki zabieg, oprócz wizualnych “bajerów”, sugeruje też użytkownikowi, że dany element jest klikalny i można z nim podjąć interakcję. 

    Kolejne zastosowanie dla hovera to ukrywanie mniej istotnych informacji lub przycisków i wyświetlanie ich dopiero po najechaniu na daną sekcję myszką. W tym przypadku najłatwiej wyobrazić sobie tabelkę, w której pokazujemy opcje w wierszu dopiero po najechaniu na niego. Dzięki temu aplikacja jest bardziej czytelna, a użytkownikowi nie prezentuje się zbyt wielu informacji w jednym czasie.

    Działanie hovera na ekranie dotykowym

    Problem pojawia się, kiedy użytkownik uruchamia stronę na urządzeniu mobilnym, które nie dysponuje kursorem, a interakcja z interfejsem odbywa się za pomocą dotyku. Hover w ekranach dotykowych nie działa po prostu tak, jakbyśmy tego oczekiwali. Aby go aktywować należy dotknąć dany element. Dezaktywacja natomiast odbywa się poprzez kliknięcie innego obszaru interfejsu. To sprawia, że hover na ekranach dotykowych jest nieużyteczny, a wręcz przeszkadza, przypadkowo zmieniając style elementów podczas przewijania strony.

    Style dla różnych typów ekranu

    CSS pozwala w łatwy sposób wykryć, kiedy mamy do czynienia z ekranami dotykowymi. Możemy to zrobić za pomocą media query według następującego kodu:

    :hover w ekranach dotykowych

    Pierwsze reguła zadziała na ekranach, na których hover nie jest obsługiwany. W takim przypadku możemy wyłączyć efekty ozdobne, które miały za zadanie podnieść wrażenia wizualne na stronie. Dodatkowe opcje, które chcieliśmy pokazywać tylko po najechaniu myszką, musimy pokazać na stałe, aby użytkownik miał możliwość ich wyboru. 

    Sprawdzając wsparcie dla powyższego kodu na Can I use, widzimy, że właściwość jest wspierana na wszystkich nowych przeglądarkach. Jedynie Internet Explorer nie poradzi sobie z obsługą tego kodu. Nie jest to jednak raczej duży problem, bo nie jest to przeglądarka, której używa się na urządzeniach mobilnych.

    Jak widzisz, w bardzo łatwy sposób, możemy obsłużyć przypadek, w którym nasze efekty hover nie działałyby tak, jak byśmy tego oczekiwali. Możemy to zrobić, korzystając z samego CSS, bez potrzeby angażowania w to JavaScriptu. Właściwość posiada dobre wsparcie, więc nic nie stoi na przeszkodzie, aby jej używać. Bez zastosowania tego media query, możemy po prostu założyć, że wszystkie małe ekrany są dotykowe. Jest to jednak uogólnienie, które ma swoje wady. Po pierwsze nie zawsze duży ekran na pewno ma do dyspozycji kursor. Po drugie, szerokość w media query odnosi się do szerokości okna przeglądarki. Użytkownik, który zmniejszy okno swojej przeglądarki, mimo że korzysta z komputera, miałby interfejs, który zakłada, że hover nie działa.

    Jeśli znasz inne rozwiązanie lub uważasz, że coś pominąłem, daj, proszę znać w komentarzu.

    Kamil Wilk
    Programowanie to jego pasja. Zaczynał jako samouk, poświęcił dużo czasu na własny rozwój. Obecnie pracuje w dużej korporacji jako Front-end Developer, ale back-end w JavaScript nie jest mu obcy. Nie boi się trudnych wyzwań w swojej karierze. Na bieżąco stara się śledzić nowości w branży. Lubi wyszukiwać ciekawostki ze świata dev.

    Latest articles

    11 bibliotek, które powinien znać każdy iOS developer

    Przez dwanaście lat, App Store mocno zadomowił się na naszych urządzeniach mobilnych, oferując coraz to większą różnorodność aplikacji. W tym roku ich...

    Jak używać Web Components w Reactcie i Angularze

    Kontynuujemy temat użycia Web Components w budowaniu aplikacji. W tym wpisie przyjrzymy się ich zastosowaniu wraz z popularnymi frameworkami JS-wymi.

    Hacktoberfest – ten hackathon to małe piwo

    Hackathon to wydarzenie programistyczne polegające na zrealizowaniu w określonym czasie projektu zgodnego założeniami organizatora. Większość z was pewnie kojarzy słowo Hackathon. Najczęściej...

    #IThotStory, czyli największe wpadki programistów

    Co prawda programista to nie saper i może pomylić się więcej niż raz, ale każda wpadka niesie za sobą jakieś ryzyko. Zaliczyliście...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X