Appliquer une feuille de style conditionnelle

Bonjour, en fonction de la taille de la fenêtre du nav, j'utilise le CSS approprié. Voici mon code :

<script type="text/javascript">
	var css = document.createElement('link');
	css.rel = 'stylesheet';
	css.type = 'text/css';
	if(window.innerWidth < 1024){
		css.href='/scripts/kwicks_mini.js';
		alert('mini');
	}
	else{
		css.href='/scripts/kwicks.js';
		alert('normal');
	}
	document.head.appendChild(css);
</script>
<noscript><link rel="stylesheet" type="text/css" href="/style/kwicks.css"/></noscript>

Ça ne fonctionne pas : dans les 2 cas (mini et normal), aucune feuille de style n'est utilisée.

Comment résoudre mon problème ?

Merci
Modifié par Galdon (12 Jun 2008 - 11:48)

Probablement parce que l'insertion de l'élément link se fait après que le navigateur a construit la version initiale du DOM et chargé en mémoire les feuilles de style.

Je crois que tu ferais mieux de charger au démarrage de ta page tes feuilles de style directement dans le code HTML, en les désactivant par défaut (attribut disabled="true"), puis en les activant au choix par JavaScript (avec la propriété disabled de l'objet-feuille de style).

N'oublie pas de prévoir une feuille de style par défaut qui donne un affichage potable quand le javascript est activé (et que tu ne peux donc spécifier une feuille ou une autre...).
Modifié par Gilles (12 Jun 2008 - 13:03)

Merci pour la réponse, j'ai essayé la propriété disabled :

<link rel="stylesheet" type="text/css" href="/style/general.css"/>
<link rel="stylesheet" type="text/css" href="/style/content.css"/>
<link rel="stylesheet" type="text/css" disabled="true" href="/style/kwicks.css"/>
<link rel="stylesheet" type="text/css" disabled="true" href="/style/kwicks_mini.css"/>

<script type="text/javascript">
	if(window.innerWidth > 1024){
		document.styleSheets[2].disabled = false;
		alert('grande');
	}
	else{
		document.styleSheets[3].disabled = false;
		alert('mini');
	}
</script>

Mais ça ne marche pas, firefox charge la dernière feuille de style (kwicks_mini) alors qu'il ne devrais rien charger du tout. De plus, dreamweaver indique disabled="disabled" plutôt que disabled=true ou false.

Galdon a écrit :
De plus, dreamweaver indique disabled="disabled" plutôt que disabled=true ou false.

Suite à quoi, tu as:

1. Consulté la spécification HTML 4.01;
2. Testé avec disabled="disabled" plutôt que disabled="true".

Et donc maintenant tu peux nous dire ce qu'il en est, n'est-ce pas?

(Message caché: un peu d'autonomie ne fait pas de mal. )


D'ailleurs, juste la consultation de la spécification nous apprend que l'attribut disabled ne peut pas s'utiliser avec les éléments LINK et STYLE. Gilles, embrouillage de neurones ou technique secrète Shaolin?

disabled="true" = disabled="disabled" : marche sous IE6 mais pas sous Firefox. Et ben, pour une fois que quelque chose marche sous IE parce qu'il ne respecte pas les spécifications...

Qu'est ce que je peux faire d'autre (sachant qu'il vaut mieux éviter de modifier une par une les propriétés CSS avec javascript puisque les 2 feuilles divergent sur pas mal de points) ?

Florent V. a écrit :

(...)

D'ailleurs, juste la consultation de la spécification nous apprend que l'attribut disabled ne peut pas s'utiliser avec les éléments LINK et STYLE. Gilles, embrouillage de neurones ou technique secrète Shaolin?

Euuuuhh... Embrouillage de neurones suite à la digestion d'une compote périmée de quelques jours, ça va comme réponse ?

/me se fait tout petit sur ce coup-là. Je me suis emmêlé les pinceaux entre le javascript et le HTML. 'Faut que je révise!

Cela dit, j'ai encore une solution de secours. Tu peux te contenter de changer la propriété href de ta feuille de style en javascript...

J'ai même une autre solution: chercher "style switcher" sur le forum

C'est bon j'ai trouvé, j'ai placé mon morceau de code javascript un peu plus bas (juste avant la fermeture </head>) + quelques modifs.

Galdon a écrit :
Qu'est ce que je peux faire d'autre (sachant qu'il vaut mieux éviter de modifier une par une les propriétés CSS avec javascript puisque les 2 feuilles divergent sur pas mal de points) ?

Tester en JS la largeur du conteneur et s'il est plus petit qu'une valeur donnée, appliquer la classe "narrow" à l'élément HTML. Et dans la feuille de styles, on pourra avoir:

#global {...}
.narrow #global {...}

Si c'est juste pour quelques adaptations du design, ça peut marcher très bien comme ça.
Dernièrement pour une intégration j'ai fait ceci (c'est pas très propre, mais ça marchait pas mal):

// Gestion de la largeur en 800x600
if(document.documentElement.clientWidth) {
	var test = document.documentElement.clientWidth;
	if (test < 910) {
		document.documentElement.className += ' is800';
	}
}

Modifié par Florent V. (12 Jun 2008 - 21:12)

Malheureusement si tu veux récupérer la largeur d'un document de manière fiable sous tout les navigateurs c'est un peu plus compliqué, voici une des méthodes (permis d'autre facilement trouvable sur le web mais qui en générale ignore ie5+, safari et opéra) :

/* browser detection by Mootools*/
window.xpath = !!(document.evaluate);
if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? 'ie7' : 'ie6'] = true;
else if (document.childNodes && !document.all && !navigator.taintEnabled) window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true;

function windowWidth(){
  var width = (window.webkit419)? window.innerWidth : (window.opera)? document.body.clientWidth : documentCompat('clientWidth');
  return width;

};

function documentCompat(name){
   return document.documentElement[[name]] || document.body[[name]];
};

Modifié par matmat (12 Jun 2008 - 21:38)

Galdon>Préfères passer par les évènements :

var ma_fonction=function(){
    ...
}

if(window.addEventListener) window.addEventListener('load', ma_fonction, false); //navigateur DOM
else window.attachEvent('onload', ma_fonction); //navigateur IE

Ca te permet de garder le code JS dans l'en-tête de la page et de ne pas l'éparpiller un peu partout.