Charger feuille de style en fonction résolution

Version imprimable

Bonjour,

J'ai crée un petit script qui charge une feuille de style (css) en fonction de la résolution du visiteur :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <script type="text/javascript"> function resolution() { var headID = document.getElementsByTagName("head")[0]; var cssNode = document.createElement('link'); if (screen.width>=1024) { cssNode.type = 'text/css'; cssNode.rel = 'stylesheet'; cssNode.href = 'style1024.css'; cssNode.media = 'screen'; headID.appendChild(cssNode); } else { cssNode.type = 'text/css'; cssNode.rel = 'stylesheet'; cssNode.href = 'style800.css'; cssNode.media = 'screen'; headID.appendChild(cssNode); } } </script>
Ca marche très bien :mouarf: mais je voudrais savoir s'il n'y a pas une facon plus courte car je trouve cela un pue long...

Pour importer normalement une feuille de style en html on fait :

Code:

<LINK rel="stylesheet" type="text/css" href="style.css">

Merci de votre aide

Hello

Pour ce faire tu dois déclarer tes feuilles de style avec alternate.
Le code est un peu porc mais je le mets tel quel :

Code:

1
2
3
4
<head>
<link rel="stylesheet" type="text/css" title="normal" href="normal.css">
<link rel="alternate stylesheet" type="text/css" title="largeScreen" href="large.css">
</head>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// script trouvé sur : http://www.alistapart.com/articles/alternate/
function setActiveStyleSheet(title) {
	var i, a, main;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
			a.disabled =(a.getAttribute("title") == title)?false:true;
		}
	}
}
 
function resolution(def, alt) {
	if (screen.width>=1024)
		setActiveStyleSheet('largeScreen');
	else
		setActiveStyleSheet('normal');
}

08/07/2007, 15h49
Aspic

Merci pour ta solution mais elle est aussi longue que la mienne voire meme plus !

Moi je cherche un code assez court car je suis chiant :mouarf:
08/07/2007, 16h18
Loceka
Je pense que tu ne pourras pas faire plus court...

Comme je l'ai dit j'ai posté ma solution telle quelle (parce que c'est comme ça que je l'avais écrite la première fois que je m'en suis servi), mais tu peux très bien la simplifié, étant donné que le "else" est inutile (le navigateur ne tient pas compte de la feuille en alternate normalement).

Le code remodelé donne :
Code:

1 2 3 4 <head> <link rel="stylesheet" type="text/css" id="normal" href="normal.css"> <link rel="alternate stylesheet" type="text/css" id="largeScreen" href="large.css"> </head>
Code:

1 2 3 4 5 6 7 // solution "réduite" : function resolution() { if (screen.width>=1024) { document.getElementById("normal").disabled = true; document.getElementById("largeScreen").disabled = false; } }
La fonction tient en 3 lignes, je vois pas ce que tu veux de plus !

L'avantage par rapport à la tienne est quand même que ça ne crée pas d'élément html, donc ça charge de toute façon une feuille de style même si le JS est désactivé (même si elle n'est pas très bien adaptée à la taille de l'écran).

Enfin normalement tu ne devrais pas user d'artifices comme ça pour t'adapter à la taille de l'écran parce que ça ne veut strictement rien dire. On peut très bien avoir un 24" et ouvrir son navigateur dans une très petite fenêtre... Et puis bien sûr ça dépend de la résolution, du fait que l'écran soit 16/10 ou 4/3, etc.

Donc essaye de faire un site avec des mesures "relatives" plutôt que de changer de feuille de style en fonction de la taille/résolution/nb de pixels morts/etc. :P
08/07/2007, 18h41
Aspic

Citation:

Envoyé par Loceka

La fonction tient en 3 lignes, je vois pas ce que tu veux de plus !

La c'est vraiment plus court 8-)

Citation:

Envoyé par Loceka

L'avantage par rapport à la tienne est quand même que ça ne crée pas d'élément html, donc ça charge de toute façon une feuille de style même si le JS est désactivé (même si elle n'est pas très bien adaptée à la taille de l'écran).

Exact c'etait d'ailleur un de mes soucis...

Citation:

Envoyé par Loceka

Enfin normalement tu ne devrais pas user d'artifices comme ça pour t'adapter à la taille de l'écran parce que ça ne veut strictement rien dire. On peut très bien avoir un 24" et ouvrir son navigateur dans une très petite fenêtre... Et puis bien sûr ça dépend de la résolution, du fait que l'écran soit 16/10 ou 4/3, etc.

Je suis tout à fait d'accord avec toi mais je suis trop newbie dans le domaine pour créer un site avec un positionnement relatif. J'ai donc opté pour un site à taille fixe et par defaut je mettrais la feuille de style prévue pour une résolution de 1024x768 pixels. De toute maniere ca va rien changer, juste une histoire de scrollbar horizontale qui risque d'apparaitre et pour la navigation c'est vraiment pas le top !

Citation:

Envoyé par Loceka

Donc essaye de faire un site avec des mesures "relatives" plutôt que de changer de feuille de style en fonction de la taille/résolution/nb de pixels morts/etc. :P

J'aurais aimé mais je n'ai pas encore les capacités mais je compte bien m'y mettre un jour.

Oups pas encore resolu

Je n'arrive pas à faire marcher ton code chez moi :? Je crois que le alternate plante !

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> function resolution() { if (screen.width<1024) { alert("ddd"); document.getElementById("largeScreen").disabled = true; document.getElementById("normal").disabled = false; } } </script>
Code:

1 2 <link rel="alternate stylesheet" media="screen" type="text/css" id="normal" href="style800.css"> <link rel="stylesheet" media="screen" type="text/css" id="largeScreen" href="style1024.css">
Dans le cas où la résolution est supérieure ou egale à 1024 ca marche sans probleme il charge le bon css mais dans le cas contraire, il ne charge aucun des deux styles ! ==> ma page est quasi blanche car il n'y a aucun style chargé. Si j'enlève le "alternate" ca marche mais la scrollbar horizontale est présente alors qu'elle ne devrait pas...

Merci