Tüm kullanıcının tarayıcılarını algıla

Web dünyasında, web uygulamaları söz konusu olduğunda farklı koşullarla nasıl çalışılacağını bilmek önemlidir ve çoğu zaman bu koşullar belirli bir tarayıcının kullanılmasıyla belirlenir.

Birinin veya diğerinin kullanımı, uygulamamızdaki belirli işlevleri koşullandırabilir; bu nedenle, doğru tespiti, uygulamamızda bizi rahatsızlıktan ve kötü kullanıcı deneyimlerinden kurtarabilir.

Bu uygulama ile kullanıcının tarayıcısını nasıl tespit edebileceğimize bakalım.

HTML Kodu

Bizim HTML Daha fazla karmaşıklık içermeyecek, temel bir yapıya sahip olacak ve oraya CSS başlıklarda ve dahil edeceğimiz yükü optimize etmek için jQuery CDN'nizden ve JavaScript vücudumuzun sonunda.

 Tüm tarayıcıları algıla

İşlevselliği daha iyi uygulamak için tarayıcıların simgelerini ve bu birkaç div içinde farklı sınıflara sahip bir kap oluşturacağız.

Stil sayfası

Bizimle CSS Daha çok işimiz olacak, orada konteynerimize stiller vereceğiz, kodumuzun yürütüldüğü tarayıcıya göre açık ve kapalı bir işlevsellik yapmak için resimlerimize stiller uygulayacağız. Buna ek olarak, kodumuzun kaynaklarını optimize etmek için harici bağlantılardan gelen görüntüleri ekleyeceğiz.

 *, *: önce, *: sonra, *: odak, *: etkin, *: odak: etkin {kutu boyutlandırma: kenarlık kutusu; anahat: yok; } html {yazı tipi boyutu: 10 piksel; } .container {sol: 50vw; pozisyon: mutlak; üst: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transform: translateX (-50%) translateY (-50%); } .container .icon {ekran: satır içi blok; -webkit filtresi: gri tonlamalı (%100); filtre: gri tonlamalı (%100); yükseklik: 8rem; pozisyon: göreceli; -webkit-geçiş: tüm .3'lerin kolaylaştırılması; geçiş: tüm .3'ler kolaylaştırma; genişlik: 8rem; } .container .icon: {sınır yarıçapından sonra: %50; alt: 2rem; kutu gölgesi: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); içerik: ""; yükseklik: .5rem; sol: %20; pozisyon: mutlak; genişlik: %60; } .container .icon.active {-webkit-animation-name: vurgulu; animasyon adı: üzerine gelin; -webkit filtresi: gri tonlamalı (%0); filtre: gri tonlamalı (%0); } .container .icon.active: {-webkit-animation-name: hoverShadow'dan sonra; animasyon adı: hoverShadow; } .container .icon.active, .container .icon.active: {-webkit-animation-duration: .8s'den sonra; animasyon süresi: .8s; -webkit-animasyon-zamanlama-fonksiyonu: kolaylık; animasyon-zamanlama-fonksiyonu: kolaylık; -webkit-animation-yineleme-sayısı: sonsuz; animasyon-yineleme-sayısı: sonsuz; -webkit-animasyon-yön: alternatif; animasyon yönü: alternatif; } .container .icon.chrome {arka plan resmi: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); arka plan tekrarı: tekrar yok; arka plan boyutu: 8rem 8rem; } .container .icon.safari {arka plan resmi: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); arka plan tekrarı: tekrar yok; arka plan boyutu: 8rem 8rem; } .container .icon.firefox {arka plan resmi: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); arka plan tekrarı: tekrar yok; arka plan boyutu: 8rem 8rem; } .container .icon.msie {arka plan resmi: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); arka plan tekrarı: tekrar yok; arka plan boyutu: 8rem 8rem; } @ -webkit-anahtar kareleri {en üstte: 0; -webkit-dönüşüm: scaleX (1) scaleY (1); dönüştürme: ölçekX (1) ölçekY (1); } ila {üst: -1.6rem; -webkit-dönüşüm: ölçekX (0.9) ölçekY (1.05); dönüştürme: ölçekX (0.9) ölçekY (1.05); }} @anahtar kareler {en üstte: 0; -webkit-dönüşüm: scaleX (1) scaleY (1); dönüştürme: ölçekX (1) ölçekY (1); } ila {üst: -1.6rem; -webkit-dönüşüm: ölçekX (0.9) ölçekY (1.05); dönüştürme: ölçekX (0.9) ölçekY (1.05); }} @ -webkit-keyframes hoverShadow {{alttan: 2rem; kutu gölgesi: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); sol: %20; genişlik: %60; } ila {alt: .6rem; kutu gölgesi: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); sol: %25; genişlik: %50; }} @keyframes hoverShadow {{alttan: 2rem; kutu gölgesi: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); sol: %20; genişlik: %60; } ila {alt: .6rem; kutu gölgesi: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); sol: %25; genişlik: %50; }}

Ek olarak, özelliğini kullanıyoruz CSS3 simgeleri canlandırmak için, bunun için ilgili tarayıcıysa, kullanacağız -webkit-animasyon-süresi Y @anahtar kareler simgelere bazı işlevler uygulamak ve onlar için önceden belirlenmiş ölçümler oluşturmak.

JavaScript kodu

Kodumuzdaki son JavaScript kullanacağımız tarayıcının türünü tespit etmemizi sağlayacak işlevselliğe sahip olacağız. userAgent Bunu yapmak için, biri geleneksel tarayıcılar için olmak üzere iki koşul ekleyeceğiz ve Windows 10 zaten biraz gürültü yapıyor, Microsoft Edge'i algılamak için bir koşul ekleyeceğiz.

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

Bitirmek için bazılarını kullanıyoruz jQuery ile atılan koşula göre varlık sınıfını uygulamak ekleSınıf () ve bununla uygulamamızı bitirmiş oluruz ve açtığımızda nasıl göründüğünü görebiliriz. Firefox.

Kullanıcının kullandığı tarayıcıyı ve hepsini tek bir uygulamadan algılamak için zaten bir yolumuz var, bu da bize nereden girdiklerini ve bu eyleme göre hangi eylemleri yapabileceğimizi bilme imkanı veriyor.

Deneyin, temizliği ve hızlı grafik kalitesi için kullanılan yaklaşımı gerçekten beğendim.

Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.