Détecter tous les navigateurs de l'utilisateur

Dans le monde du Web, il est important de savoir comment travailler avec différentes conditions lorsqu'il s'agit d'applications Web, et ces conditions sont souvent déterminées par l'utilisation d'un certain navigateur.

L'utilisation de l'un ou de l'autre peut conditionner certaines fonctionnalités au sein de notre application, c'est pourquoi sa détection correcte peut nous éviter des désagréments et de mauvaises expériences utilisateur dans notre application.

Voyons comment nous pouvons détecter le navigateur de l'utilisateur avec cette application.

Code HTML

Notre HTML Il n'impliquera pas une plus grande complexité, il aura une structure de base et nous y inclurons notre CSS dans les en-têtes et pour optimiser la charge nous inclurons jQuery depuis votre CDN et JavaScript au bout de notre corps.

 Détecter tous les navigateurs

Nous allons créer un conteneur pour inclure les icônes des navigateurs et au sein de ces plusieurs div avec différentes classes pour mieux appliquer la fonctionnalité.

Feuille de style

Avec notre CSS Nous aurons plus de travail, là nous donnerons les styles à notre conteneur, nous appliquerons des styles à nos images pour créer une fonctionnalité d'activation et de désactivation en fonction du navigateur où notre code s'exécute. En plus de cela, nous inclurons les images de liens externes pour optimiser les ressources de notre code.

 *, * : avant, * : après, * : focus, * : actif, * : focus : actif {box-sizing : border-box; contour : aucun; } html {taille de la police : 10px ; } .container {gauche : 50vw ; position : absolue ; haut : 50vh ; -webkit-transform : translateX (-50%) translateY (-50%) ; -ms-transform : translateX (-50%) translateY (-50%) ; transformer : translateX (-50%) translateY (-50%) ; } .container .icon {affichage : bloc en ligne ; -webkit-filter : niveaux de gris (100%) ; filtre : niveaux de gris (100 %) ; hauteur : 8 rem ; position : relative ; -webkit-transition : tous les .3s facilitent la sortie ; transition : tous les .3s en retrait ; largeur : 8 rem ; } .container .icon : après {border-radius : 50 %; bas : 2rem ; box-shadow : 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4) ; contenu: ""; hauteur : .5rem ; gauche : 20 % ; position : absolue ; largeur : 60 % ; } .container .icon.active {-webkit-animation-name: hover; nom-animation : survolez ; -webkit-filter : niveaux de gris (0%) ; filtre : niveaux de gris (0 %) ; } .container .icon.active : après {-webkit-animation-name : hoverShadow; nom-animation : hoverShadow ; } .container .icon.active, .container .icon.active : après {-webkit-animation-duration : .8s; durée de l'animation : 0,8 s; -webkit-animation-timing-function : facilité de sortie; fonction de synchronisation d'animation : facilité de sortie; -webkit-animation-iteration-count : infini ; nombre d'itérations d'animation : infini; -webkit-animation-direction : alternative ; direction d'animation : alternative; } .container .icon.chrome {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome-128.png.webp"); background-repeat : pas de répétition; taille de l'arrière-plan : 8rem 8rem; } .container .icon.safari {image de fond : url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/safari-128.png.webp"); background-repeat : pas de répétition; taille de l'arrière-plan : 8rem 8rem; } .container .icon.firefox {image de fond : url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-128.png.webp"); background-repeat : pas de répétition; taille de l'arrière-plan : 8rem 8rem; } .container .icon.msie {background-image: url ("https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-128.png.webp"); background-repeat : pas de répétition; taille de l'arrière-plan : 8rem 8rem; } @ -webkit-keyframes hover {from {top: 0; -webkit-transform : échelleX (1) échelleY (1); transformer : échelleX (1) échelleY (1); } à {haut : -1.6rem; -webkit-transform : scaleX (0,9) scaleY (1,05); transformation : échelleX (0,9) échelleY (1,05); }} @keyframes survolent {de {top : 0; -webkit-transform : échelleX (1) échelleY (1); transformer : échelleX (1) échelleY (1); } à {haut : -1.6rem; -webkit-transform : scaleX (0,9) scaleY (1,05); transformation : échelleX (0,9) échelleY (1,05); }} @ -webkit-keyframes hoverShadow {de {bas : 2rem; box-shadow : 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4) ; gauche : 20 % ; largeur : 60 % ; } à {bas : .6rem; box-shadow : 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2) ; gauche : 25 % ; largeur : 50 % ; }} @keyframes hoverShadow {de {en bas : 2rem ; box-shadow : 0 3.3rem 1rem 0 rgba (34, 34, 34, 0.4) ; gauche : 20 % ; largeur : 60 % ; } à {bas : .6rem; box-shadow : 0 3.2rem 1rem 0 rgba (34, 34, 34, 0.2) ; gauche : 25 % ; largeur : 50 % ; }}

De plus, nous utilisons la propriété de CSS3 pour animer les icônes si c'est le navigateur correspondant pour cela nous utiliserons -webkit-animation-durée Oui @images clés d'appliquer certaines fonctionnalités aux icônes et nous établissons des mesures prédéterminées pour elles.

Code Javascript

Dernier dans notre code JavaScript nous aurons la fonctionnalité qui nous permettra de détecter le type de navigateur avec lequel nous utiliserons agent utilisateur Pour ce faire, nous inclurons deux conditions, une pour les navigateurs classiques et comme Windows 10 cela fait déjà pas mal de bruit, nous inclurons une condition pour détecter Microsoft Edge.

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

Pour finir, nous utilisons certains de jQuery d'appliquer la classe d'actifs selon la condition qui est levée avec addClass () et avec cela, nous aurions notre application terminée et nous pouvons voir à quoi elle ressemble lorsque nous l'ouvrons avec Firefox.

Nous avons déjà un moyen de détecter le navigateur que l'utilisateur utilise et le tout à partir d'une seule application, nous donnant la possibilité de savoir d'où ils entrent et quelles actions nous pouvons entreprendre en fonction de cette action.

Essayez-le, j'aime beaucoup l'approche utilisée, pour sa propreté et sa qualité graphique rapide.

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif