Discussion :

[yaka2]

Bonjour,
Est-ce que quelqu'un connait un code simple qui fonctionne pour afficher une feuille de style différente suivant le navigateur ?

(je l'avais ce matin mais comme je dois aussi détecter la résolution, j'ai fais trente mille tests et là je ne retrouve plus rien, je ne sais plus par où attaquer...)

Merci beaucoup

[Matthieu2000]

je ne sais plus par où attaquer...

navigator.userAgent
document.write

[yaka2]

oui, si je viens là c'est parce que des tutos j'en ai lu des dizaines, ça fait trois heures que je fais des recherches, j'avais le bon et maintenant j'ai ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
if (document.all) 
	document.write("<link rel="stylesheet" href="style1024.css" type="text/css">");
else if (document.layers)
	document.write("<link rel="stylesheet" href="styletous.css" type="text/css">");
else
	document.write("html { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
border: none 
} 
 
body { 
height:100%; 
width: 100%;
margin: 0; 
padding: 0; 
border: none 
}
");
</script>

et ça marche pas du tout ...

[Matthieu2000]

évite les sauts de ligne dans une chaine de caractère!

[yaka2]

En mettant ceci:

Code :

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

1
2
3
4
5
6
7
8
<script>
if (document.all) 
	document.write("<link rel="stylesheet" href="style1024.css" type="text/css">");
else if (document.layers)
	document.write("<link rel="stylesheet" href="styletous.css" type="text/css">");
else
	document.write("<link rel="stylesheet" href="styletous.css" type="text/css">");
</script>

ça donne rien, il prend pas en charge la feuille de style...

[Matthieu2000]

ajoute un \" pour les " qui sont à l'intérieur de la chaine (ou remplace les par des ')

[yaka2]

OUIIIII

Merci

[yaka2]

Alors, pour compliquer un peu... si j'ajoute les résolution d'écran de cette façon:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
var largeur; 
var hauteur; 
largeur = screen.width; 
hauteur = screen.height;
if ((document.all) && (hauteur <= 600))
	document.write("<link rel='stylesheet' href='style600.css' type='text/css'>");
if ((document.all) && (hauteur >= 768))
	document.write("<link rel='stylesheet' href='style768.css' type='text/css'>");
if ((document.all) && (hauteur >= 1024))
	document.write("<link rel='stylesheet' href='style1024.css' type='text/css'>");
	if ((document.all) && (hauteur >= 1200))
	document.write("<link rel='stylesheet' href='style1200.css' type='text/css'>");
else if (document.layers)
	document.write("<link rel='stylesheet' href='styletous.css' type='text/css'>");
else
	document.write("<link rel='stylesheet' href='styletous.css' type='text/css'>");
</script>

apparemment ça marche pour Mozilla mais pas pour IE.

J'ai peut petre encore un ; qui manque ou une { ou un autre truc du genre...

[denisC]

Il manque pas mal de else dans ton code....

[yaka2]

Effectivement... (je vois plus rien dans le code à force)

mais :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
var largeur; 
var hauteur; 
largeur = screen.width; 
hauteur = screen.height;
if ((document.all) && (hauteur >= 600))
	document.write("<link rel='stylesheet' href='style600.css' type='text/css'>");
else if ((document.all) && (hauteur >= 768))
	document.write("<link rel='stylesheet' href='style768.css' type='text/css'>");
else if ((document.all) && (hauteur >= 1024))
	document.write("<link rel='stylesheet' href='style1024.css' type='text/css'>");
else if ((document.all) && (hauteur >= 1200))
	document.write("<link rel='stylesheet' href='style1200.css' type='text/css'>");
else if (document.layers)
	document.write("<link rel='stylesheet' href='styletous.css' type='text/css'>");
else
	document.write("<link rel='stylesheet' href='styletous.css' type='text/css'>");
</script>

n'est pas pris en charge pour IE...

[denisC]

le sens de tes tests sur la hauteur ne parait pas être du plus logique... Je dirais que c'était mieux avant.

Si tu es en 1024, tu tombes dans le premier cas, et tu as la feuille de style des 600. C'est probablement pas le but

[yaka2]

OUIIII

Apparemment, en mettant ceci ça marche:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
var largeur; 
var hauteur; 
largeur = screen.width; 
hauteur = screen.height;
if ((document.all) && (hauteur == 600))
	document.write("<link rel='stylesheet' href='style600.css' type='text/css'>");
else if ((document.all) && (hauteur == 768))
	document.write("<link rel='stylesheet' href='style768.css' type='text/css'>");
else if ((document.all) && (hauteur == 1024))
	document.write("<link rel='stylesheet' href='style1024.css' type='text/css'>");
else if ((document.all) && (hauteur == 1200))
	document.write("<link rel='stylesheet' href='style1200.css' type='text/css'>");
else if (document.layers)
	document.write("<link rel='stylesheet' href='styletous.css' type='text/css'>");
else
	document.write("<link rel='stylesheet' href='styletous.css' type='text/css'>");
</script>

il faut encore que je teste sur un écran à 1200 de hauteur, mais à priori pour au dessous ça fonctionne.

Merci beaucoup, je vais enfin avoir un site compatible IE et Mozilla et qui s'étire convenablement en hauteur sous IE.

Bonne fin d'après-midi à tous.