Wykryj wszystkie przeglądarki użytkownika

W świecie sieciowym ważne jest, aby wiedzieć, jak pracować z różnymi warunkami, jeśli chodzi o aplikacje internetowe, a często te warunki są określane przez użycie określonej przeglądarki.

Użycie jednej lub drugiej może warunkować pewne funkcjonalności w naszej aplikacji, dlatego prawidłowe jej wykrycie może oszczędzić nam niedogodności i złych doświadczeń użytkowników w naszej aplikacji.

Zobaczmy, jak za pomocą tej aplikacji możemy wykryć przeglądarkę użytkownika.

Kod HTML

Nasz HTML Nie będzie to wiązało się z większą złożonością, będzie miało podstawową strukturę i tam uwzględnimy nasze CSS w nagłówkach i w celu optymalizacji obciążenia uwzględnimy jQuery z twojego CDN i JavaScript na końcu naszego ciała.

 Wykryj wszystkie przeglądarki

Stworzymy kontener zawierający ikony przeglądarek, a w ramach tych kilku divów z różnymi klasami, aby lepiej zastosować funkcjonalność.

Arkusz stylów

Z naszym CSS Będziemy mieli więcej pracy, tam dodamy style do naszego kontenera, zastosujemy style do naszych obrazów, aby włączyć i wyłączyć funkcję zgodnie z przeglądarką, w której wykonywany jest nasz kod. Oprócz tego dołączymy obrazy z linków zewnętrznych, aby zoptymalizować zasoby naszego kodu.

 *, *: przed, *: po, *: fokus, *: aktywny, *: fokus: aktywny {box-sizing: border-box; zarys: brak; } html {rozmiar-czcionki: 10px; } .container {po lewej: 50vw; pozycja: bezwzględna; góra: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: przetłumaczX (-50%) przetłumaczY (-50%); przekształcenie: przetłumaczX (-50%) przetłumaczY (-50%); } .container .icon {wyświetlanie: blok inline; -filtr webkit: skala szarości (100%); filtr: skala szarości (100%); wysokość: 8rem; pozycja: względna; -przejście na webkit: zwolnienie wszystkich .3s; przejście: wszystkie .3s luz; szerokość: 8rem; } .container .icon: after {border-radius: 50%; dół: 2rem; cień pudełka: 0 3,3 rem 1 rem 0 rgba (34, 34, 34, 0,4); treść: ""; wysokość: 0,5rem; po lewej: 20%; pozycja: bezwzględna; szerokość: 60%; } .container .icon.active {-nazwa-animacji-webkit: hover; nazwa animacji: najedź; -webkit-filter: skala szarości (0%); filtr: skala szarości (0%); } .container .icon.active: po {-webkit-animation-name: hoverShadow; nazwa animacji: hoverShadow; } .container .icon.active, .container .icon.active: po {-webkit-animacja-czas trwania: .8s; czas trwania animacji: 0,8s; -webkit-animacja-funkcja czasu: luz; funkcja czasu animacji: luz; -webkit-animacja-liczba-iteracji: nieskończona; liczba iteracji animacji: nieskończona; -webkit-animacja-kierunek: alternatywny; kierunek animacji: alternatywny; } .container .icon.chrome {obraz tła: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); powtarzanie w tle: bez powtórzeń; rozmiar tła: 8rem 8rem; } .container .icon.safari {obraz tła: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); powtarzanie w tle: bez powtórzeń; rozmiar tła: 8rem 8rem; } .container .icon.firefox {obraz tła: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); powtarzanie w tle: bez powtórzeń; rozmiar tła: 8rem 8rem; } .container .icon.msie {obraz tła: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); powtarzanie w tle: bez powtórzeń; rozmiar tła: 8rem 8rem; } @ -webkit-keyframes najedź {od {góra: 0; -webkit-transform: scaleX (1) scaleY (1); transformacja: skalaX (1) skalaY (1); } do {góry: -1.6rem; -webkit-transform: scaleX (0,9) scaleY (1,05); transformacja: skalaX (0,9) skalaY (1,05); }} @keyframes najedź {od {góra: 0; -webkit-transform: scaleX (1) scaleY (1); transformacja: skalaX (1) skalaY (1); } do {góry: -1.6rem; -webkit-transform: scaleX (0,9) scaleY (1,05); transformacja: skalaX (0,9) skalaY (1,05); }} @ -webkit-keyframes hoverShadow {od {dół: 2rem; cień pudełka: 0 3,3 rem 1 rem 0 rgba (34, 34, 34, 0,4); po lewej: 20%; szerokość: 60%; } do {dół: .6rem; box-shadow: 0 3,2rem 1rem 0 rgba (34, 34, 34, 0,2); po lewej: 25%; szerokość: 50%; }} @keyframes hoverShadow {od {bottom: 2rem; cień skrzynkowy: 0 3,3 rem 1 rem 0 rgba (34, 34, 34, 0,4); po lewej: 20%; szerokość: 60%; } do {dół: .6rem; box-shadow: 0 3,2rem 1rem 0 rgba (34, 34, 34, 0,2); po lewej: 25%; szerokość: 50%; }}

Dodatkowo korzystamy z własności CSS3 aby animować ikony, jeśli jest to odpowiednia przeglądarka, której użyjemy -webkit-animacja-czas trwania Tak @klatki kluczowe zastosować pewne funkcjonalności do ikon i ustalamy dla nich z góry ustalone pomiary.

Kod JavaScript

Ostatni w naszym kodzie JavaScript będziemy mieli funkcjonalność, która pozwoli nam wykryć typ przeglądarki, z którą będziemy korzystać agent użytkownika Aby to zrobić, uwzględnimy dwa warunki, jeden dla konwencjonalnych przeglądarek i as Okna 10 robi już sporo hałasu, dołączymy warunek wykrywania Microsoft Edge.

 $ (dokument) .ready (function () {var ua = navigator.userAgent.match (/ (opera | chrome | safari | firefox) \ /? \ s * (\.? \ d + (\. \ d +) *) / i), przeglądarka; if (navigator.userAgent.match (/ Edge / i) || navigator.userAgent.match (/Trident.*rv [:] * 11 \ ./ i)) {browser = "msie "; } else {przeglądarka = ua [1] .toLowerCase ();} $ ('div.icon.' + przeglądarka) .addClass ("aktywny");});

Na koniec używamy niektórych jQuery zastosować klasę aktywów zgodnie z warunkiem, który jest rzucany z addClass () i dzięki temu zakończylibyśmy naszą aplikację i możemy zobaczyć, jak wygląda, gdy ją otworzymy za pomocą Firefox.

Mamy już sposób na wykrycie przeglądarki, z której korzysta użytkownik i wszystko z jednej aplikacji, co daje nam możliwość poznania, skąd wchodzi i jakie działania możemy podjąć zgodnie z tą akcją.

Wypróbuj, bardzo podoba mi się zastosowane podejście, ze względu na czystość i szybką jakość grafiki.

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt