web-dev-qa-db-fra.com

Comment détecter le navigateur de l'utilisateur et appliquer un fichier CSS spécifique?

J'ai besoin de détecter le navigateur et d'appliquer le fichier CSS correspondant.

J'ai créé 3 fichiers css: __ie.css, ff.css, opera.css. Maintenant, j'ai besoin de détecter le navigateur afin d'inclure le bon.

Je sais ça

<!--[if IE]>
     <link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->

Mais comment faire de même avec Firefox et Opera/Chrome?

cssuser-agent
14
Sourav

Si vous devez détecter les navigateurs uniquement pour appliquer le CSS, vous voudrez peut-être repenser votre CSS avant d'accéder aux feuilles de style spécifiques au navigateur. Tout ce qu'il faut, c'est qu'un navigateur imite la chaîne d'agent utilisateur d'un autre, ou qu'une nouvelle version soit publiée, et tout se brise. Utilisez les normes actuelles et validez votre code ( http://validator.w3.org/ ), et vous devrez vous soucier de beaucoup moins de problèmes entre navigateurs. Même en utilisant simplement <!--[if IE]><![endif]--> sans numéro de version pourrait casser la mise en page dans les versions ultérieures.

Cela étant dit, si vous souhaitez styliser la page différemment en fonction des fonctionnalités CSS disponibles, jetez un œil à Modernizr . De cette façon, vous ne vérifiez que les fonctionnalités, qui ne seront pas interrompues si une nouvelle version du navigateur est publiée.

Si tout le reste échoue et que vous devez vraiment détecter le navigateur du visiteur, essayez jquery.browser. Il est intégré à jQuery et est simple à utiliser. http://api.jquery.com/jQuery.browser/ .

8
derekerdmann

Le plus proche que vous pouvez venir avec du CSS pur est avec les requêtes de fonctionnalités . Au lieu de détecter le type/la version du navigateur, il vous permet de vérifier si une combinaison propriété/valeur spécifique est prise en charge par le navigateur.

Voici un exemple d'utilisation de la propriété transform pour le centrage vertical. Si le navigateur ne prend pas en charge la transformation, nous ne voulons pas ajuster son positionnement:

@supports (transform: translateY(-50%)) {
    .foo {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

Prise en charge du navigateur pour les requêtes de fonctionnalités

5
cimmanon

Si vous avez besoin de détecter le navigateur pour Firefox, Opera et Chrome, alors vous faites quelque chose de mal. Le même CSS devrait fonctionner dans chacun d'eux.

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

Cependant, si vous vous en tenez aux fonctionnalités couramment utilisées, ces cas sont rares et, en général, vous ne devriez vraiment pas avoir besoin de faire de la détection du navigateur ces jours-ci, sauf pour diverses versions d'IE.

Si vous ne savez pas si les fonctionnalités que vous souhaitez utiliser sont prises en charge par la plupart des navigateurs, vous pouvez le savoir sur CanIUse.com ou Quirksmode .

Si vous utilisez des fonctionnalités de pointe, alors oui, vous rencontrerez des problèmes avec la prise en charge de plusieurs navigateurs. Mais dans ce cas, il est généralement préférable de faire la détection des fonctionnalités, en utilisant un produit comme Modernizr , plutôt que la détection du navigateur, car ce sera un moyen plus fiable de vous assurer de couvrir tous les navigateurs et toutes les versions, y compris les futures versions (ce qui est une faiblesse inhérente à la détection du navigateur).

3
Spudley

Il n'y a pas de commentaires conditionnels pour les navigateurs autres que IE.

Mais vous pouvez le faire avec javascript: http://www.quirksmode.org/js/detect.html

1
easwee

Parfois, vous pouvez utiliser des propriétés préfixées pour que chaque navigateur applique ses propres propriétés en fonction de leurs préfixes et ignore les autres. Le code suivant remplit un arrière-plan par gradient CSS3:

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:

  • Le -webkit- est destiné aux navigateurs basés sur WebKit (Chrome et Safari)
  • Le -moz- est pour Firefox
  • Le -ms- est pour Internet Explorer
  • Le -o- est pour Opera

Mais d'une manière générale, le reniflement du navigateur n'est pas le meilleur moyen, car il peut facilement échouer dans les nouveaux navigateurs. De cette façon, vous devez obtenir la chaîne de l'agent utilisateur du navigateur et l'analyser. Appliquez ensuite des règles CSS spécifiques pour chaque navigateur en fonction de ses fonctionnalités prises en charge. Si la chaîne de l'agent utilisateur du navigateur change dans les versions plus récentes, vous devez modifier le code de détection de votre navigateur. Imaginez que vous souhaitiez prendre en charge plusieurs navigateurs et que chacun d'entre eux puisse publier de nouvelles versions en un an! Vous pouvez demander au navigateur que s'il prend en charge une fonctionnalité donnée. par exemple. Vidéo HTML5:

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

Il existe une bibliothèque de détection de fonctionnalités nommée Modernizr qui est écrite en JavaScript. Vous pouvez le télécharger et l'inclure en utilisant dans votre page html. Vous devez également ajouter la classe "no-js" à votre élément. Modernizer exécute tous ses tests de détection de fonctionnalités et certaines classes sur élément; quelque chose comme ça:

<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 les règles CSS de manière sélective. Par exemple, vous souhaitez appliquer une transformation 3D animée dans les navigateurs pris en charge ou afficher quelque chose dans d'autres. Considérez le code suivant:

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

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

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

C'est un bon article décrivant le concept.

1
Abdollah

Peut-être que je suis trop tard, mais. La meilleure solution est d'utiliser CSS/JS Browser Determiner (4kb minified). Clause de non-responsabilité : Ceci est un produit commercial que je vends.

Pour séparer les fichiers CSS et JS, collez ce code dans votre <html> tag:

<head><script src="js/cssjs-browser-determiner.min.js"></script>

<!-- Old Browsers -->
<script>
browser.is_old && document.writeln(
  '<link href="styles/old-browser.css" rel="stylesheet">'
);
</script>

Ce fichier ne sera chargé que pour les anciens navigateurs (par défaut, ceux qui ne supportent pas la transition CSS3). Si vous souhaitez séparer les fichiers pour chaque navigateur spécifique, vous pouvez faire de même mais changer browser.is_old à browser.chrome ou browser.webkit etc...

Ensuite, écrivez du CSS pour un navigateur spécifique dans old-browser.css (ou tout autre fichier CSS):

.opera9 .my-el { ... }
.firefox1_5 .my-el { ... }
.ie8- .el { ... } // IE8 or less
.ios .el { ... } // iPhone, iPad, iPod
etc...
0
artnikpro