Ve webovém světě je důležité vědět, jak pracovat s různými podmínkami, pokud jde o webové aplikace, a mnohokrát jsou tyto podmínky určeny použitím určitého prohlížeče.
Použití jedné nebo druhé může podmiňovat určité funkce v rámci naší aplikace, a proto nám její správná detekce může ušetřit nepříjemnosti a špatné uživatelské zkušenosti s naší aplikací.
Podívejme se, jak můžeme pomocí této aplikace detekovat prohlížeč uživatele.
HTML kód
Náš HTML Nebude zahrnovat větší složitost, bude mít základní strukturu a tam zahrneme naši CSS v záhlaví a pro optimalizaci zatížení zahrneme jQuery z vaší CDN a JavaScript na konci našeho těla.
Detekovat všechny prohlížečeVytvoříme kontejner, který bude obsahovat ikony prohlížečů a v rámci těchto několika div s různými třídami lépe uplatní funkce.
Stylový list
S naší CSS Budeme mít více práce, tam dáme styly našemu kontejneru, použijeme styly na naše obrázky, abychom vytvořili funkci zapnutí a vypnutí podle prohlížeče, kde se náš kód spouští. Kromě toho zahrneme obrázky z externích odkazů, abychom optimalizovali zdroje našeho kódu.
*, *: before, *: after, *: focus, *: active, *: focus: active {box-sizing: border-box; obrys: žádný; } html {velikost písma: 10px; } .container {vlevo: 50vw; pozice: absolutní; nahoře: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transformovat: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -webkit-filter: stupně šedi (100%); filtr: stupně šedi (100%); výška: 8rem; poloha: relativní; -webkit-transition: všechny .3s usnadnění; přechod: všechny .3s usnadnění; šířka: 8rem; } .container .icon: po {border-radius: 50%; dole: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); obsah: ""; výška: 0,5 rem; vlevo: 20%; pozice: absolutní; šířka: 60%; } .container .icon.active {-webkit-animation-name: hover; animation-name: hover; -webkit-filter: stupně šedi (0%); filtr: stupně šedi (0%); } .container .icon.active: za {-webkit-animation-name: hoverShadow; animation-name: hoverShadow; } .container .icon.active, .container .icon.active: po {-webkit-animation-duration: .8s; délka animace: 0,8 s; -webkit-animation-timing-function :lehčení; funkce časování animace: usnadnění; -webkit-animation-iteration-count: nekonečno; počet animací-iterací: nekonečno; -webkit-animation-direction: alternativní; směr animace: alternativní; } .container .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); opakování na pozadí: neopakování; velikost pozadí: 8rem 8rem; } .container .icon.safari {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); opakování na pozadí: neopakování; velikost pozadí: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); opakování na pozadí: neopakování; velikost pozadí: 8rem 8rem; } .container .icon.msie {obrázek na pozadí: URL ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); opakování na pozadí: neopakování; velikost pozadí: 8rem 8rem; } @ -webkit -keyframes hover {from {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformace: scaleX (1) scaleY (1); } až {nahoru: -1,6 rem; -webkit-transformace: scaleX (0,9) scaleY (1,05); transformace: scaleX (0,9) scaleY (1,05); }} @keyframes vznášet se {od {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformace: scaleX (1) scaleY (1); } až {nahoru: -1,6 rem; -webkit-transformace: scaleX (0,9) scaleY (1,05); transformace: scaleX (0,9) scaleY (1,05); }} @ -webkit -keyframes hoverShadow {from {bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); vlevo: 20%; šířka: 60%; } až {dole: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0,2); vlevo: 25%; šířka: 50%; }} @keyframes hoverShadow {from {bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); vlevo: 20%; šířka: 60%; } až {dole: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0,2); vlevo: 25%; šířka: 50%; }}Kromě toho používáme vlastnost CSS3 k animaci ikon, pokud je to odpovídající prohlížeč, který k tomu použijeme -webkit-animace-trvání Y @klíčové snímky abychom na ikony použili některé funkce a stanovili jsme pro ně předem stanovená měření.
Javascriptový kód
Poslední v našem kódu JavaScript budeme mít funkce, které nám umožní detekovat typ prohlížeče, se kterým budeme používat userAgent Za tímto účelem zahrneme dvě podmínky, jednu pro konvenční prohlížeče a jako Windows 10 už to dělá docela dost hluku, zahrneme podmínku pro detekci Microsoft Edge.
$ (document) .ready (funkce () {var ua = navigator.userAgent.match ( / (opera | chrome | safari | firefox) \ /? \ s * (\.? \ d + (\. \ d +) *)/ i), prohlížeč; if (navigator.userAgent.match (/ Edge/ i) || navigator.userAgent.match (/Trident.*rv [:] *11 \ ./ i)) {browser = "msie ";} else {prohlížeč = ua [1] .toLowerCase ();} $ ('div.icon.' + prohlížeč) .addClass (" aktivní ");});K dokončení použijeme některé jQuery použít třídu aktiv podle podmínky, se kterou se hodí addClass () a tím bychom naši aplikaci dokončili a vidíme, jak to vypadá, když ji otevřeme pomocí Firefox.
Již máme způsob, jak detekovat prohlížeč, který uživatel používá, a to vše z jedné aplikace, což nám dává možnost vědět, odkud vstupují a jaké akce můžeme podle této akce provést.
Zkuste to, velmi se mi líbí použitý přístup, pro jeho čistotu a rychlou grafickou kvalitu.
Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
