Az összes felhasználói böngésző felismerése

Az internetes világban fontos tudni, hogyan kell különféle feltételekkel dolgozni a webes alkalmazásoknál, és ezeket a feltételeket sokszor egy adott böngésző határozza meg.

Az egyik vagy a másik alkalmazás bizonyos funkciókat feltételezhet alkalmazásunkban, ezért a helyes felismerés megtakaríthat kényelmetlenségeket és rossz felhasználói élményeket az alkalmazásunkban.

Lássuk, hogyan tudjuk felismerni a felhasználó böngészőjét az alkalmazás segítségével.

HTML kód

HTML- kódunk nem lesz bonyolultabb, alapvető felépítésű lesz, és a fejlécekbe belefoglaljuk CSS -jünket, és a terhelés optimalizálása érdekében testünk végére beépítjük a jQuery- t a CDN-ből és a JavaScript-ből .

 Az összes böngészőt észleli
Stíluslap 

A CSS-rel további munkánk lesz, ott megadjuk a stílusokat a konténerünknek, stílusokat alkalmazunk képeinkre, hogy funkcionalitást ki- és bekapcsolhassunk annak a böngészőnek a függvényében, ahol a kód fut. Ezenkívül beépítjük a külső linkekről származó képeket a kódunk erőforrásainak optimalizálása érdekében. 
 *, *: előtt, *: után, *: fókusz, *: aktív, *: fókusz: aktív {doboz méretezés: border-box; vázlat: nincs; } html {betűméret: 10 képpont; } .tartály {balra: 50vw; pozíció: abszolút; felső: 50vh; -webkit-transzformáció: translateX (-50%) translateY (-50%); -ms-transzformáció: translateX (-50%) translateY (-50%); transzformáció: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -webkit-filter: szürkeárnyalatos (100%); szűrő: szürkeárnyalatos (100%); magasság: 8rem; pozíció: relatív; -webkit-átmenet: minden .3 könnyű; átmenet: az összes .3 könnyű; szélesség: 8rem; } .tartály .ikon: {határ-sugár után: 50%; alsó: 2rem; box-shadow: 0 3, 3 mm 1rem 0 rgba (34, 34, 34, 0, 4); tartalom: ""; magasság: .5rem; balra: 20%; pozíció: abszolút; szélesség: 60%; } .container .icon.active {-webkit-animation-name: hover; animációs név: lebeg; -webkit-filter: szürkeárnyalatos (0%); szűrő: szürkeárnyalatos (0%); } .tartály .icon.aktív: a {-webkit-animation-name: hoverShadow; animációs név: hoverShadow; } .tartály .icon.aktív, .container .icon.aktív: a {-webkit-animáció-időtartam: .8s; animáció időtartama: .8 s; -webkit-animáció-időzítés-funkció: könnyű-out; animáció-időzítés-funkció: könnyű-ki; -webkit-animáció-iterációs szám: végtelen; animáció-iterációs szám: végtelen; -webkit-animáció-irány: alternatív; animációs irány: váltakozó; } .container .icon.chrome {háttérkép: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.webp"); háttér-ismétlés: nem ismétlés; háttérméret: 8rem 8rem; } .container .icon.safari {háttérkép: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.webp"); háttér-ismétlés: nem ismétlés; háttérméret: 8rem 8rem; } .container .icon.firefox {háttérkép: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.webp"); háttér-ismétlés: nem ismétlés; háttérméret: 8rem 8rem; } .container .icon.msie {háttérkép: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.webp"); háttér-ismétlés: nem ismétlés; háttérméret: 8rem 8rem; } @ -webkit-keyframes lebeg {az {felül: 0; -webkit-transzformáció: skálaX (1) skálaY (1); transzformáció: skálaX (1) skálaY (1); } -ig {tetejére: -1, 6rem; -webkit-transzformáció: scaleX (0, 9) scaleY (1, 05); transzformáció: skálaX (0, 9) skálaY (1, 05); }} @ kulcskeretek lebegnek {az {felül: 0; -webkit-transzformáció: skálaX (1) skálaY (1); transzformáció: skálaX (1) skálaY (1); } -ig {tetejére: -1, 6rem; -webkit-transzformáció: scaleX (0, 9) scaleY (1, 05); transzformáció: skálaX (0, 9) skálaY (1, 05); }} @ -webkit-keyframes hoverShadow {az alsó részről: 2rem; box-shadow: 0 3, 3 mm 1rem 0 rgba (34, 34, 34, 0, 4); balra: 20%; szélesség: 60%; } -ig {alul: .6rem; box-shadow: 0 3, 2 mm 1rem 0 rgba (34, 34, 34, 0, 2); balra: 25%; szélesség: 50%; }} @ kulcskeretek hoverShadow {{alulról: 2rem; box-shadow: 0 3, 3 mm 1rem 0 rgba (34, 34, 34, 0, 4); balra: 20%; szélesség: 60%; } -ig {alul: .6rem; box-shadow: 0 3, 2 mm 1rem 0 rgba (34, 34, 34, 0, 2); balra: 25%; szélesség: 50%; }} 
 Ezen felül a CSS3 tulajdonságot használjuk az ikonok animálására, ha ez a megfelelő böngésző erre a célra. A -webkit-animation-duration és a @keyframes alkalmazásával bizonyos funkciókat alkalmazunk az ikonokra, és előre meghatározott intézkedéseket hozunk rájuk.
Javascript kód 

Végül JavaScript- kódunkban olyan funkcióval fogunk rendelkezni, amely lehetővé teszi számunkra, hogy felismerjük a böngésző típusát, amellyel erre a felhasználónkat felhasználjuk, két feltételt fogunk tartalmazni, egyet a hagyományos böngészőkhöz, és mivel a Windows 10 már elegendő zajt ad, belefoglalunk egy feltételt a Microsoft Edge 
 $ (dokumentum) .ready (function () {var ua = navigator.userAgent.match (/ (opera | króm | szafari | firefox) \ /? \ s * (\.? \ d + (\. \ d +) *) / i), böngésző; if (navigator.userAgent.match (/ Edge / i) || navigator.userAgent.match (/Trident.*rv [:] * 11 \ ./ i)) {böngésző = "msie"; } else {böngésző = ua [1] .toLowerCase ();} $ ('div.icon.' + böngésző) .addClass ("aktív");}); 
 Végül néhány jQuery- t használunk az aktív osztály alkalmazására az addClass () -al együtt dobott feltételeknek megfelelően, és ezzel befejezzük az alkalmazásunkat, és láthatjuk, hogyan néz ki, amikor megnyitjuk a Firefox- szal.
Már megvan a módja annak, hogy felismerjük a böngészőt, hogy a felhasználót és mindent felhasználhassunk egyetlen alkalmazásból, lehetőséget adva nekünk, hogy megismerjük, hová indul, és milyen intézkedéseket tehetünk ennek a műveletnek megfelelően.
Bizonyítsuk be, hogy nagyon kedvelem az alkalmazott megközelítést a tisztasága és a gyors grafikai minőség miatt.
0