Erkennen Sie alle Browser des Benutzers

In der Webwelt ist es wichtig zu wissen, wie man mit verschiedenen Bedingungen bei Webanwendungen umgeht, und diese Bedingungen werden oft durch die Verwendung eines bestimmten Browsers bestimmt.

Die Verwendung der einen oder anderen kann bestimmte Funktionalitäten innerhalb unserer Anwendung bedingen, weshalb uns ihre korrekte Erkennung Unannehmlichkeiten und schlechte Benutzererfahrungen in unserer Anwendung ersparen kann.

Sehen wir uns an, wie wir mit dieser Anwendung den Browser des Benutzers erkennen können.

HTML Quelltext

Unser HTML Es wird keine größere Komplexität mit sich bringen, es wird eine Grundstruktur haben und dort werden wir unsere CSS in den Headern und zur Optimierung der Auslastung werden wir aufnehmen jQuery von Ihrem CDN und JavaScript am Ende unseres Körpers.

 Alle Browser erkennen

Wir werden einen Container erstellen, um die Icons der Browser einzuschließen und innerhalb dieser mehrere div mit verschiedenen Klassen, um die Funktionalität besser anwenden zu können.

Stylesheet

Mit unserer CSS Wir werden mehr Arbeit haben, dort werden wir unserem Container die Stile geben, wir werden Stile auf unsere Bilder anwenden, um eine Ein- und Aus-Funktion entsprechend dem Browser zu erstellen, in dem unser Code ausgeführt wird. Darüber hinaus werden wir die Bilder von externen Links einbinden, um die Ressourcen unseres Codes zu optimieren.

 *, *: vorher, *: nachher, *: Fokus, *: aktiv, *: Fokus: aktiv {box-sizing: border-box; Umriss: keine; } html {Schriftgröße: 10px; } .container {links: 50vw; Position: absolut; oben: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transformieren: translateX (-50 %) translateY (-50 %); } .container .icon {Anzeige: Inline-Block; -webkit-filter: Graustufen (100 %); Filter: Graustufen (100 %); Höhe: 8rem; Position: relativ; -webkit-transition: alle .3s-Easy-Out; Übergang: alle .3s-Easy-Out; Breite: 8rem; } .container .icon: after {border-radius: 50%; unten: 2rem; Box-Schatten: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); Inhalt: ""; Höhe: .5rem; links: 20 %; Position: absolut; Breite: 60%; } .container .icon.active {-webkit-animation-name: hover; Animationsname: schweben; -webkit-filter: Graustufen (0 %); Filter: Graustufen (0 %); } .container .icon.active: after {-webkit-animation-name: hoverShadow; Animationsname: hoverShadow; } .container .icon.active, .container .icon.active: nach {-webkit-animation-duration: .8s; Animationsdauer: .8s; -Webkit-Animation-Timing-Funktion: Erleichterung; Animation-Timing-Funktion: Ease-Out; -webkit-animation-iteration-count: unendlich; Animations-Iterationszahl: unendlich; -Webkit-Animationsrichtung: alternativ; Animationsrichtung: alternativ; } .container .icon.chrome {Hintergrundbild: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: 8rem 8rem; } .container .icon.safari {Hintergrundbild: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: 8rem 8rem; } .container .icon.firefox {Hintergrundbild: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: 8rem 8rem; } .container .icon.msie {Hintergrundbild: URL ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: 8rem 8rem; } @ -webkit-keyframes schweben {von {oben: 0; -webkit-transform: scaleX (1) scaleY (1); transformieren: scaleX (1) scaleY (1); } nach {oben: -1.6rem; -webkit-transform: scaleX (0.9) scaleY (1.05); transformieren: scaleX (0,9) scaleY (1,05); }} @keyframes schweben {von {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformieren: scaleX (1) scaleY (1); } nach {oben: -1.6rem; -webkit-transform: scaleX (0.9) scaleY (1.05); transformieren: scaleX (0,9) scaleY (1,05); }} @ -webkit-keyframes hoverShadow {von {bottom: 2rem; Box-Schatten: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); links: 20 %; Breite: 60%; } bis {unten: .6rem; Kastenschatten: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); links: 25 %; Breite: 50%; }} @keyframes hoverShadow {von {bottom: 2rem; Box-Schatten: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); links: 20 %; Breite: 60%; } bis {unten: .6rem; Kastenschatten: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); links: 25 %; Breite: 50%; }}

Darüber hinaus verwenden wir die Eigenschaft von CSS3 um die Icons zu animieren, wenn es der entsprechende Browser dafür ist, werden wir verwenden -Webkit-Animationsdauer Ja @keyframes einige Funktionalitäten auf die Icons anzuwenden und wir legen für sie vorgegebene Maße fest.

Javascript-Code

Zuletzt in unserem Code JavaScript Wir werden über die Funktionalität verfügen, die es uns ermöglicht, den Browsertyp zu erkennen, mit dem wir arbeiten werden User-Agent Dazu fügen wir zwei Bedingungen hinzu, eine für herkömmliche Browser und als Windows 10 Es macht schon ziemlich viel Lärm, wir werden eine Bedingung hinzufügen, um Microsoft Edge zu erkennen.

 $ (Dokument) .ready (Funktion () {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 ("active");});

Zum Abschluss verwenden wir einige von jQuery die Anlageklasse gemäß der Bedingung anwenden, die mit geworfen wird Klasse hinzufügen () und damit hätten wir unsere Bewerbung fertig und können sehen, wie sie aussieht, wenn wir sie mit öffnen Feuerfuchs.

Wir haben bereits eine Möglichkeit, den Browser zu erkennen, den der Benutzer verwendet, und das alles aus einer einzigen Anwendung, die uns die Möglichkeit gibt, zu wissen, von wo aus er einsteigt und welche Aktionen wir entsprechend dieser Aktion ausführen können.

Probieren Sie es aus, ich mag den verwendeten Ansatz wegen seiner Sauberkeit und schnellen grafischen Qualität sehr.

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben