Открийте всички браузъри на потребителя

В уеб света е важно да знаете как да работите с различни условия, когато става въпрос за уеб приложения, и много пъти тези условия се определят от използването на определен браузър.

Използването на едно или друго може да обуслови определени функционалности в нашето приложение, поради което правилното му откриване може да ни спести неудобства и лошо потребителско изживяване в нашето приложение.

Нека да видим как можем да открием браузъра на потребителя с това приложение.

HTML код

Нашите HTML Тя няма да включва по -голяма сложност, ще има основна структура и там ще включим нашата CSS в заглавките и за оптимизиране на натоварването ще включим jQuery от вашия CDN и JavaScript в края на тялото ни.

 Открийте всички браузъри

Ще създадем контейнер, който да включва иконите на браузърите и в рамките на тези няколко div с различни класове, за да приложим по -добре функционалността.

Таблица със стилове

С нашето CSS Ще имаме повече работа, там ще дадем стиловете на нашия контейнер, ще приложим стилове към нашите изображения, за да направим функционалност за включване и изключване според браузъра, в който се изпълнява нашият код. В допълнение към това ще включим изображенията от външни връзки, за да оптимизираме ресурсите на нашия код.

 *, *: преди, *: след, *: фокус, *: активен, *: фокус: активен {box-sizing: border-box; контур: няма; } html {font-size: 10px; } .контейнер {вляво: 50vw; позиция: абсолютна; отгоре: 50vh; -webkit-преобразуване: translateX (-50%) translateY (-50%); -ms-преобразуване: translateX (-50%) translateY (-50%); преобразуване: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -webkit-филтър: оттенъци на сивото (100%); филтър: оттенъци на сивото (100%); височина: 8rem; позиция: относителна; -webkit-преход: всички .3s облекчаване; преход: всички .3s облекчение; ширина: 8rem; } .контейнер. икона: след {border-radius: 50%; дъно: 2рем; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); съдържание: ""; височина: .5rem; ляво: 20%; позиция: абсолютна; ширина: 60%; } .контейнер .icon.active {-webkit-animation-name: hover; animation-name: hover; -webkit-филтър: оттенъци на сивото (0%); филтър: оттенъци на сивото (0%); } .контейнер .icon.active: след {-webkit-animation-name: hoverShadow; анимация-име: hoverShadow; } .контейнер .icon.active, .container .icon.active: след {-webkit-animation-duration: .8s; анимация-продължителност: .8s; -webkit-animation-timing-function: облекчение; animation-timing-function: облекчение; -webkit-animation-iteration-count: безкраен; анимация-итерация-брой: безкрайно; -webkit-animation-direction: алтернативен; анимация-посока: алтернативна; } .container .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); фон-повторение: без повторение; размер на фона: 8rem 8rem; } .container .icon.safari {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); фон-повторение: без повторение; размер на фона: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); фон-повторение: без повторение; размер на фона: 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); фон-повторение: без повторение; размер на фона: 8rem 8rem; } @ -webkit -keyframes hover {от {top: 0; -webkit-преобразуване: scaleX (1) scaleY (1); трансформиране: scaleX (1) scaleY (1); } към {горе: -1.6rem; -webkit-преобразуване: scaleX (0.9) scaleY (1.05); трансформиране: scaleX (0.9) scaleY (1.05); }} @keyframes hover {от {top: 0; -webkit-преобразуване: scaleX (1) scaleY (1); трансформиране: scaleX (1) scaleY (1); } към {горе: -1.6rem; -webkit-преобразуване: scaleX (0.9) scaleY (1.05); трансформиране: scaleX (0.9) scaleY (1.05); }} @ -webkit -keyframes hoverShadow {от {дъно: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); ляво: 20%; ширина: 60%; } към {дъно: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); ляво: 25%; ширина: 50%; }} @keyframes hoverShadow {от {дъно: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); ляво: 20%; ширина: 60%; } към {дъно: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); ляво: 25%; ширина: 50%; }}

Освен това използваме свойството на CSS3 за анимиране на иконите, ако това е съответният браузър за това ще използваме -webkit-animation-duration Y @keyframes за да приложим някои функционалности към иконите и ние установяваме предварително определени измервания за тях.

Javascript код

Последно в нашия код JavaScript ще имаме функционалността, която ще ни позволи да открием типа браузър, с който ще използваме userAgent За да направим това, ще включим две условия, едно за конвенционалните браузъри и като Windows 10 вече вдига доста шум, ще включим условие за откриване на Microsoft Edge.

 $ (document) .ready (function () {var ua = navigator.userAgent.match ( / (opera | chrome | safari | firefox) \ /? \ s * (\.? \ d + (\. \ d +) *)/ i), браузър; if (navigator.userAgent.match (/ Edge/ i) || navigator.userAgent.match (/Trident.*rv [:] *11 \ ./ i)) {browser = "msie ";} else {browser = ua [1] .toLowerCase ();} $ ('div.icon.' + браузър) .addClass (" активен ");});

За да завършим използваме някои от jQuery да се приложи класът на активите според условието, което е хвърлено с addClass () и с това щяхме да завършим нашето приложение и можем да видим как изглежда, когато го отворим Firefox.

Вече имаме начин да открием браузъра, който потребителят използва, и всичко това от едно приложение, което ни дава възможност да знаем откъде влизат и какви действия можем да предприемем според това действие.

Опитайте, много ми харесва използваният подход, за неговата чистота и бързо графично качество.

Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка