Detecta todos os navegadores do usuário

No mundo da web é importante saber trabalhar com diferentes condições quando se trata de aplicações web, e muitas vezes essas condições são determinadas pelo uso de um determinado navegador.

A utilização de um ou de outro pode condicionar certas funcionalidades da nossa aplicação, razão pela qual a sua correta detecção pode poupar-nos de incómodos e más experiências para o utilizador da nossa aplicação.

Vamos ver como podemos detectar o navegador do usuário com este aplicativo.

Código HTML

Nosso HTML Não vai envolver uma complexidade maior, terá uma estrutura básica e aí incluiremos o nosso CSS nos cabeçalhos e para otimizar a carga, incluiremos jQuery do seu CDN e JavaScript no final do nosso corpo.

 Detecta todos os navegadores

Criaremos um container para incluir os ícones dos navegadores e dentro desses vários div com diferentes classes para melhor aplicar a funcionalidade.

Folha de estilos

Com nosso CSS Teremos mais trabalho, lá daremos os estilos ao nosso container, aplicaremos estilos às nossas imagens para fazer uma funcionalidade on e off de acordo com o navegador onde nosso código está executando. Além disso, incluiremos as imagens de links externos para otimizar os recursos do nosso código.

 *, *: antes, *: depois, *: foco, *: ativo, *: foco: ativo {tamanho da caixa: caixa da borda; esboço: nenhum; } html {tamanho da fonte: 10px; } .container {left: 50vw; posição: absoluta; topo: 50vh; -webkit-transform: translateX (-50%) translateY (-50%); -ms-transform: translateX (-50%) translateY (-50%); transform: translateX (-50%) translateY (-50%); } .container .icon {display: inline-block; -webkit-filter: escala de cinza (100%); filtro: escala de cinza (100%); altura: 8rem; posição: relativa; -webkit-transit: all .3s Easy-out; transição: todos os .3s atenuados; largura: 8rem; } .container .icon: após {raio da borda: 50%; inferior: 2rem; sombra da caixa: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); contente: ""; altura: 0,5 rem; esquerda: 20%; posição: absoluta; largura: 60%; } .container .icon.active {-webkit-animation-name: hover; nome-da-animação: pairar; -webkit-filter: tons de cinza (0%); filtro: escala de cinza (0%); } .container .icon.active: after {-webkit-animation-name: hoverShadow; nome-da-animação: hoverShadow; } .container .icon.active, .container .icon.active: após {-webkit-animation-duration: .8s; duração da animação: .8s; -webkit-animation-timing-function: facilitação; função de tempo de animação: atenuação; -webkit-animation-iteration-count: infinito; animação-iteração-contagem: infinito; -webkit-animation-direction: alternate; animação-direção: alternativo; } .container .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); repetição de fundo: sem repetição; tamanho do fundo: 8rem 8rem; } .container .icon.safari {imagem de fundo: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); repetição de fundo: sem repetição; tamanho do fundo: 8rem 8rem; } .container .icon.firefox {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); repetição de fundo: sem repetição; tamanho do fundo: 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); repetição de fundo: sem repetição; tamanho do fundo: 8rem 8rem; } @ -webkit-keyframes hover {from {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformar: escalaX (1) escalaY (1); } para {topo: -1.6rem; -webkit-transform: scaleX (0,9) scaleY (1,05); transformar: escala X (0,9) escala Y (1,05); }} @keyframes hover {from {top: 0; -webkit-transform: scaleX (1) scaleY (1); transformar: escalaX (1) escalaY (1); } para {topo: -1.6rem; -webkit-transform: scaleX (0,9) scaleY (1,05); transformar: escala X (0,9) escala Y (1,05); }} @ -webkit-keyframes hoverShadow {from {bottom: 2rem; sombra da caixa: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0,4); esquerda: 20%; largura: 60%; } para {inferior: .6rem; sombra da caixa: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0,2); esquerda: 25%; largura: 50%; }} @keyframes hoverShadow {from {bottom: 2rem; sombra da caixa: 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4); esquerda: 20%; largura: 60%; } para {inferior: .6rem; sombra da caixa: 0 3.2rem 1rem 0 rgba (34, 34, 34, 0,2); esquerda: 25%; largura: 50%; }}

Além disso, usamos a propriedade de CSS3 para animar os ícones, se for o navegador correspondente, usaremos -webkit-animation-duration Y @keyframes para aplicar algumas funcionalidades aos ícones e estabelecer medidas pré-determinadas para eles.

Código Javascript

Último em nosso código JavaScript teremos a funcionalidade que nos permitirá detectar o tipo de navegador com o qual usaremos agente de usuário Para fazer isso, incluiremos duas condições, uma para navegadores convencionais e como Windows 10 já está fazendo muito barulho, incluiremos uma condição para detectar o Microsoft Edge.

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

Para terminar, usamos alguns dos jQuery para aplicar a classe de ativos de acordo com a condição que é lançada com addClass () e com isso teríamos nosso aplicativo concluído e podemos ver como fica quando o abrimos com Raposa de fogo.

Já temos uma forma de detectar o navegador que o usuário utiliza e tudo a partir de um único aplicativo, dando-nos a possibilidade de saber de onde ele está entrando e quais ações podemos realizar em função dessa ação.

Experimente, gostei muito da abordagem utilizada, pela limpeza e rapidez de qualidade gráfica.

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo