Otkrijte sve preglednike korisnika

U web svijetu važno je znati raditi s različitim uvjetima kada su u pitanju web aplikacije, a često su ti uvjeti određeni korištenjem određenog preglednika.

Korištenje jednog ili drugog može uvjetovati određene funkcionalnosti unutar naše aplikacije, zbog čega nam njegovo ispravno otkrivanje može uštedjeti neugodnosti i loše korisničko iskustvo u našoj aplikaciji.

Pogledajmo kako pomoću ove aplikacije možemo otkriti korisnički preglednik.

HTML kod

Naše HTML Neće uključivati ​​veću složenost, imat će osnovnu strukturu i tu ćemo uvrstiti našu CSS u zaglavlja i za optimiziranje opterećenja ćemo uključiti jQuery s vašeg CDN -a i JavaScript na kraju našeg tijela.

 Otkrijte sve preglednike

Izradit ćemo spremnik za uključivanje ikona preglednika i unutar ovih nekoliko div s različitim klasama radi bolje primjene funkcionalnosti.

Tablica stilova

S našim CSS Imat ćemo više posla, tamo ćemo dati stilove u naš spremnik, primijenit ćemo stilove na naše slike kako bismo napravili funkciju uključivanja i isključivanja prema pregledniku u kojem se izvršava naš kôd. Osim ovoga, uključit ćemo i slike s vanjskih veza radi optimizacije resursa našeg koda.

 *, *: prije, *: poslije, *: fokus, *: aktivno, *: fokus: aktivno {okvir veličine: granica-okvir; obris: nema; } html {font-size: 10px; } .kontejner {lijevo: 50vw; položaj: apsolutni; vrh: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transformirati: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -webkit-filter: u sivim tonovima (100%); filter: sive boje (100%); visina: 8rem; položaj: relativan; -webkit-prijelaz: sve .3s olakšanje; prijelaz: sve .3s olakšanje; širina: 8rem; } .kontejner. ikona: nakon {border-radius: 50%; dno: 2rem; okvir-sjena: 0 3,3rem 1rem 0 rgba (34, 34, 34, 0,4); sadržaj: ""; visina: .5rem; lijevo: 20%; položaj: apsolutni; širina: 60%; } .kontejner .icon.active {-webkit-animation-name: hover; naziv animacije: hover; -webkit-filter: sive boje (0%); filter: u sivim tonovima (0%); } .kontejner .icon.aktivan: nakon {-webkit-animation-name: hoverShadow; naziv animacije: hoverShadow; } .kontejner .icon.active, .container .icon.active: nakon {-webkit-animation-duration: .8s; animacija-trajanje: .8s; -webkit-animation-timing-function: easy-out; animacija-vrijeme-funkcija: jednostavnost-out; -webkit-animation-iteration-count: beskonačno; animacija-iteracija-broj: beskonačno; -webkit-animacija-smjer: alternativno; smjer animacije: zamjenski; } .container .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); pozadinsko ponavljanje: bez ponavljanja; veličina pozadine: 8rem 8rem; } .container .icon.safari {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); background-repeat: bez ponavljanja; veličina pozadine: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); pozadinsko ponavljanje: bez ponavljanja; veličina pozadine: 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: bez ponavljanja; veličina pozadine: 8rem 8rem; } @ -webkit -keyframes lever {from {top: 0; -webkit-transformacija: scaleX (1) scaleY (1); transformirati: scaleX (1) scaleY (1); } na {vrh: -1,6rem; -webkit-transformacija: scaleX (0.9) scaleY (1.05); transformirati: scaleX (0.9) scaleY (1.05); }} @keyframes lebdi {od {top: 0; -webkit-transformacija: scaleX (1) scaleY (1); transformirati: scaleX (1) scaleY (1); } na {vrh: -1,6rem; -webkit-transformacija: scaleX (0.9) scaleY (1.05); transformirati: scaleX (0.9) scaleY (1.05); }} @ -webkit -keyframes hoverShadow {from {bottom: 2rem; okvir-sjena: 0 3,3rem 1rem 0 rgba (34, 34, 34, 0,4); lijevo: 20%; širina: 60%; } na {dno: .6rem; okvir-sjena: 0 3,2rem 1rem 0 rgba (34, 34, 34, 0,2); lijevo: 25%; širina: 50%; }} @keyframes hoverShadow {from {bottom: 2rem; okvir-sjena: 0 3,3rem 1rem 0 rgba (34, 34, 34, 0,4); lijevo: 20%; širina: 60%; } na {dno: .6rem; okvir-sjena: 0 3,2rem 1rem 0 rgba (34, 34, 34, 0,2); lijevo: 25%; širina: 50%; }}

Osim toga, koristimo svojstvo CSS3 za animaciju ikona ako je to odgovarajući preglednik za ovo ćemo koristiti -webkit-animacija-trajanje Y @ključni okviri primijeniti neke funkcionalnosti na ikone i za njih uspostavljamo unaprijed određena mjerenja.

Javascript kod

Zadnji u našem kodu JavaScript imat ćemo funkcionalnost koja će nam omogućiti otkrivanje vrste preglednika, s kojim ćemo se koristiti korisnički agent Da bismo to učinili, uključit ćemo dva uvjeta, jedan za konvencionalne preglednike i kao Windows 10 već stvara prilično buke, uključit ćemo uvjet za otkrivanje Microsoft Edgea.

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

Za kraj koristimo neke od jQuery primijeniti klasu imovine prema uvjetu koji je ispunjen addClass () a time bismo našu aplikaciju dovršili i mogli bismo vidjeti kako izgleda kada je otvorimo Firefox.

Već imamo način da otkrijemo preglednik koji korisnik koristi i sve to iz jedne aplikacije, dajući nam mogućnost da znamo odakle ulaze i koje radnje možemo poduzeti prema ovoj radnji.

Isprobajte, jako mi se sviđa primijenjeni pristup, zbog njegove čistoće i brze grafičke kvalitete.

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod