Detectați toate browserele utilizatorului

În lumea web este important să știți cum să lucrați cu condiții diferite atunci când vine vorba de aplicații web și de multe ori aceste condiții sunt determinate de utilizarea unui anumit browser.

Utilizarea uneia sau alteia poate condiționa anumite funcționalități din cadrul aplicației noastre, motiv pentru care detectarea corectă a acesteia ne poate economisi inconveniente și experiențe proaste ale utilizatorului în aplicația noastră.

Să vedem cum putem detecta browserul utilizatorului cu această aplicație.

Cod HTML

Al nostru HTML Nu va implica o complexitate mai mare, va avea o structură de bază și acolo vom include și pe noi CSS în anteturi și pentru a optimiza sarcina pe care o vom include jQuery de pe CDN și JavaScript la capătul corpului nostru.

 Detectați toate browserele

Vom crea un container pentru a include pictogramele browserelor și în cadrul acestor câteva div cu clase diferite pentru a aplica mai bine funcționalitatea.

Foaie de stil

Cu a noastră CSS Vom avea mai multă muncă, acolo vom da stilurile containerului nostru, vom aplica stiluri imaginilor noastre pentru a crea o funcționalitate de pornire și oprire în funcție de browserul în care se execută codul nostru. În plus, vom include imagini de la linkuri externe pentru a optimiza resursele codului nostru.

 *, *: înainte, *: după, *: focus, *: activ, *: focus: activ {box-sizing: border-box; contur: nici unul; } html {font-size: 10px; } .container {left: 50vw; poziție: absolută; partea de sus: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transform: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -filtru-web: filtru de gri (100%); filtru: în tonuri de gri (100%); înălțime: 8rem; poziție: relativă; -webkit-tranziție: toate .3s ușurință-out; tranziție: toate .3s ușurință; lățime: 8rem; } .container .icon: după {border-radius: 50%; jos: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); conținut: ""; inaltime: .5rem; stânga: 20%; poziție: absolută; lățime: 60%; } .container .icon.active {-webkit-animation-name: hover; animație-nume: plasați; -webkit-filter: scala de gri (0%); filtru: în tonuri de gri (0%); } .container .icon.active: după {-webkit-animation-name: hoverShadow; nume-animație: hoverShadow; } .container .icon.active, .container .icon.active: după {-webkit-animation-duration: .8s; animație-durată: .8s; -webkit-animation-timing-function: ușurință; funcția de animare-sincronizare: ușurință; -webkit-animation-iteration-count: infinit; animație-iterație-număr: infinit; -webkit-animație-direcție: alternativ; animație-regie: alternativă; } .container .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); background-repeat: no-repeat; fundal-dimensiune: 8rem 8rem; } .container .icon.safari {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); background-repeat: no-repeat; fundal-dimensiune: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); background-repeat: no-repeat; fundal-dimensiune: 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); background-repeat: no-repeat; fundal-dimensiune: 8rem 8rem; } @ -webkit-keyframes planează {din {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformare: scaleX (1) scaleY (1); } la {top: -1,6rem; -webkit-transform: scaleX (0,9) scaleY (1,05); transformare: scaleX (0,9) scaleY (1,05); }} @keyframes planează {din {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformare: scaleX (1) scaleY (1); } la {top: -1,6rem; -webkit-transform: scaleX (0,9) scaleY (1,05); transformare: scaleX (0,9) scaleY (1,05); }} @ -webkit-keyframes hoverShadow {de la {jos: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); stânga: 20%; lățime: 60%; } la {jos: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); stânga: 25%; lățime: 50%; }} @keyframes hoverShadow {from {bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); stânga: 20%; lățime: 60%; } la {jos: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); stânga: 25%; lățime: 50%; }}

În plus, folosim proprietatea CSS3 pentru a anima pictogramele dacă este browserul corespunzător pentru aceasta vom folosi -webkit-animatie-durata Da @ cadrele cheie pentru a aplica unele funcționalități icoanelor și stabilim măsurători prestabilite pentru acestea.

Cod Javascript

Ultima în codul nostru JavaScript vom avea funcționalitatea care ne va permite să detectăm tipul de browser, cu care vom folosi agent utilizator Pentru a face acest lucru, vom include două condiții, una pentru browserele convenționale și as Windows 10 deja face destul de puțin zgomot, vom include o condiție pentru a detecta Microsoft Edge.

 $ (document). ready (function () {var ua = navigator.userAgent.match (/ (opera | chrome | safari | firefox) \ /? \ s * (\.? \ d + (\. \ d +) *) / i), browser; 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 ");});

Pentru a termina folosim o parte din jQuery să aplice clasa de active în funcție de condiția cu care este aruncată addClass () și, cu aceasta, am avea aplicația noastră terminată și putem vedea cum arată când o deschidem cu Firefox.

Avem deja o modalitate de a detecta browserul pe care îl folosește utilizatorul și totul dintr-o singură aplicație, oferindu-ne posibilitatea de a ști de unde intră și ce acțiuni putem întreprinde conform acestei acțiuni.

Încercați, îmi place foarte mult abordarea utilizată, pentru curățenia și calitatea grafică rapidă.

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv