Aptikti visas vartotojo naršykles

Žiniatinklio pasaulyje svarbu žinoti, kaip dirbti su įvairiomis sąlygomis, kai kalbama apie žiniatinklio programas, ir daug kartų šias sąlygas lemia tam tikros naršyklės naudojimas.

Vieno ar kito naudojimas gali sąlygoti tam tikras mūsų programos funkcijas, todėl teisingas jų aptikimas gali sutaupyti mums nepatogumų ir blogos naudotojų patirties mūsų programoje.

Pažiūrėkime, kaip su šia programa galime aptikti vartotojo naršyklę.

HTML kodas

Mūsų HTML Tai nebus sudėtingesnė, ji turės pagrindinę struktūrą ir ten mes įtrauksime savo CSS antraštėse ir optimizuosime apkrovą „jQuery“ iš jūsų CDN ir „JavaScript“ mūsų kūno gale.

 Aptikti visas naršykles

Mes sukursime konteinerį, kuriame bus naršyklių piktogramos, ir šiose keliose skirtingose ​​klasėse, kad geriau pritaikytume funkcionalumą.

Stiliaus lapas

Su mūsų CSS Mes turėsime daugiau darbo, ten mes suteiksime stilius savo konteineriui, pritaikysime stilius savo vaizdams, kad įjungtume ir išjungtume funkcijas pagal naršyklę, kurioje vykdomas mūsų kodas. Be to, norėdami optimizuoti mūsų kodo išteklius, mes įtraukiame vaizdus iš išorinių nuorodų.

 *, *: prieš, *: po, *: fokusavimas, *: aktyvus, *: fokusavimas: aktyvus {box-sizing: border-box; kontūras: nėra; } html {šrifto dydis: 10 taškų; } .konteineris {kairėje: 50vw; pozicija: absoliuti; viršuje: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transformuoti: translateX (-50%) translateY (-50%); } .konteineris .icon {display: inline-block; -Webkit-filtras: pilkos spalvos (100%); filtras: pilkos spalvos (100%); aukštis: 8rem; padėtis: giminaitis; -webkit-perėjimas: visi .3s lengvumas-out; perėjimas: visi .3s palengvinimas; plotis: 8rem; } .konteineris .icon: po {border-radius: 50%; apačioje: 2rem; dėžutė-šešėlis: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); turinys: ""; aukštis: .5rem; kairėje: 20%; pozicija: absoliuti; plotis: 60%; } .container .icon.active {-webkit-animation-name: hover; animacijos pavadinimas: užveskite pelės žymeklį; -Webkit-filtras: pilkos spalvos (0%); filtras: pilkos spalvos (0%); } .container .icon.active: po {-webkit-animation-name: hoverShadow; animacijos pavadinimas: hoverShadow; } .container .icon.active, .container .icon.active: po {-webkit-animation-duration: .8s; animacijos trukmė: .8s; -Webkit-animacija-laiko funkcija: lengvumas-out; animacijos laiko nustatymo funkcija: lengvumas; -webkit-animation-iteration-count: begalinis; animacijos-iteracijų skaičius: begalinis; -webkit-animation-direction: alternatyvus; animacija-kryptis: alternatyvus; } .konteineris .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); fono kartojimas: nekartoti; fono dydis: 8rem 8rem; } .konteineris .icon.safari {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); fono kartojimas: nekartoti; fono dydis: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); fono kartojimas: nekartoti; fono dydis: 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); fono kartojimas: nekartoti; fono dydis: 8rem 8rem; } @ -webkit -keyframes užveskite pelės žymeklį {nuo {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformuoti: scaleX (1) scaleY (1); } į {viršuje: -1,6rem; -webkit-transform: scaleX (0,9) skaleY (1,05); transformuoti: skalaX (0,9) skalėY (1,05); }} @keyframes užveskite pelės žymeklį {iš {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformuoti: scaleX (1) scaleY (1); } į {viršuje: -1,6rem; -webkit-transform: scaleX (0,9) skaleY (1,05); transformuoti: skalaX (0,9) skalėY (1,05); }} @ -webkit -keyframes hoverShadow {from {bottom: 2rem; dėžutė-šešėlis: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); kairėje: 20%; plotis: 60%; } į {apačią: .6rem; dėžutė-šešėlis: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); kairėje: 25%; plotis: 50%; }} @keyframes hoverShadow {from {bottom: 2rem; dėžutė-šešėlis: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); kairėje: 20%; plotis: 60%; } į {apačią: .6rem; dėžutė-šešėlis: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); kairėje: 25%; plotis: 50%; }}

Be to, mes naudojame nuosavybę CSS3 animuoti piktogramas, jei tai bus atitinkama naršyklė, kurią naudosime -webkit-animacija-trukmė Y @rakto kadrai pritaikyti kai kurias funkcijas piktogramoms ir nustatyti joms iš anksto nustatytus matavimus.

„Javascript“ kodas

Paskutinis mūsų kode „JavaScript“ turėsime funkcionalumą, kuris leis aptikti naršyklės tipą, su kuriuo naudosime vartotojo atstovas Norėdami tai padaryti, pateiksime dvi sąlygas, vieną įprastoms naršyklėms ir kaip „Windows 10“ tai jau kelia gana daug triukšmo, įtrauksime sąlygą „Microsoft Edge“ aptikti.

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

Baigdami naudojame kai kuriuos „jQuery“ taikyti turto klasę pagal sąlygą, su kuria susiduriama addClass () ir su tuo mes užbaigtume savo programą ir pamatytume, kaip ji atrodo, kai ją atidarome „Firefox“.

Mes jau turime būdą, kaip aptikti vartotojo naudojamą naršyklę ir visa tai iš vienos programos, suteikdami mums galimybę žinoti, iš kur jie įeina ir kokių veiksmų galime imtis pagal šį veiksmą.

Išbandykite, man labai patinka naudojamas metodas dėl jo švaros ir greitos grafikos kokybės.

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką