Charger feuille de style en fonction résolution

**Aspic** · 07/07/2007, 22h20

Bonjour,

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

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
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

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 :

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

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

Merci de votre aide

**Loceka** · 08/07/2007, 15h28

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 html :

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

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 javascript :

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
// 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');
}

**Aspic** · 08/07/2007, 15h49

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

**Loceka** · 08/07/2007, 16h18

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 html :

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

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 :

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

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.

**Aspic** · 08/07/2007, 18h41

Envoyé par Loceka

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

La c'est vraiment plus court

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...

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 !

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.

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

**Aspic** · 08/07/2007, 19h36

Je n'arrive pas à faire marcher ton code chez moi

Je crois que le alternate plante !

Voici mon code :

Code :

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

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 :

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

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

Charger feuille de style en fonction résolution

JavaScript

Vue hybride

Discussions similaires

Partager

Partager