In der Webwelt ist es wichtig zu wissen, wie mit unterschiedlichen Bedingungen in Bezug auf Webanwendungen gearbeitet wird, und diese Bedingungen werden häufig durch die Verwendung eines bestimmten Browsers bestimmt.
Die Verwendung der einen oder anderen Funktion kann bestimmte Funktionen in unserer Anwendung beeinträchtigen, weshalb uns die korrekte Erkennung Unannehmlichkeiten und schlechte Benutzererfahrungen in unserer Anwendung ersparen kann.
Mal sehen, wie wir den Browser des Benutzers mit dieser Anwendung erkennen können.
HTML-Code
Unser HTML wird nicht komplexer sein, es wird eine grundlegende Struktur haben und dort werden wir unser CSS in die Header einbinden und um die Last zu optimieren, werden wir jQuery aus seinem CDN und JavaScript am Ende unseres Körpers einbinden.
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Alle Browser erkennen </ title> <link rel = "stylesheet" type = "text / css" href = "styles.css" /> </ head> <body> <div class = "container"> <div class = "icon chrome"> </ div> <div class = "icon safari"> </ div> <div class = "icon firefox"> </ div> <div class = "icon msie"> </ div> </ div> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </ script> <script src = "detect.js"> </ script> </ body> </ html>
Wir werden einen Container erstellen, der die Symbole der Browser und innerhalb dieser verschiedenen Divs mit unterschiedlichen Klassen enthält, um die Funktionalität besser anwenden zu können.
Stylesheet
Mit unserem CSS werden wir mehr Arbeit haben. Dort werden wir die Stile unserem Container zuweisen. Wir werden Stile auf unsere Bilder anwenden, um eine Ein- und Ausschaltfunktion entsprechend dem Browser zu erstellen, in dem unser Code ausgeführt wird. Zusätzlich werden wir Bilder von externen Links einfügen, um die Ressourcen unseres Codes zu optimieren.
*, *: vorher, *: nachher, *: Fokus, *: aktiv, *: Fokus: aktiv { Box-Größe: Border-Box; Gliederung: keine; } html { Schriftgröße: 10px; } .container { links: 50vw; Position: absolut; oben: 50 vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transform: 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 Mühelosigkeit; Breite: 8rem; } .container .icon: nach { Randradius: 50%; unten: 2rem; Kastenschatten: 0 3,3 rem 1 rem 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: Hover; -Webkit-Filter: Graustufen (0%); Filter: Graustufen (0%); } .container .icon.active: nach { -webkit-animation-name: hoverShadow; Animationsname: hoverShadow; } .container .icon.active, .container .icon.active: nach { -webkit-animation-dauer: .8s; Animationsdauer: .8s; -webkit-animation-timing-funktion: easy-out; Animations-Timing-Funktion: Easy-Out; -webkit-animation-iterationsanzahl: unendlich; Animationsiterationszahl: unendlich; -webkit-animation-direction: alternate; Animationsrichtung: alternierend; } .container .icon.chrome { Hintergrundbild: URL ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png"); 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"); 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"); 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"); Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: 8rem 8rem; } @ -webkit-keyframes schweben { von { oben: 0; -Webkit-Transformation: scaleX (1) scaleY (1); transformieren: scaleX (1) scaleY (1); } zu { oben: -1,6rem; -Webkit-Transformation: scaleX (0,9) scaleY (1,05); Transformation: scaleX (0,9) scaleY (1,05); } } @keyframes schweben { von { oben: 0; -Webkit-Transformation: scaleX (1) scaleY (1); transformieren: scaleX (1) scaleY (1); } zu { oben: -1,6rem; -Webkit-Transformation: scaleX (0,9) scaleY (1,05); Transformation: scaleX (0,9) scaleY (1,05); } } @ -webkit-keyframes hoverShadow { von { unten: 2rem; Kastenschatten: 0 3,3 rem 1 rem 0 rgba (34, 34, 34, 0,4); links: 20%; Breite: 60%; } zu { unten: .6rem; Kastenschatten: 0 3,2 rem 1 rem 0 rgba (34, 34, 34, 0,2); links: 25%; Breite: 50%; } } @keyframes hoverShadow { von { unten: 2rem; Kastenschatten: 0 3,3 rem 1 rem 0 rgba (34, 34, 34, 0,4); links: 20%; Breite: 60%; } zu { unten: .6rem; Kastenschatten: 0 3,2 rem 1 rem 0 rgba (34, 34, 34, 0,2); links: 25%; Breite: 50%; } }
Zusätzlich verwenden wir die Eigenschaft von CSS3 , um die Symbole zu animieren, wenn es sich um den entsprechenden Browser handelt. Dazu verwenden wir -webkit-animation-duration und @keyframes , um einige Funktionen auf die Symbole anzuwenden und vorbestimmte Maße für diese festzulegen.
Javascript-Code
Schließlich haben wir in unserem JavaScript- Code die Funktionalität, die es uns ermöglicht, den Browsertyp zu erkennen, mit dem wir userAgent verwenden , wir werden zwei Bedingungen einschließen, eine für herkömmliche Browser, und da Windows 10 bereits viel Lärm macht, werden wir eine Bedingung einschließen, um zu erkennen Microsoft Edge .
$ (document) .ready (function () { 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"; } sonst { browser = ua [1] .toLowerCase (); } $ ('div.icon.' + browser) .addClass ("active"); });
Zum Abschluss verwenden wir etwas jQuery , um die aktive Klasse entsprechend der mit addClass () ausgelösten Bedingung anzuwenden. Damit wäre unsere Anwendung abgeschlossen und wir können sehen, wie sie aussieht, wenn wir sie mit Firefox öffnen.
Wir haben bereits die Möglichkeit, den vom Benutzer verwendeten Browser und alles aus einer einzigen Anwendung heraus zu erkennen, sodass wir wissen, woher Sie kommen und welche Aktionen wir aufgrund dieser Aktion ausführen können.
Probieren Sie es aus, dass mir der verwendete Ansatz wegen seiner Sauberkeit und schnellen grafischen Qualität sehr gut gefällt.
