Javascript pour tout navigateur

Bonjour à tous!
J'ai un problème concernant un menu en 3 niveaux en CSS dont le javascript ci-dessous teste les navigateurs et rédirige vers la CSS convenable.
J'ai réussi à tester 2 navigateurs mais pour 3 ou voir 4 navigateurs je n'arrive pas. Aidez-moi s'il vous plaît!

<script language="JavaScript">

if((navigator.appName.indexOf("Explorer") >= 0)

 && (navigator.appVersion.indexOf('7.0')>=0 ))

 {

 document.writeln('<link rel=stylesheet href="menu_ie7.css" type="text/css">');

 }

else

{

 document.writeln('<link rel=stylesheet href="menu_mozilla.css" type ="text/css">');

 }

 

</script>

Je vous remercie!

Bonjour,

Je déplace le sujet dans le salon Javascript. Par contre, on t'y répondra probablement que tenter de détecter le navigateur est une mauvaise idée, car c'est peu fiable.

S'il s'agit de gérer des différences de mise en page, c'est la mauvaise méthode. La bonne méthode est la suivante:
- travailler avec les standards du Web, notamment HTML 4/XHTML 1 et CSS 2.1;
- toujours avoir un Doctype valide pour la page;
- s'efforcer d'obtenir le résultat voulu dans les navigateurs modernes qui comprennent plutôt bien ces standards (Firefox, Opera, Safari, Konqueror... et dans une certaine mesure Internet Explorer 7);
- si besoin, appliquer des correctifs précis pour Internet Explorer 6 (via un commentaire conditionnel, par exemple).

Tenter de détecter le navigateur est une mauvaise idée, car c'est peu fiable Il vaut mieux procéder en testant au préalable les fonctions dont tu as besoin.

De plus, si tes utilisateurs n'ont pas javascript, à ce que j'en juge par ton code, ils ne bénéficient pas des feuilles de style.

Comme te le conseille Florent, le plus sûr moyen est d'utiliser si le besoin s'en fait sentir les commentaires conditionnels, mais cela ne marche que si tu as besoin de différencier entre les versions d'Internet Explorer, ou bien entre Internet Explorer et tous les autres navigateurs.
Modifié par Gilles (31 Aug 2007 - 17:35)

Je ne pensais pas trouver si vite un exemple du manque de fiabilité de la détection de navigateur par javascript. Je suis en train de surfer sur un site (professionnel, il s'agit d'une plateforme d'enseignement à distance) qui à chaque chargement de page, prétend que mon Firefox est retourné en enfance puisque je suis censé utiliser d'après lui... Netscape 2.x. Et avec mon Konqueror, il n'est même pas en mesure de le reconnaître (et pourtant il me certifie que mon "explorateur n'est pas validé pour être utilisé avec [ la plateforme en question ]" (en passant, une petite recherche Google bien sentie vous désignera la plateforme en question ).
Modifié par Gilles (01 Sep 2007 - 18:50)

bonjour,

Attention , Konqueror est le 'Braguetti" des navigateurs et peut se faire passer
pour un bon nombre d'entre eux (voir outils->modifier l'identité ...) .


Plus sérieusement , j'ai déjà rencontré ces erreurs de détection, et je suis 100%
d'accord avec Florent et Gilles concernant le peu de fiabilité de cette technique

Concernant les propriétés et classes CSS , j'utilise ( à mon niveau non professionnel) les sélécteurs d'enfants non reconnu IE6 ( reconnu par ie7 et FF OPera)
genre

div>p {   
     instructions Css;
  }

Il existe les sélecteurs entre crochet pour les sélecteurs d'attributs, qui fonctionne selon les mêmes principes

Il y a peut-être quelques mises en garde concernant 'cette' technique , car je vois peu de feuilles de style utilisant ce procédé ...

PS :rien à voir mais je viens de voir le site de Gilles (Chagnon) référencé dans
le mag Linux Pratique pour un article traitant du Svg
Modifié par kzone (02 Sep 2007 - 08:31)

Salut,

kzone a écrit :
Il existe les sélecteurs entre crochet pour les sélecteurs d'attributs, qui fonctionne selon les mêmes principes

Il y a peut-être quelques mises en garde concernant 'cette' technique , car je vois peut de feuilles de style utilisant ce procédé ...

Ben la mise en garde provient juste du fait que tous les navigateurs ne comprennent pas ces instructions mais à partir du moment où tu le sais, rien ne t'empêche de t'en servir en complément.

je viens de retrouver l'annotation faite par Meyer :

a écrit :

Les sélecteurs d'attributs sont supportés par les navigateurs Opera et Gecko, au contraire des versions IE5/MAC et IE6/Windows

..et comme précisé dans un autre 'topic' , ils sont supportés par IE 7

Je trouve ce procédé assez 'élégant' car il me permet d'écrire ma feuillle de style conformément aux standards , et de ne rectifier que les classes qui posent 'problémes' (en général concernant les marges internes et externes, ou propriétés non supportées tel les pseudos-classes) ce qui limitent les codes en 'doublons' !!

Bonjour,
Dans la faq il est déconseillé d'utilisser des hack. Pour IE, il y a les commentaires conditionnels. Commuter des feuilles de style avec javascript risque d'occulter certains visiteurs. Maintenant, avec IE7, j'ai du modifiier mes règles <!--[if lte IE 6]> en <!--[if IE]> car le concept hasLayout dans IE/Win éxiste toujours, sauf exception.
Modifié par chmel (02 Sep 2007 - 23:19)

chmel a écrit :

Commuter des feuilles de style avec javascript risque d'occulter certains visiteurs

Tout à fait d'accord ... Javascript n'est pas fait pour cela !

Je n'ai jamais trop aimé les commentaires conditionnels que j'avais un moment employé pour l'insertion de la balise non-standard <embed> et qui pour le svg est rendue obligatoire pour insérer un contenu dans ce format (l'extension du viewer Adobe l'exige en fait ) .

Concernant leur utilisation avec les Css , je n'ai pas un assez bon niveau pour en juger, mais si cela est conseillé voir recommandé je vais devoir approndir un peu le sujet .

Mais je ne pense pas que l'utilisation des sélecteurs (faisant partie des recommandation) puissent être considéré comme un 'hack' ...
L'embêtant est que dans ma feuille de style je dois compenser les "erreurs" IE
en rajoutant ( et c'est là que cela fait un peu 'bidouille') des instructions que ne lit pas IE < 7 !
Pour palier au mise au norme faite par les navigateurs, je m'efforce d'appliquer ces règles via les sélecteurs de suite après celles qui sont lues par tous ...
Si la nouvelle version du navigateur se met au norme des sélecteurs , la seconde règles (sélécteur) remplace la première (tous navigatueurs)

... p'etre , me mettre au conditionnel moi ...
Modifié par kzone (02 Sep 2007 - 23:52)

kzone a écrit :


... p'etre , me mettre au conditionnel moi ...

Je pratique peu et ne voudrai pas t'induire en erreur. La FAQ concernant les hacks ne me semble pas avoir été mise à jour depuis IE7. Faudrai voir si elle est encore valable ?

@chmel : c'est au contraire lors de la sortie d'IE7 que microsoft a explicitement demandé aux développeurs de laisser tomber les hacks et d'utiliser les commentaires conditionnels dans tous les cas.
Tu avais donc parfaitement raison dans ton précédent message.
A noter qu'en plus, l'utilisation des commentaires conditionnels permet de mieux comprendre le code pour des personnes extérieures au projet (certains hacks ayant une syntaxe assez particulière).

Salut,

chmel a écrit :
Faudrai voir si elle est encore valable ?

Je trouve qu'elle l'est, à première vue.

Les sélecteurs dont parle kzone ne sont pas des hacks mais seulement des sélecteurs qui se trouvent dans les normes CSS. Rien n'empêche de s'en servir ; il faut juste savoir qu'ils ne fonctionnent pas partout.

Après, si ce code n'est pas compris par IE et qu'il existe un moyen de contourner le problème pour ce navigateur, on sort les commentaires conditionnels. Si le code pose problème à un navigateur autre qu'IE, on cherche une propriété qui ne pose pas de problème aux autres navigateurs tout en rétablissant un bon affichage ou bien on fait l'impasse ou alors on sort un hack suivant les exigences. Le hack passe donc en dernier recours, lorsqu'on ne peut vraiment pas faire autrement. Ce n'est pas fiable à 100%... à la différence des commentaires conditionnels. Cette démarche se justifie plus dans un contexte professionnel et uniquement pour des navigateurs autres qu'IE (ce dernier n'a jamais besoin de hacks).
Modifié par koala64 (03 Sep 2007 - 09:43)