28173 sujets

CSS et mise en forme, CSS3

Hello,

J'ai remarqué un problème que j'ai avec les feuilles de style que je donne comme "alternative stylesheet" dans mes pages web. Le navigateur recalcule mal le contenu de la page quand la fonction javascript active la feuille de style. Je suis exactement ce qui est donné dans les différents liens (version javascript) de cette page http://forum.alsacreations.com/faq/#item12

Voici le code qui est dans mon header

<link rel="stylesheet" type="text/css" href="global.css" media="screen,print"/>
<link rel="alternate stylesheet"  title="small" type="text/css" href="small.css" media="screen"/>
<link rel="alternate stylesheet"  title="large" type="text/css" href="large.css" media="screen"/>
<link rel="alternate stylesheet"  title="larger" type="text/css" href="larger.css" media="screen"/>
<!-- ...code javascript... -->


La feuille de style global.css contient tout le look du site avec la taille de caractère par defaut. Les autres CSS surchargent simplement les styles de caractères pour changer la taille.

Mon idée du problème vient du fait que le code javascript qui est exécuté juste après les CSS va demander au navigateur de télécharger une CSS. Mais le temps que la CSS soit téléchargée, le navigateur a déjà commencé à faire le rendu de la page et il n'applique la nouvelle CSS qu'à la fin, sans recalculer correctement tout les blocs/espaces.

Est ce que quelqu'un a déjà remarqué ça? Si oui ... y a une solution en javascript ou pas? Smiley ohwell

La seule méthode que j'ai trouvé pour le moment est de rajouter la bonne CSS dans la page directement (sans passer par "alternate stylesheet") pour que le navigateur fasse un affichage correct Smiley decu donc rien en JS...

upload/4928-sample02a.gif au lieu de upload/4928-sample02b.gif

ou ce cas quand on clique sur le lien du menu, le texte se place correctement
upload/4928-sample01a.gif upload/4928-sample01b.gif
Modifié par doykati (24 Oct 2006 - 09:59)
Apparemment mieux vaut utiliser la fonction document.write()

Dans le code JS il faut donc remplacer:

if (...) a.disabled = false;

par

if (...) document.write('<link rel="stylesheet" type="text/css" href="'+a.getAttribute("href")+'" media="screen,print"/>');