В веб-мире важно знать, как работать с различными условиями, когда речь заходит о веб-приложениях, и во многих случаях эти условия определяются использованием определенного браузера.
Использование того или другого может обуславливать определенные функциональные возможности нашего приложения, поэтому его правильное обнаружение может избавить нас от неудобств и плохого взаимодействия с пользователем в нашем приложении.
Давайте посмотрим, как мы можем определить браузер пользователя с помощью этого приложения.
HTML код
Наш HTML не будет более сложным, он будет иметь базовую структуру, и там мы включим наш CSS в заголовки, а для оптимизации загрузки мы добавим jQuery из вашего CDN и JavaScript в конце нашего тела.
Обнаружить все браузерыТаблица стилей
С нашим CSS у нас будет больше работы, там мы передадим стили нашему контейнеру, мы применим стили к нашим изображениям для включения и выключения функциональности в соответствии с браузером, в котором работает наш код. В дополнение к этому мы будем включать изображения из внешних ссылок для оптимизации ресурсов нашего кода.*, *: до, *: после, *: фокус, *: активный, *: фокус: активный {размер рамки: рамка рамки; контур: нет; } html {font-size: 10px; } .container {слева: 50vw; положение: абсолютное; верх: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transform: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -вебкит-фильтр: оттенки серого (100%); фильтр: оттенки серого (100%); высота: 8рем; положение: относительное; -webkit-transition: все .3s облегчение; переход: все .3s замедление; ширина: 8рем; } .container .icon: after {border-radius: 50%; внизу: 2рем; тень от коробки: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0, 4); содержание: ""; высота: .5рем; слева: 20%; положение: абсолютное; ширина: 60%; } .container .icon.active {-webkit-animation-name: hover; название анимации: зависание; -вебкит-фильтр: оттенки серого (0%); фильтр: оттенки серого (0%); } .container .icon.active: after {-webkit-animation-name: hoverShadow; имя-анимации: hoverShadow; } .container .icon.active, .container .icon.active: after {-webkit-animation-duration: .8s; продолжительность анимации: 0, 8 с; -WebKit-анимация-время-функция: простота; анимация-функция времени: простота; -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.webp"); повторение фона: без повтора; размер фона: 8rem 8rem; } .container .icon.safari {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.webp"); повторение фона: без повтора; размер фона: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.webp"); повторение фона: без повтора; размер фона: 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.webp"); повторение фона: без повтора; размер фона: 8rem 8rem; } @ -webkit-keyframes hover {from {top: 0; -webkit-transform: scaleX (1) scaleY (1); преобразование: scaleX (1) scaleY (1); } до {top: -1.6rem; -webkit-transform: scaleX (0, 9) scaleY (1, 05); преобразование: scaleX (0, 9) scaleY (1, 05); }} @keyframes hover {from {top: 0; -webkit-transform: scaleX (1) scaleY (1); преобразование: scaleX (1) scaleY (1); } до {top: -1.6rem; -webkit-transform: scaleX (0, 9) scaleY (1, 05); преобразование: scaleX (0, 9) scaleY (1, 05); }} @ -webkit-keyframes hoverShadow {from {bottom: 2rem; тень от коробки: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0, 4); слева: 20%; ширина: 60%; } до {снизу: .6rem; тень от коробки: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0, 2); слева: 25%; ширина: 50%; }} @keyframes hoverShadow {from {bottom: 2rem; тень от коробки: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0, 4); слева: 20%; ширина: 60%; } до {снизу: .6rem; тень от коробки: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0, 2); слева: 25%; ширина: 50%; }}Кроме того, мы используем свойство CSS3 для анимации значков, если для этого используется соответствующий браузер, мы будем использовать -webkit-animation-duration и @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.' + browser) .addClass ("active");});Наконец, мы используем некоторый jQuery для применения активного класса в соответствии с условием, которое генерируется с помощью addClass (), и на этом наше приложение будет завершено, и мы сможем увидеть, как оно выглядит, когда мы открываем его с помощью Firefox .У нас уже есть способ обнаружить браузер для использования пользователя и всего из одного приложения, что дает нам возможность узнать, откуда вы входите и какие действия мы можем предпринять в соответствии с этим действием.
Докажите, что мне действительно нравится подход, за его чистоту и быстрое качество графики.
- 0
СТАТЬИ