Upptäck alla användarens webbläsare

I webbvärlden är det viktigt att veta hur man arbetar med olika förhållanden när det gäller webbapplikationer, och många gånger bestäms dessa villkor av användningen av en viss webbläsare.

Användningen av den ena eller den andra kan förutsätta vissa funktioner i vår applikation, varför dess korrekta upptäckt kan spara besvär och dåliga användarupplevelser i vår applikation.

Låt oss se hur vi kan upptäcka användarens webbläsare med den här applikationen.

HTML -kod

Vår HTML Det kommer inte att innebära större komplexitet, det kommer att ha en grundläggande struktur och där kommer vi att inkludera vår CSS i rubrikerna och för att optimera belastningen kommer vi att inkludera jQuery från ditt CDN och JavaScript i slutet av vår kropp.

 Upptäck alla webbläsare

Vi kommer att skapa en behållare för att inkludera webbläsarnas ikoner och inom dessa flera div med olika klasser för att bättre tillämpa funktionaliteten.

Stilblad

Med vår CSS Vi kommer att ha mer arbete, där kommer vi att ge stilarna till vår behållare, vi kommer att tillämpa stilar på våra bilder för att göra en av och på -funktion enligt webbläsaren där vår kod körs. Utöver detta kommer vi att inkludera bilder från externa länkar för att optimera resurserna i vår kod.

 *, *: före, *: efter, *: fokus, *: aktiv, *: fokus: aktiv {box-sizing: border-box; kontur: ingen; } html {font-size: 10px; } .container {vänster: 50vw; position: absolut; 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åskala (100%); filter: gråskala (100%); höjd: 8rem; position: relativ; -webkit-övergång: alla .3: or lätt-ut; övergång: alla .3: or lättare; bredd: 8rem; } .container .ikon: efter {gränsradie: 50%; botten: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); innehåll: ""; höjd: .5rem; kvar: 20%; position: absolut; bredd: 60%; } .container .icon.active {-webkit-animation-name: sväva; animationsnamn: sväva; -webkit-filter: gråskala (0%); filter: gråskala (0%); } .container .icon.active: efter {-webkit-animation-name: hoverShadow; animationsnamn: hoverShadow; } .container .icon.active, .container .icon.active: efter {-webkit-animation-duration: .8s; animation-varaktighet: .8s; -webkit-animation-timing-funktion: lätthet; animation-timing-funktion: lätthet; -webkit-animation-iteration-count: oändligt; animation-iteration-count: oändligt; -webkit-animation-riktning: alternativ; animationsriktning: alternativ; } .container .icon.chrome {bakgrundsbild: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); bakgrund-upprepa: ingen upprepning; bakgrundsstorlek: 8rem 8rem; } .container .icon.safari {bakgrundsbild: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); bakgrund-upprepa: ingen upprepning; bakgrundsstorlek: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); bakgrund-upprepa: ingen upprepning; bakgrundsstorlek: 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); bakgrund-upprepa: ingen upprepning; bakgrundsstorlek: 8rem 8rem; } @ -webkit -keyframes svävar {från {top: 0; -webkit-transform: scaleX (1) skalaY (1); transform: skalaX (1) skalaY (1); } till {topp: -1.6rem; -webkit-transform: scaleX (0,9) skalaY (1,05); transform: scaleX (0,9) scaleY (1,05); }} @keyframes svävar {från {top: 0; -webkit-transform: scaleX (1) skalaY (1); transform: skalaX (1) skalaY (1); } till {topp: -1.6rem; -webkit-transform: scaleX (0,9) skalaY (1,05); transform: scaleX (0,9) scaleY (1,05); }} @ -webkit -keyframes hoverShadow {från {bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); kvar: 20%; bredd: 60%; } till {botten: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); kvar: 25%; bredd: 50%; }} @keyframes svävarShadow {från {bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); kvar: 20%; bredd: 60%; } till {botten: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); kvar: 25%; bredd: 50%; }}

Dessutom använder vi fastigheten till CSS3 för att animera ikonerna om det är motsvarande webbläsare för detta kommer vi att använda -webkit-animation-varaktighet Y @nyckelbilder för att tillämpa några funktioner på ikonerna och vi fastställer förutbestämda mätningar för dem.

Javascript -kod

Sist i vår kod JavaScript vi kommer att ha den funktionalitet som gör att vi kan upptäcka vilken typ av webbläsare som vi kommer att använda userAgent För att göra detta kommer vi att inkludera två villkor, en för konventionella webbläsare och som Windows 10 det gör ganska mycket ljud redan, vi kommer att inkludera ett villkor för att upptäcka Microsoft Edge.

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

Till slut använder vi några av jQuery att tillämpa tillgångsklassen enligt det villkor som kastas med addClass () och med det skulle vi ha vår ansökan klar och vi kan se hur det ser ut när vi öppnar det med Firefox.

Vi har redan ett sätt att upptäcka webbläsaren som användaren använder och allt från en enda applikation, vilket ger oss möjlighet att veta varifrån de kommer och vilka åtgärder vi kan vidta enligt denna åtgärd.

Prova det, jag gillar verkligen den metod som används, för dess renhet och snabba grafiska kvalitet.

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng