Detecteer alle browsers van de gebruiker

In de webwereld is het belangrijk om te weten hoe te werken met verschillende voorwaarden als het gaat om webapplicaties, en vaak worden deze voorwaarden bepaald door het gebruik van een bepaalde browser.

Het gebruik van de een of de ander kan bepaalde functionaliteiten binnen onze applicatie beïnvloeden, daarom kan de juiste detectie ons ongemak en slechte gebruikerservaringen in onze applicatie besparen.

Laten we eens kijken hoe we de browser van de gebruiker kunnen detecteren met deze applicatie.

HTML code

Ons HTML Het zal geen grotere complexiteit met zich meebrengen, het zal een basisstructuur hebben en daar zullen we onze CSS in de headers en om de belasting te optimaliseren zullen we opnemen jQuery van uw CDN en JavaScript aan het einde van ons lichaam.

 Alle browsers detecteren

We zullen een container maken om de pictogrammen van de browsers op te nemen en binnen deze verschillende div met verschillende klassen om de functionaliteit beter toe te passen.

Stijlblad

Met onze CSS We zullen meer werk hebben, daar zullen we de stijlen aan onze container geven, we zullen stijlen op onze afbeeldingen toepassen om een ​​aan en uit functionaliteit te maken volgens de browser waarin onze code wordt uitgevoerd. Daarnaast zullen we de afbeeldingen van externe links opnemen om de bronnen van onze code te optimaliseren.

 *, *: voor, *: na, *: focus, *: actief, *: focus: actief {box-sizing: border-box; overzicht: geen; } html {lettergrootte: 10px; } .container {links: 50vw; positie: absoluut; boven: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transformeren: translateX (-50%) translateY (-50%); } .container .icon {display: inline-blok; -webkit-filter: grijswaarden (100%); filter: grijswaarden (100%); hoogte: 8rem; positie: relatief; -webkit-overgang: alle .3s gemak-out; overgang: alle .3s gemak-out; breedte: 8rem; } .container .icon: na {grens-radius: 50%; bodem: 2rem; box-schaduw: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); inhoud: ""; hoogte: .5rem; links: 20%; positie: absoluut; breedte: 60%; } .container .icon.active {-webkit-animation-name: hover; animatienaam: hover; -webkit-filter: grijswaarden (0%); filter: grijswaarden (0%); } .container .icon.active: na {-webkit-animation-name: hoverShadow; animatienaam: hoverShadow; } .container .icon.active, .container .icon.active: na {-webkit-animation-duration: .8s; animatieduur: .8s; -webkit-animatie-timing-functie: gemak-out; animatie-timing-functie: gemak-out; -webkit-animatie-iteratie-telling: oneindig; animatie-iteratie-telling: oneindig; -webkit-animatie-richting: alternatief; animatie-richting: alternatief; } .container .icon.chrome {achtergrondafbeelding: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); achtergrondherhaling: geen herhaling; achtergrondgrootte: 8rem 8rem; } .container .icon.safari {achtergrondafbeelding: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); achtergrondherhaling: geen herhaling; achtergrondgrootte: 8rem 8rem; } .container .icon.firefox {achtergrondafbeelding: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); achtergrondherhaling: geen herhaling; achtergrondgrootte: 8rem 8rem; } .container .icon.msie {achtergrondafbeelding: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); achtergrondherhaling: geen herhaling; achtergrondgrootte: 8rem 8rem; } @ -webkit-keyframes zweven {van {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformeren: scaleX (1) scaleY (1); } naar {top: -1.6rem; -webkit-transform: scaleX (0,9) scaleY (1,05); transformeren: schaalX (0,9) schaalY (1,05); }} @keyframes zweven {van {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformeren: scaleX (1) scaleY (1); } naar {top: -1.6rem; -webkit-transform: scaleX (0,9) scaleY (1,05); transformeren: schaalX (0,9) schaalY (1,05); }} @ -webkit-keyframes hoverShadow {van {onder: 2rem; box-schaduw: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); links: 20%; breedte: 60%; } naar {onder: .6rem; box-schaduw: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); links: 25%; breedte: 50%; }} @keyframes hoverShadow {van {onder: 2rem; box-schaduw: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); links: 20%; breedte: 60%; } naar {onder: .6rem; box-schaduw: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); links: 25%; breedte: 50%; }}

Daarnaast gebruiken we de eigenschap van: CSS3 om de pictogrammen te animeren als dit de bijbehorende browser is, zullen we hiervoor gebruiken -webkit-animatie-duur Y @keyframes om enkele functionaliteiten toe te passen op de pictogrammen en we stellen vooraf vooraf bepaalde metingen voor hen vast.

Javascript-code

Laatste in onze code JavaScript we zullen de functionaliteit hebben waarmee we het type browser kunnen detecteren waarmee we zullen gebruiken userAgent Om dit te doen, zullen we twee voorwaarden opnemen, één voor conventionele browsers en als Windows 10 het maakt al behoorlijk wat lawaai, we zullen een voorwaarde opnemen om Microsoft Edge te detecteren.

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

Om te eindigen gebruiken we een aantal van jQuery om de activaklasse toe te passen volgens de voorwaarde waarmee wordt gegooid addClass () en daarmee zouden we onze applicatie klaar hebben en we kunnen zien hoe het eruit ziet als we het openen met Firefox.

We hebben al een manier om de browser te detecteren die de gebruiker gebruikt en dat allemaal vanuit een enkele applicatie, waardoor we de mogelijkheid hebben om te weten waar ze vandaan komen en welke acties we kunnen ondernemen volgens deze actie.

Probeer het, ik hou echt van de gebruikte aanpak, vanwege de netheid en snelle grafische kwaliteit.

Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven