En el mundo web es importante saber trabajar con diferentes condiciones en lo que respecta a las aplicaciones web, y muchas veces estas condiciones están determinadas por el uso de un determinado navegador.
El uso de uno u otro puede condicionar ciertas funcionalidades dentro de nuestra aplicación, es por ello que su correcta detección nos puede ahorrar inconvenientes y malas experiencias de usuario en nuestra aplicación.
Veamos cómo podemos detectar el navegador del usuario con esta aplicación.
Código HTML
Nuestro HTML no supondrá mayor complejidad, tendrá una estructura básica y allí incluiremos nuestro CSS en las cabeceras y para optimizar la carga incluiremos jQuery desde su CDN y el JavaScript al final de nuestro body.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Detectar todos los navegadores</title> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <div class="container"> <div class="icon chrome"></div> <div class="icon safari"></div> <div class="icon firefox"></div> <div class="icon msie"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="detectar.js"></script> </body> </html>Crearemos un contenedor para incluir los iconos de los navegadores y dentro de estos varios div con clases distintas para poder aplicar de mejor forma la funcionalidad.
Hoja de estilos
Con nuestro CSS tendremos más trabajo, allí le daremos los estilos a nuestro contenedor, aplicaremos estilos a nuestras imágenes para hacer una funcionalidad de prendido y apagado de acuerdo al navegador donde se esté ejecutando nuestro código. Además de esto incluiremos las imágenes desde enlaces externos para optimizar los recursos de nuestro código.
*, *:before, *:after, *:focus, *:active, *:focus:active {
box-sizing: border-box;
outline: none;
}
html {
font-size: 10px;
}
.container {
left: 50vw;
position: absolute;
top: 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: grayscale(100%);
filter: grayscale(100%);
height: 8rem;
position: relative;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
width: 8rem;
}
.container .icon:after {
border-radius: 50%;
bottom: 2rem;
box-shadow: 0 3.3rem 1rem 0 rgba(34, 34, 34, 0.4);
content: "";
height: .5rem;
left: 20%;
position: absolute;
width: 60%;
}
.container .icon.active {
-webkit-animation-name: hover;
animation-name: hover;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.container .icon.active:after {
-webkit-animation-name: hoverShadow;
animation-name: hoverShadow;
}
.container .icon.active, .container .icon.active:after {
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.container .icon.chrome {
background-image: url("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png");
background-repeat: no-repeat;
background-size: 8rem 8rem;
}
.container .icon.safari {
background-image: url("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png");
background-repeat: no-repeat;
background-size: 8rem 8rem;
}
.container .icon.firefox {
background-image: url("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png");
background-repeat: no-repeat;
background-size: 8rem 8rem;
}
.container .icon.msie {
background-image: url("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png");
background-repeat: no-repeat;
background-size: 8rem 8rem;
}
@-webkit-keyframes hover {
from {
top: 0;
-webkit-transform: scaleX(1) scaleY(1);
transform: scaleX(1) scaleY(1);
}
to {
top: -1.6rem;
-webkit-transform: scaleX(0.9) scaleY(1.05);
transform: scaleX(0.9) scaleY(1.05);
}
}
@keyframes hover {
from {
top: 0;
-webkit-transform: scaleX(1) scaleY(1);
transform: scaleX(1) scaleY(1);
}
to {
top: -1.6rem;
-webkit-transform: scaleX(0.9) scaleY(1.05);
transform: 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);
left: 20%;
width: 60%;
}
to {
bottom: .6rem;
box-shadow: 0 3.2rem 1rem 0 rgba(34, 34, 34, 0.2);
left: 25%;
width: 50%;
}
}
@keyframes hoverShadow {
from {
bottom: 2rem;
box-shadow: 0 3.3rem 1rem 0 rgba(34, 34, 34, 0.4);
left: 20%;
width: 60%;
}
to {
bottom: .6rem;
box-shadow: 0 3.2rem 1rem 0 rgba(34, 34, 34, 0.2);
left: 25%;
width: 50%;
}
}Adicionalmente, utilizamos la propiedad de CSS3 para animar los íconos si es el navegador correspondiente para ello utilizaremos -webkit-animation-duration y @keyframes para aplicar algunas funcionalidades a los iconos y establecemos unas medidas predeterminadas para los mismos.
Código Javascript
Por último en nuestro código JavaScript tendremos la funcionalidad que nos permitirá detectar el tipo de navegador, con lo cual utilizaremos userAgent para ello, incluiremos dos condiciones, una para los navegadores convencionales y como Windows 10 ya está haciendo bastante ruido, incluiremos una condición para detectar 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("active");
});Para finalizar utilizamos algo de jQuery para aplicar la clase activo de acuerdo a la condición que se arroja con addClass() y con eso tendríamos nuestra aplicación terminada y podremos ver como luce cuando abrimos la misma con Firefox.
Ya tenemos la forma de detectar el navegador que utilizar el usuario y todo desde una sola aplicación, dándonos la posibilidad de saber desde donde está ingresando y que acciones podemos tomar de acuerdo a esta acción.
Probarlo, que a mi me gusta mucho el enfoque que se usa, por su limpieza y calidad gráfica rápida.
Me ha parecido muy interesante este tutorial. Ya no se escapa ninguno sin saber que navegador utiliza.