11548 sujets

JavaScript, DOM et API Web HTML5

Salut,
Je suis newbie ici et j'ai un javascript qui me pose des problèmes. Je cherche à afficher une feuille de style différente pour Firefox, pour IE +7.0 et IE -7.0 et une pour opéra, mais ca ne fonctionne pas, il y a des conflits entre les navigateurs. QQn sait ce que j'ai fait de faux?
Merci d'avance


<script type="text/javascript">
if(navigator.userAgent.indexOf("Firefox")!=-1){
	var versionindex=navigator.userAgent.indexOf("Firefox")+8;
	if (parseInt(navigator.userAgent.charAt(versionindex))>=1) {
		document.write('<link href="/templates/madeyourweb/css/template_css.css" rel="stylesheet" type="text/css" />');
	}
}

//Detect IE5.5+
version=0
if (navigator.appVersion.indexOf("MSIE")!=-1){
	temp=navigator.appVersion.split("MSIE");
	version=parseFloat(temp[1]);
}

if (version>=5.0) {//NON IE browser will return 0
	document.write('<link href="/templates/madeyourweb/css/template_css_ie.css" rel="stylesheet" type="text/css" />');
}	else if(version>=7.0){
		document.write('<link href="/templates/madeyourweb/css/template_css_ie7.css" rel="stylesheet" type="text/css" />');

}




if(navigator.userAgent.indexOf("Opera")!=-1){
	var versionindex=navigator.userAgent.indexOf("Opera")+6;
	if (parseInt(navigator.userAgent.charAt(versionindex))>=8) {
		document.write('<link href="/templates/madeyourweb/css/template_css_ie.css" rel="stylesheet" type=text/css\" />');
	}
}

</script> 
Salut,

si tu utilises un langage de script serveur (php, asp, ce que tu veux) il vaut mieux générer ceci côté serveur avec détection du user-agent.

Après si tu veux réellement faire ça côté client, tu peux essayer d'utiliser les commentaires conditionnels (que tu dois pouvoir trouver dans la FAQ). Le javascript étant pour moi la dernière des solutions à utiliser pour faire ce genre de chose
Modérateur
Salut, Smiley smile

Modifier une feuille de style, c'est optionnel... donc Javascript est parfaitement adapté à ce genre de chose. Si on se veut "puriste" (sic), rien ne sert de faire une quelconque requête au serveur, c'est bien du domaine de l'interface utilisateur.

A ce titre, on peut, par exemple, recourir à ce tuto.

Dans le cas où on souhaite rendre la chose compatible plus "accessible", la détection navigateur est vivement déconseillée; nous avons d'ailleurs un tuto à ce sujet, compatible tout navigateur sans pour autant détecter à qui on a à faire. Smiley cligne
pour les IE si j'ai bien compris ta requette tu peux utiliser un commentaire conditionnel (si je me rapel bien du nom)
pour les - IE7

<!--[if IE lt 7]>
<link rel="stylesheet" href="ie6.css" />
<![endif]-->


et pour IE 7 et +

<!--[if IE gte 7]>
<link rel="stylesheet" href="ie7.css" />
<![endif]-->


ce n'est pas du javascript mais bien du html !
aprés pour opera quelqu'un d'autre t'eclairera surement mieux que moi
koala64 a écrit :
Salut, Smiley smile

Modifier une feuille de style, c'est optionnel... donc Javascript est parfaitement adapté à ce genre de chose. Si on se veut "puriste" (sic), rien ne sert de faire une quelconque requête au serveur, c'est bien du domaine de l'interface utilisateur.

A ce titre, on peut, par exemple, recourir à ce tuto.

Dans le cas où on souhaite rendre la chose compatible plus "accessible", la détection navigateur est vivement déconseillée; nous avons d'ailleurs un tuto à ce sujet, compatible tout navigateur sans pour autant détecter à qui on a à faire. Smiley cligne


En fait je pense qu'il ne s'agit pas de "modifier" une feuille de style une fois l'interface chargée mais bien de donner une feuille de style différente pour chaque type de navigateur... et donc à ce titre il y a forcément un moment coté serveur ou on génère la partie "head" du document HTML.. j'aurais personnellement opté pour cette endroit pour plusieurs raisons (ca évite d'avoir recours au javascript alors qu'on peut faire autrement, ca évite d'envoyer au navigateur du script inutilement et de le faire travailler pour rien,...).

Ensuite dans le cas présent, il s'agit d'offrir aux différents navigateurs une feuille de style différente. Je ne pense pas que l'on ai d'autre choix que de détecter le navigateur du client Smiley confus que ce soit coté serveur ou coté client par du js ou autres commentaires conditionnels (qui ne sont d'ailleurs pas du HTML mais une bidouille à la Microsoft pour combler leurs manques de respect vis a vis des standards).
Modérateur
oui, oui Smiley cligne

J'ai lu un peu rapidement. Smiley langue Disons que dans le cas d'un réel styleswitcher, le JS, c'est chouette et bien adapté à la situation. Maintenant, vu la demande de cassis, ce qu'a proposé hakkou est très bien. Smiley smile On n'a pas affaire à un styleswitcher mais bien à une présentation différente suivant le navigateur.

Ce qu'il faut éviter, c'est avant tout la détection de navigateur parce que ça, c'est rarement solide. Lorsqu'on le fait, il vaut de toute façon mieux se reposer sur la détection de propriété/méthode plutôt que sur des particularités qui font partie de propriétés auxquelles tout le monde a accès (navigator.userAgent entre autres), un navigateur pouvant facilement falsifier son identité.

Les techniques pour s'assurer qu'on ait bien affaire à un navigateur plutôt qu'un autre sont d'ailleurs, et de ce fait, plus sûres en JS qu'en PHP.

Pour Opera, il n'y a pas réellement de manière de s'assurer qu'on ait bien affaire à ce navigateur en CSS. On peut, à l'heure actuelle, passer par les media queries mais pour peu qu'un autre navigateur l'implémente, tout tombe à l'eau. En JS, en revanche, on peut profiter de la propriété window.opera. Mine de rien, c'est un peu comme les commentaires conditionnels : on est sûr que seul le support concerné sera en mesure de comprendre cette instruction. C'est important, je pense. Certes, on ajoute un langage qui n'a pas à intervenir... à la base... mais c'est le seul qui permet d'être sûr de là où on est. Smiley cligne

a écrit :
commentaires conditionnels (qui ne sont d'ailleurs pas du HTML mais une bidouille à la Microsoft pour combler leurs manques de respect vis a vis des standards
Ca reste quand même du html... même s'il est vrai que ce n'est pas très conventionnel. Un langage regorge bien souvent de plus de possibilités que ces règles n'en laisse transparaître.
Hello,

Je vous remercie beaucoup pour toutes ses infos. Pour finir j'ai réussi avec mon script, j'avais juste oublié d'enlever un = à une des explorer et de déplacer une } donc ceci (si je prends que la partie IE):
//Detect IE5.5+
version=0
if (navigator.appVersion.indexOf("MSIE")!=-1){
	temp=navigator.appVersion.split("MSIE");
	version=parseFloat(temp[1]);


if (version[b]<[/b]7.0) {//NON IE browser will return 0
	document.write('<link href="/templates/madeyourweb/css/template_css_ie.css" rel="stylesheet" type="text/css" />');
}	else if(version[b]>=[/b]7.0){
		document.write('<link href="/templates/madeyourweb/css/template_css_ie7.css" rel="stylesheet" type="text/css" />');

}
[b]}[/b]


Mais j'ai bien lu vos messages et je vais voir côté serveur si je peux faire autrement car si un utilisateur n'a pas le javascript d'actif, c'est pas l'idéal ce script.

En tout cas, je vous remercie beaucoup pour toutes vos réponses et à tout bientôt
Cassis

P.S: qqn sait comment mettre un sujet règlé ou fermé ? Merci Smiley confused