Finn alle brukerens nettlesere

I webverdenen er det viktig å vite hvordan man arbeider med forskjellige forhold når det gjelder webapplikasjoner, og mange ganger blir disse betingelsene bestemt av bruk av en bestemt nettleser.

Bruken av den ene eller den andre kan forutsette visse funksjoner i applikasjonen vår, og derfor kan den riktige oppdagelsen spare oss for ulemper og dårlige brukeropplevelser i applikasjonen vår.

La oss se hvordan vi kan oppdage brukerens nettleser med denne applikasjonen.

HTML -kode

Våre HTML Det vil ikke innebære større kompleksitet, det vil ha en grunnleggende struktur og der vil vi inkludere vår CSS i topptekstene og for å optimalisere belastningen vil vi inkludere jQuery fra CDN og JavaScript på slutten av kroppen vår.

 Finn alle nettlesere

Vi vil lage en beholder for å inkludere ikonene til nettleserne og i disse flere div med forskjellige klasser for bedre å bruke funksjonaliteten.

Stilark

Med vår CSS Vi vil ha mer arbeid, der vil vi gi stilene til beholderen vår, vi vil bruke stiler på bildene våre for å lage en av og på -funksjonalitet i henhold til nettleseren der koden vår kjøres. I tillegg til dette vil vi inkludere bildene fra eksterne lenker for å optimalisere ressursene i koden vår.

 *, *: før, *: etter, *: fokus, *: aktiv, *: fokus: aktiv {box-sizing: border-box; omriss: ingen; } html {font-size: 10px; } .container {venstre: 50vw; posisjon: absolutt; topp: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transform: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -webkit-filter: gråtoner (100%); filter: gråtoner (100%); høyde: 8rem; posisjon: slektning; -webkit-overgang: alle .3-er er lette å komme ut; overgang: alle .3-er lette ut; bredde: 8rem; } .container .icon: etter {border-radius: 50%; bunn: 2rem; boks-skygge: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); innhold: ""; høyde: .5rem; igjen: 20%; posisjon: absolutt; bredde: 60%; } .container .icon.active {-webkit-animation-name: hover; animasjonsnavn: sveve; -webkit-filter: gråtoner (0%); filter: gråtoner (0%); } .container .icon.active: etter {-webkit-animation-name: hoverShadow; animasjonsnavn: hoverShadow; } .container .icon.active, .container .icon.active: etter {-webkit-animasjon-varighet: .8s; animasjon-varighet: .8s; -webkit-animasjon-timing-funksjon: letthet; animasjon-timing-funksjon: letthet; -webkit-animasjon-iterasjon-count: uendelig; animasjon-iterasjon-count: uendelig; -webkit-animasjon-retning: alternativ; animasjonsretning: alternativ; } .container .icon.chrome {bakgrunnsbilde: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); bakgrunn-gjenta: nei-gjenta; bakgrunnsstørrelse: 8rem 8rem; } .container .icon.safari {bakgrunnsbilde: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); bakgrunn-gjenta: nei-gjenta; bakgrunnsstørrelse: 8rem 8rem; } .container .icon.firefox {bakgrunnsbilde: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); bakgrunn-gjenta: nei-gjenta; bakgrunnsstørrelse: 8rem 8rem; } .container .icon.msie {bakgrunnsbilde: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); bakgrunn-gjenta: nei-gjenta; bakgrunnsstørrelse: 8rem 8rem; } @ -webkit -keyframes svever {fra {top: 0; -webkit-transform: scaleX (1) skalaY (1); transform: skalaX (1) skalaY (1); } til {topp: -1.6rem; -webkit-transform: scaleX (0,9) skalaY (1,05); transform: scaleX (0,9) scaleY (1,05); }} @keyframes svever {fra {top: 0; -webkit-transform: scaleX (1) skalaY (1); transform: skalaX (1) skalaY (1); } til {topp: -1.6rem; -webkit-transform: scaleX (0,9) skalaY (1,05); transform: scaleX (0,9) scaleY (1,05); }} @ -webkit -keyframes hoverShadow {fra {bottom: 2rem; boks-skygge: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); igjen: 20%; bredde: 60%; } til {bunn: .6rem; boks-skygge: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); igjen: 25%; bredde: 50%; }} @keyframes hoverShadow {fra {bottom: 2rem; boks-skygge: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); igjen: 20%; bredde: 60%; } til {bunn: .6rem; boks-skygge: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); igjen: 25%; bredde: 50%; }}

I tillegg bruker vi eiendommen til CSS3 for å animere ikonene hvis det er den tilsvarende nettleseren for dette vi skal bruke -webkit-animasjon-varighet Y @keyframes for å bruke noen funksjoner på ikonene, og vi etablerer forhåndsbestemte målinger for dem.

Javascript -kode

Sist i koden vår JavaScript vi vil ha funksjonaliteten som gjør at vi kan oppdage hvilken type nettleser vi vil bruke bruker agent For å gjøre dette vil vi inkludere to betingelser, en for konvensjonelle nettlesere og som Windows 10 det lager ganske mye støy allerede, vi vil inkludere en betingelse for å oppdage Microsoft Edge.

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

Til slutt bruker vi noen av jQuery å bruke aktivaklassen i henhold til tilstanden som kastes med addClass () og med det ville vi ha søknaden vår ferdig, og vi kan se hvordan den ser ut når vi åpner den med Firefox.

Vi har allerede en måte å oppdage nettleseren som brukeren bruker og alt fra en enkelt applikasjon, noe som gir oss muligheten til å vite hvor de kommer fra og hvilke handlinger vi kan utføre i henhold til denne handlingen.

Prøv det, jeg liker tilnærmingen som brukes, for rensligheten og den raske grafiske kvaliteten.

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng