Find alle brugerens browsere

I webverdenen er det vigtigt at vide, hvordan man arbejder med forskellige betingelser, når det kommer til webapplikationer, og mange gange bestemmes disse betingelser ved brug af en bestemt browser.

Brugen af ​​den ene eller den anden kan betingelse af visse funktionaliteter i vores applikation, hvorfor dens korrekte registrering kan spare os for gener og dårlige brugeroplevelser i vores applikation.

Lad os se, hvordan vi kan registrere brugerens browser med denne applikation.

HTML -kode

Vores HTML Det vil ikke indebære større kompleksitet, det vil have en grundlæggende struktur, og der vil vi inkludere vores CSS i overskrifterne og for at optimere belastningen vil vi inkludere jQuery fra dit CDN og JavaScript i slutningen af ​​vores krop.

 Find alle browsere

Vi opretter en beholder til at inkludere ikonerne i browserne og inden for disse flere div med forskellige klasser for bedre at anvende funktionaliteten.

Stilark

Med vores CSS Vi vil have mere arbejde, der vil vi give stilarterne til vores beholder, vi vil anvende typografier på vores billeder for at lave en funktion til og fra i henhold til den browser, hvor vores kode udføres. Ud over dette vil vi inkludere billederne fra eksterne links for at optimere ressourcerne i vores kode.

 *, *: før, *: efter, *: fokus, *: aktiv, *: fokus: aktiv {box-sizing: border-box; omrids: ingen; } html {font-size: 10px; } .container {venstre: 50vw; position: absolut; top: 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øjde: 8rem; position: relativ; -webkit-overgang: alle .3'er lempes; overgang: alle .3'er lempes; bredde: 8rem; } .container .icon: efter {border-radius: 50%; bund: 2rem; kasse-skygge: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); indhold: ""; højde: .5rem; tilbage: 20%; position: absolut; bredde: 60%; } .container .icon.active {-webkit-animation-name: svæver; animationsnavn: svæve; -webkit-filter: gråtoner (0%); filter: gråtoner (0%); } .container .icon.active: efter {-webkit-animation-name: hoverShadow; animationsnavn: hoverShadow; } .container .icon.active, .container .icon.active: efter {-webkit-animation-varighed: .8s; animation-varighed: .8s; -webkit-animation-timing-funktion: let ud; animation-timing-funktion: let ud; -webkit-animation-iteration-count: uendelig; animation-iteration-count: uendelig; -webkit-animation-retning: alternativ; animationsretning: alternativ; } .container .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); baggrund-gentag: ingen-gentagelse; baggrundsstørrelse: 8rem 8rem; } .container .icon.safari {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); baggrund-gentag: ingen-gentagelse; baggrundsstørrelse: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); baggrund-gentag: ingen-gentagelse; baggrundsstørrelse: 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); baggrund-gentag: ingen-gentagelse; baggrundsstørrelse: 8rem 8rem; } @ -webkit -keyframes svæver {fra {top: 0; -webkit-transform: scaleX (1) skalaY (1); transform: skalaX (1) skalaY (1); } til {top: -1.6rem; -webkit-transform: scaleX (0,9) skalaY (1,05); transform: scaleX (0,9) skalaY (1,05); }} @keyframes svæver {fra {top: 0; -webkit-transform: scaleX (1) skalaY (1); transform: skalaX (1) skalaY (1); } til {top: -1.6rem; -webkit-transform: scaleX (0,9) skalaY (1,05); transform: scaleX (0,9) skalaY (1,05); }} @ -webkit -keyframes hoverShadow {fra {bottom: 2rem; kasse-skygge: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); tilbage: 20%; bredde: 60%; } til {bund: .6rem; kasse-skygge: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); tilbage: 25%; bredde: 50%; }} @keyframes svæver Shadow {fra {bottom: 2rem; kasse-skygge: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); tilbage: 20%; bredde: 60%; } til {bund: .6rem; kasse-skygge: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); tilbage: 25%; bredde: 50%; }}

Derudover bruger vi ejendommen til CSS3 for at animere ikonerne, hvis det er den tilsvarende browser til dette, vi vil bruge -webkit-animation-varighed Y @keyframes at anvende nogle funktionaliteter på ikonerne, og vi etablerer forudbestemte målinger for dem.

Javascript -kode

Sidst i vores kode JavaScript vi vil have den funktionalitet, der giver os mulighed for at registrere den type browser, som vi vil bruge userAgent For at gøre dette vil vi inkludere to betingelser, en for konventionelle browsere og som Windows 10 Det larmer allerede en del, vi inkluderer en betingelse for at registrere Microsoft Edge.

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

Til afslutning bruger vi nogle af jQuery at anvende aktivklassen i henhold til den betingelse, der kastes med addClass () og med det ville vi have vores ansøgning færdig, og vi kan se, hvordan den ser ud, når vi åbner den med Firefox.

Vi har allerede en måde at registrere den browser, som brugeren bruger og alt fra en enkelt applikation, hvilket giver os mulighed for at vide, hvor de kommer fra, og hvilke handlinger vi kan foretage i henhold til denne handling.

Prøv det, jeg kan virkelig godt lide den anvendte metode, for dens renlighed og hurtige grafiske kvalitet.

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt