[Javascript] changer la feuille de style

Fermé
-
 Oranjade -
Bonjour,
Je travail sur un joli projet de site internet, développant le design en CSS sur mon beau linux, tout est beau, nickel, quand Oh malheur ! Je montre mon beau site à un ami qui me dit : "mais il est moche" ! car ce fameux ami ne semble pas connaitre le renard de feu, et utilise ce qui est fournit automatiquement lors de l'achat de son PC pour naviguer sur internet.

Malheureusement, c'est un peu trop la galère pour faire un CSS compatible pour IE et Firefox, donc je souhaiterais faire deux feuilles de styles différentes, et en javascript détecter le navigateur et mettre la bonne feuille de style.

Donc dans le header du HTML j'ai mis les 2 liens vers mes feuilles :

<link title="cssFF" href="../styles/Styles.css" rel="stylesheet" type="text/css" media="screen" />
<link title="cssIE" href="../styles/StylesIE.css" rel="alternate stylesheet" type="text/css" media="screen">


sachant que pour tester, j'ai mis un horrible fond rouge dans la feuille de style de Firefox, et un fond bleu dans celle de Internet Explorer.

Puis je bidouille une fonction en javascript qui me donne au final :

function stylecss(){
var NomNav = navigator.appName; // place le nom du navigateur dans la variable NomNav

if (NomNav == "Microsoft Internet Explorer") { // teste si c'est MIE
feuilleStyle = "cssIE"; // si vrai, met l'adresse de la page pour MIE dans la variable

}
else{ // si ça n'est pas vrai, c'est pas MIE

feuilleStyle = "cssFF"; // met l'adresse de la page pour NETSC dans la variable OuAller
}

setActiveStyleSheet('feuilleStyle');
}


Et enfin, j'appelle ma fonction dans ma page html (sans oublier de faire un lien vers ma page .js dans le header)

<body onLoad="stylecss();">

Et quand je test... tout est tout rouge ! Donc il me charge la feuille de style par défaut uniquement.
Alors j'me suis dis : où c'est que ça plante ?
J'ai mis des alert(); dans if et else de ma fonction, et ça me donne un truc très étrange :
sur Firefox, il me met l'alerte que j'ai mis dans le else, donc il passe bien et mets ma feuille de style pour le css de Firefox.
En revanche, sous IE, je n'ai aucune alert(), même pas celle où il passe dans le else.
J'ai donc mis une alert() au tout début, juste après avoir rempli la variable avec le nom du navigateur, donc avant les if, et sous Firefox il me met bien Netscape, alors que sous IE, je n'ai toujours rien du tout, même pas de boite d'alerte à l'horizon.

J'ai beau chercher, je ne trouve rien, pas de fautes d'orthographe, de fautes d'inattention... Auriez vous une idée de l'origine du problème ? en fait ça n'a rien a voir avec la nature de mon script, mais encore un coup tordu de Microsoft pour que je ne fasse mon site que pour IE et uniquement pour IE ?

Merci de votre attention, désolée des éléments inutiles de mon message, j'ai essayé de donner le plus d'explications possible.

1 réponse

Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 343
pourquoi ne pas utilise des conditionel plutot que du js !!

pour que seul IE voit la feuille
<!--[if IE]>
     <style type="text/css">
         @import "/style/pour_ie.css";
     </style>
<![endif]-->


et comme tu as fais 2 feuilles completes et pas seulement corriger les bug dans la css ie

tu met pour etre sur que IE ne lira pas la feuille par default

<!--[if !IE]> <!-->
    <style type="text/css">
         @import "/style/toutlesautres.css";
     </style>
<!--> <![endif]-->

rebonjour,

Merci pour cette info, je ne connaissais pas du tout les conditionnels, et donc j'ai mis ça en place, ça marche nickel.

Mais si quelqu'un passe par là et trouve pourquoi mon code Javascript ne fonctionne pas, j'aimerais bien savoir, pour ne pas refaire la même erreur lors d'un prochain projet ;).