Comment puis-je détecter le navigateur de l'utilisateur et de lui appliquer un fichier CSS particulier?

Si vous avez de détecter les navigateurs juste d'appliquer le CSS, alors vous voudrez peut-être repenser votre CSS avant de passer à un navigateur spécifique des feuilles de style. Il suffit d'un navigateur à l'imiter une autre de la chaîne de l'agent utilisateur, ou une nouvelle version à être libéré, et tout se casse. Utiliser les normes en vigueur et de valider votre code (http://validator.w3.org/), et vous aurez à vous soucier beaucoup moins de la croix-problèmes de navigateur. Même en n'utilisant que <!--[if IE]><![endif]--> sans numéro de version pourrait casser la mise en page dans les versions ultérieures.

Cela étant dit, si vous voulez le style de la page différemment selon qu'CSS fonctionnalités sont disponibles, jetez un oeil à Modernizr. De cette façon, vous êtes uniquement les fonctionnalités de vérification, ce qui ne sera pas rompu si une nouvelle version du navigateur est libéré.

Si tout le reste échoue et que vous avez vraiment besoin de détecter le navigateur du visiteur, essayez jquery.browser. Il est construit en jQuery, et est simple à utiliser. http://api.jquery.com/jQuery.browser/.

OriginalL'auteur derekerdmann

Si vous avez besoin d'un navigateur détecter pour Firefox, Chrome et Opera, alors vous êtes en train de faire quelque chose de mal. Le même CSS devraient travailler dans tous les d'entre eux.

Il y a des exceptions bien sûr-tous les navigateurs ont des fonctionnalités manquantes et des bugs qui n'apparaissent pas dans les autres navigateurs. Un exemple serait text-overflow:ellipsis, ce qui n'est pas pris en charge par Firefox.

Toutefois, si vous êtes collant aux fonctions couramment utilisées, ces cas sont rares et loin entre, et, en général, vous ne devriez vraiment pas besoin de faire la détection du navigateur ces jours, sauf pour les différentes versions d'IE.

Si vous n'êtes pas sûr de savoir si les fonctions que vous souhaitez utiliser sont pris en charge par la plupart des navigateurs, vous pouvez trouver à CanIUse.com ou Quirksmode.

Si vous utilisez sérieusement les caractéristiques de pointe, alors oui, vous aurez des problèmes avec la croix-prise en charge du navigateur. Mais dans ce cas, il est généralement préférable de faire la détection de fonctionnalité, à l'aide d'un produit comme le Modernizr, plutôt que sur la détection du navigateur, car ce sera un moyen plus fiable de s'assurer que vous couvrez tous les navigateurs et toutes les versions, y compris les nouvelles versions (ce qui est inhérent weakeness de la détection de navigateur).

OriginalL'auteur Spudley

Parfois, vous pouvez utiliser le préfixe propriétés que chaque navigateur appliquer leurs propres propriétés en fonction de leurs préfixes et ignorer les autres. Code suivant remplit un arrière-plan en CSS3 gradient:

background-color: green;
background-image: url(my-img.png);
background-image: -webkit-linear-gradient(top right, #b51111, #eeeeee);
background-image: -moz-linear-gradient(top right, #b51111, #eeeeee);
background-image: -ms-linear-gradient(top right, #b51111, #eeeeee);
background-image: -o-linear-gradient(top right, #b51111, #eeeeee);
background-image: linear-gradient(top right, #b51111, #eeeeee);

Dans ce code:

• L'-webkit - est basé sur WebKit navigateurs (Chrome et Safari)
• Le-moz - est pour Firefox
• L'-ms - pour Internet Explorer
• - O - pour Opera

Mais d'une manière générale, la détection de browser n'est pas la meilleure façon, car il peut facilement échouer dans les navigateurs les plus récents. De cette façon, vous avez à la chaîne de l'Agent Utilisateur du navigateur et de l'analyser. Ensuite appliquer certaines règles css pour chaque navigateur basé sur ses fonctionnalités prises en charge. Si la chaîne de l'Agent Utilisateur du navigateur changement dans les versions plus récentes, vous devez modifier votre navigateur renifler code. Imaginez que vous voulez prendre en charge plusieurs navigateurs et chacun d'eux peut libérer certains de nouvelles versions dans un an!
Vous pouvez interroger le navigateur que si elle prend en charge une fonctionnalité donnée. par exemple, la vidéo HTML5:

if(!!document.createElement('video').canPlayType === true) {
//run some code that relies on HTML5 video
} else {
//do something else
}

Il y a une fonctionnalité de détection de la bibliothèque nommée Modernizr qui est écrit basé sur JavaScript. Vous pouvez le télécharger et l'inclure dans votre page html. Aussi, vous devez ajouter "no-js" classe à votre élément. Moderniste s'exécute toutes ses fonctionnalité des tests de détection et de et de certaines classes à l'élément; quelque chose comme ceci:

<html lang="en-gb" class=" js no-flexbox no-flexbox-legacy canvas canvastext 
webgl no-touch geolocation postmessage websqldatabase no-indexeddb
hashchange history draganddrop no-websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-cssreflections csstransforms 
no-csstransforms3d csstransitions fontface generatedcontent video audio  
localstorage sessionstorage webworkers applicationcache svg inlinesvg 
smil svgclippaths">

Ainsi, vous pouvez appliquer des règles CSS de manière sélective. Par exemple, vous souhaitez appliquer une animation 3D transformer en soutenant les navigateurs ou afficher quelque chose dans d'autres. Considérons le code suivant:

#my-div:hover {
  transform: rotateY(90deg);
}

pour le cas par défaut et ci-dessous pour alternative:

.no-csstransforms3d #my-div:hover {
  position: relative;
  right: 200px;
}

C'est une bonne l'article décrivant le concept.

OriginalL'auteur Abdollah