Charger un fichier css suivant le navigateur.

**escteban** · 30/05/2007, 09h45

Bonjour ,

Je souhaiterais savoir si il est possible de charger un css differents selon le navigateur.
Je sais qu'il est possible de recuperer la version du navigateur via javascript, mais apres quoi, comment générer la balise html : <link rel="stylesheet" type="text/css" href="fauille.css"> en javascript ?

Merci par avance pour toute aide.

**Bisûnûrs** · 30/05/2007, 09h49

Tu peux plutôt utiliser des commentaires conditionnels pour ce faire.

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--[if gte IE 5]> pour réserver le contenu à IE 5.0 et version plus récentes (actuellement E5.5, IE6.0 et IE7.0) <![endif]-->
 
<!--[if IE 5.0]> pour IE 5.0 <![endif]-->
 
<!--[if IE 5.5000]> pour IE 5.5 <![endif]-->
 
<!--[if IE 6]> pour IE 6.0 <![endif]-->
 
<!--[if gte IE 5.5000]> pour IE5.5 et supérieur <![endif]-->
 
<!--[if lt IE 6]> pour IE5.0 et IE5.5 <![endif]-->
 
<!--[if lt IE 7]> pour IE inférieur à IE7 <![endif]-->
 
<!--[if lte IE 6]> pour IE5.0, IE5.5 et IE6.0 mais pas IE7.0<![endif]-->

Tu ne peux évidemment pas mettre Firefox à la place de IE dans ces commentaires, mais si tu te faire un commentaire pour IE6, un pour IE7 et une feuille de style par défaut, ça devrait couvrir un bon nombre de navigateurs.

**escteban** · 30/05/2007, 10h17

Merci, et excuse ma question est peu etre bete , mais la feuille de style par defaut pour firefox, au niveau syntaxe ca donne quoi, vu que les commentaires conditionnels ne sont lus que par IE?

**Bisûnûrs** · 30/05/2007, 10h29

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<head>
   ...
   <link rel="stylesheet" href="css/ff.css" type="text/css" />
   <!--[if IE 6]>
      <link rel="stylesheet" href="css/ie6.css" type="text/css" />
   <![endif]-->
   <!--[if IE 7]>
      <link rel="stylesheet" href="css/ie7.css" type="text/css" />
   <![endif]-->
</head>

**escteban** · 30/05/2007, 10h46

Merci beaucoup pour ton aide, je ne pensais pas que ca l'ecraserait.

**Bisûnûrs** · 30/05/2007, 10h59

En fait, ça ne l'écrase pas.

Toutes tes déclarations dans le premier fichier seront écrasées si et seulement si il y a les même déclarations dans les fichiers qui suivent.

Exemple :

ff.css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body{
   background:red;
   font-family:arial;
}

ie6.css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body{
   background:green;
}

Dans ce cas-là, le background sera écrasé, mais tu n'as pas besoin de redéclarer font-family si tu veux que ça reste le même.

**escteban** · 30/05/2007, 11h10

merci pour ces utiles precisions

**Gatsu35** · 30/05/2007, 11h14

Accesoirement je me permet de rajouter que quand on code nickel en CSS (même un site assez warrior) il n'y a besoin d'aucun hack pour Safari, Opera, Firefox.

Au pire il y a besoin de hack pour IE5/6/7
mais je procède de cette manière :

//property : blabla /*hack IE6/7 */
_property : blabla /*hack only IE6 */

pour IE5.0 et 5.5 j'utilise une feuille de styles appelée via commentaires conditionnels

Charger un fichier css suivant le navigateur.

JavaScript

Discussions similaires

Partager

Partager