Atklājiet visas lietotāja pārlūkprogrammas

Tīmekļa pasaulē ir svarīgi zināt, kā strādāt ar dažādiem nosacījumiem attiecībā uz tīmekļa lietojumprogrammām, un daudzas reizes šos nosacījumus nosaka noteiktas pārlūkprogrammas izmantošana.

Viena vai otra izmantošana var nodrošināt noteiktas mūsu lietojumprogrammas funkcijas, tāpēc tā pareiza noteikšana var ietaupīt mūsu neērtības un slikto lietotāju pieredzi mūsu lietojumprogrammā.

Apskatīsim, kā ar šo lietojumprogrammu varam noteikt lietotāja pārlūkprogrammu.

HTML kods

Mūsu HTML Tas neradīs lielāku sarežģītību, tam būs pamata struktūra, un tur mēs iekļausim savu CSS galvenēs un lai optimizētu slodzi, kuru mēs iekļausim jQuery no jūsu CDN un JavaScript mūsu ķermeņa beigās.

 Noteikt visas pārlūkprogrammas

Mēs izveidosim konteineru, lai iekļautu pārlūkprogrammu ikonas, un šajās vairākās divās ar dažādām klasēm, lai labāk izmantotu funkcionalitāti.

Stila lapa

Ar mūsu CSS Mums būs vairāk darba, tur mēs piešķirsim stilus savam konteineram, mēs piemērosim stilus mūsu attēliem, lai izveidotu ieslēgšanas un izslēgšanas funkcionalitāti atbilstoši pārlūkprogrammai, kurā tiek izpildīts mūsu kods. Papildus tam mēs iekļausim attēlus no ārējām saitēm, lai optimizētu mūsu koda resursus.

 *, *: pirms, *: pēc, *: fokuss, *: aktīvs, *: fokuss: aktīvs {box-sizing: border-box; kontūra: nav; } html {font-size: 10px; } .konteiners {pa kreisi: 50vw; pozīcija: absolūta; augšpusē: 50 vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); pārveidot: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -webkit-filter: pelēktoņu (100%); filtrs: pelēktoņu (100%); augstums: 8rem; stāvoklis: radinieks; -Webkit-pāreja: visi .3s vieglums-out; pāreja: visi .3s atvieglojumi; platums: 8rem; } .konteiners .icon: aiz {robežas rādiuss: 50%; apakšā: 2rem; kaste-ēna: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); saturs: ""; augstums: .5rem; pa kreisi: 20%; pozīcija: absolūta; platums: 60%; } .container .icon.active {-webkit-animation-name: kursors; animācijas nosaukums: virziet kursoru; -webkit-filter: pelēktoņi (0%); filtrs: pelēktoņi (0%); } .container .icon.active: aiz {-webkit-animation-name: hoverShadow; animācijas nosaukums: hoverShadow; } .container .icon.active, .container .icon.active: pēc {-webkit-animation-duration: .8s; animācijas ilgums: .8s; -Webkit-animation-timing-function: vieglums-out; animācijas laika noteikšanas funkcija: vieglums; -webkit-animation-iteration-count: bezgalīgs; animācijas atkārtojumu skaits: bezgalīgs; -webkit-animation-direction: alternatīvs; animācijas virziens: alternatīvs; } .container .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); fona atkārtošana: neatkārtot; fona izmērs: 8rem 8rem; } .container .icon.safari {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); fona atkārtošana: neatkārtot; fona izmērs: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); fona atkārtošana: neatkārtot; fona izmērs: 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); fona atkārtošana: neatkārtot; fona izmērs: 8rem 8rem; } @ -webkit -keyframes virziet kursoru {no {top: 0; -webkit-transform: scaleX (1) scaleY (1); pārveidot: skalaX (1) skalaY (1); } uz {augšu: -1,6rem; -webkit-transform: scaleX (0,9) skala Y (1,05); pārveidot: skalaX (0,9) skalaY (1,05); }} @keyframes virziet kursoru {no {top: 0; -webkit-transform: scaleX (1) scaleY (1); pārveidot: skalaX (1) skalaY (1); } uz {augšu: -1,6rem; -webkit-transform: scaleX (0,9) skala Y (1,05); pārveidot: skalaX (0,9) skalaY (1,05); }} @ -webkit -keyframes hoverShadow {from {bottom: 2rem; kaste-ēna: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); pa kreisi: 20%; platums: 60%; } līdz {apakšā: .6rem; kaste-ēna: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); pa kreisi: 25%; platums: 50%; }} @keyframes hoverShadow {from {bottom: 2rem; kaste-ēna: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); pa kreisi: 20%; platums: 60%; } līdz {apakšā: .6rem; kaste-ēna: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); pa kreisi: 25%; platums: 50%; }}

Turklāt mēs izmantojam īpašumu CSS3 animēt ikonas, ja tas ir atbilstošais pārlūks, ko mēs izmantosim -webkit-animācijas ilgums Y @atslēgas rāmji lai ikonām piemērotu dažas funkcijas, un mēs tām izveidojam iepriekš noteiktus mērījumus.

Javascript kods

Pēdējais mūsu kodā JavaScript mums būs funkcionalitāte, kas ļaus mums noteikt pārlūka veidu, ar kuru mēs to izmantosim lietotāja aģents Lai to izdarītu, mēs iekļausim divus nosacījumus - vienu parastajām pārlūkprogrammām un kā Windows 10 tas jau rada diezgan lielu troksni, mēs iekļausim nosacījumu Microsoft Edge noteikšanai.

 $ (dokuments) .ready (funkcija () {var ua = navigator.userAgent.match ( / (opera | chrome | safari | firefox) \ /? \ s * (\.? \ d + (\. \ d +) *)/ i), pārlūkprogramma; if (navigator.userAgent.match (/ Edge/ i) || navigator.userAgent.match (/Trident.*rv [:] *11 \ ./ i)) {browser = "msie ";} else {browser = ua [1] .toLowerCase ();} $ ('div.icon.' + pārlūks) .addClass (" active ");});

Lai pabeigtu, mēs izmantojam dažus jQuery piemērot aktīvu klasi atbilstoši nosacījumam, kas tiek izmests addClass () un līdz ar to mūsu lietojumprogramma būtu pabeigta, un mēs varētu redzēt, kā tā izskatās, atverot to Firefox.

Mums jau ir veids, kā noteikt pārlūku, ko lietotājs izmanto, un to visu no vienas lietojumprogrammas, dodot mums iespēju zināt, no kurienes viņi ieiet, un kādas darbības mēs varam veikt saskaņā ar šo darbību.

Izmēģiniet, man ļoti patīk izmantotā pieeja tās tīrības un ātrās grafiskās kvalitātes dēļ.

Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu