Rileva tutti i browser dell'utente

Nel mondo del web è importante sapere come lavorare con condizioni diverse quando si tratta di applicazioni web, e molte volte queste condizioni sono determinate dall'uso di un determinato browser.

L'uso dell'uno o dell'altro può condizionare determinate funzionalità all'interno della nostra applicazione, motivo per cui il suo corretto rilevamento può risparmiarci inconvenienti e cattive esperienze utente nella nostra applicazione.

Vediamo come possiamo rilevare il browser dell'utente con questa applicazione.

codice HTML

I nostri HTML Non comporterà una maggiore complessità, avrà una struttura di base e lì includeremo il nostro CSS nelle intestazioni e per ottimizzare il carico includeremo jQuery dal tuo CDN e JavaScript alla fine del nostro corpo.

 Rileva tutti i browser

Creeremo un contenitore per includere le icone dei browser e all'interno di questi diversi div con classi diverse per applicare al meglio la funzionalità.

Foglio di stile

Con il nostro CSS Avremo più lavoro, lì daremo gli stili al nostro contenitore, applicheremo gli stili alle nostre immagini per creare una funzionalità di accensione e spegnimento in base al browser in cui viene eseguito il nostro codice. Oltre a questo includeremo le immagini da link esterni per ottimizzare le risorse del nostro codice.

 *, *: prima, *: dopo, *: focus, *: active, *: focus: active {box-sizing: border-box; contorno: nessuno; } html {dimensione carattere: 10px; } .contenitore {sinistra: 50vw; posizione: assoluta; superiore: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); trasforma: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -filtro-webkit: scala di grigi (100%); filtro: scala di grigi (100%); altezza: 8rem; posizione: relativa; -webkit-transition: tutti i .3 easy-out; transizione: tutti i .3s easy-out; larghezza: 8rem; } .container .icon: dopo {border-radius: 50%; fondo: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); contenuto: ""; altezza: 0,5 rem; sinistra: 20%; posizione: assoluta; larghezza: 60%; } .container .icon.active {-webkit-nome-animazione: hover; nome-animazione: hover; -filtro-webkit: scala di grigi (0%); filtro: scala di grigi (0%); } .container .icon.active: after {-webkit-animation-name: hoverShadow; nome-animazione: hoverShadow; } .container .icon.active, .container .icon.active: after {-webkit-animation-duration: .8s; durata dell'animazione: .8s; -webkit-animazione-funzione-timing: facilità d'uscita; funzione di temporizzazione dell'animazione: facilità di uscita; -webkit-animazione-iteration-count: infinito; conteggio-iterazione-animazione: infinito; -direzione-animazione-webkit: alternativo; direzione dell'animazione: alternativa; } .container .icon.chrome {immagine di sfondo: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); background-repeat: no-repeat; dimensione dello sfondo: 8rem 8rem; } .container .icon.safari {immagine di sfondo: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); background-repeat: no-repeat; dimensione dello sfondo: 8rem 8rem; } .container .icon.firefox {immagine di sfondo: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); background-repeat: no-repeat; dimensione dello sfondo: 8rem 8rem; } .container .icon.msie {immagine di sfondo: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); background-repeat: no-repeat; dimensione dello sfondo: 8rem 8rem; } @ -webkit-keyframes hover {from {top: 0; -webkit-transform: scaleX (1) scaleY (1); trasforma: scalaX (1) scalaY (1); } a {top: -1.6rem; -webkit-transform: scaleX (0.9) scaleY (1.05); trasforma: scalaX (0.9) scalaY (1.05); }} @keyframes hover {from {top: 0; -webkit-transform: scaleX (1) scaleY (1); trasforma: scalaX (1) scalaY (1); } a {top: -1.6rem; -webkit-transform: scaleX (0.9) scaleY (1.05); trasforma: scalaX (0.9) scalaY (1.05); }} @ -webkit-keyframes hoverShadow {dal {fondo: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); sinistra: 20%; larghezza: 60%; } a {bottom: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); sinistra: 25%; larghezza: 50%; }} @keyframes hoverShadow {from {bottom: 2rem; box-shadow: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); sinistra: 20%; larghezza: 60%; } a {bottom: .6rem; box-shadow: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2); sinistra: 25%; larghezza: 50%; }}

Inoltre, utilizziamo la proprietà di CSS3 per animare le icone se è il browser corrispondente per questo useremo -webkit-animazione-durata sì @fotogrammi chiave per applicare alcune funzionalità alle icone e stabiliamo per esse misure predeterminate.

Codice Javascript

Ultimo nel nostro codice JavaScript avremo la funzionalità che ci permetterà di rilevare il tipo di browser, con il quale utilizzeremo agente utente Per fare ciò, includeremo due condizioni, una per i browser convenzionali e come Windows 10 sta già facendo un po' di rumore, includeremo una condizione per rilevare 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 "; } else {browser = ua [1] .toLowerCase ();} $ ('div.icon.' + browser) .addClass ("attivo");});

Per finire usiamo un po' di jQuery applicare la classe di attività in base alla condizione che viene generata con addClass () e con questo avremmo finito la nostra applicazione e possiamo vedere come appare quando la apriamo con Firefox.

Abbiamo già un modo per rilevare il browser che utilizza l'utente e tutto da un'unica applicazione, dandoci la possibilità di sapere da dove stanno entrando e quali azioni possiamo intraprendere in base a questa azione.

Provalo, mi piace molto l'approccio utilizzato, per la sua pulizia e qualità grafica veloce.

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo