[Résolu] Commentaires Conditionnels et lenteur de chargement...

Bonjour à tous...

Voilà mon soucis :

Quand je mets un commentaire conditionnel dans ma page, j'ai remarqué que, sur IE (quelque soit la version), ma page s'affiche quelques temps (du presque insignifiant jusqu'à 2 ou 3 secondes) sans les CSS, puis hop, les feuilles de style se chargent enfin et ma page s'affiche normalement. C'est d'autant plus embêtant que ça me le fait à chaque chargement de page, comme si les feuilles de style ne se mettaient pas en cache...

Je mets ça sur le dos des commentaires conditionnels car quand je les enlève je n'ai plus ce problème...

Avez-vous déjà rencontré ce genre de problème ?? Y-a-t-il une astuce ??

Voilà comment j'insère mon CC :

<style type="text/css">
@import url(styles.css) ;
</style>

<!--[if lte IE 6]>

	<style type="text/css">

		@import url(ie6-styles.css) ;

	</style>

<![endif]-->

Merci !!
Modifié par kristof (24 Jan 2007 - 15:24)

Salut.

J'utilise les commentaires conditionnels en permanence, mais je n'ai jamais eu ce problème

Essaie d'appeler la feuille de style avec "link" :

<link rel="stylesheet" type="text/css" media="screen" href="ie6-styles.css" />

Salut,

Ca ressemble au FOUC.

Bonjour kristof,

Ce phénomène s'appelle le FOUC (Flash of Unstyled Content) ... certains le décrivent comme un bug de IE d'autres (Laurent Denis ; il me semble) non ...

Ce bug (?) ne se produit que dans les documents html ne possédant pas de balise link ou de balise script dans "leurs arbres".

Bonne continuation.
Romain

Edit: grillé facile d'écrire plus vite avec un simple lien .
Modifié par yodaswii (24 Jan 2007 - 12:29)

yodaswii a écrit :
Edit: grillé facile d'écrire plus vite avec un simple lien .

Si d'autres l'expliquent mieux que moi, autant leur laisser la parole.

Cela faisait longtemps que le FOUC m'était sortis de l'esprit ...

Je viens à l'instant de lire plusieurs articles sur ce fameux FOUC ...
Bilan : les auteurs affirment que le FOUC est un bug (touchant IE mais aussi Safari dans ses versions récentes).

L'explication de Laurent Denis me semble bien être la raison de ce phénomène.

Cependant, l'article de Laurent Denis me laisse perplexe ...

2 solutions possibles :

Oubliez purement et simplement le FOUC qui n'est en fait qu'une fonction propre au navigateur et alors laissez cet effet disgracieux et dérangeant (ce que laisse transparêtre l'article de Laurent Denis) ...

ou

Utilisez au moins une balise link ou script (vers un fichier vide ? pas très élégant en effet) ... Substituez la balise style à link peut-être ?

ou peut être une autre solution ?

Romain
Modifié par yodaswii (24 Jan 2007 - 13:46)

Si l'on veut vraiment annuler cet effet, la meilleure solution est, je pense :

<script type="text/javascript"></script>

a écrit :
Julien Royer a écrit :
Si l'on veut vraiment annuler cet effet, la meilleure solution est, je pense :
<script type="text/javascript"></script>

C'est en effet, la solution que Dave Shea (créateur du CSSZenGarden) illustre dans son livre ...

A kristof de faire son choix ...

Salut,

+1

Je pense que c'est le moins dérangeant dans le sens où les commentaires conditionnels nécessitent parfois une syntaxe particulière.

Récemment, une personne souhaitait différencier des propriétés de style entre IE5.01 et IE5.5

Elle avait mis :

<!--[if IE 5.5000]>
	<link rel="stylesheet" type="text/css" media="screen, print" href="css/style_ie5.css" />
<![endif ]-->
<!--[if IE 5.0]>
	<link rel="stylesheet" type="text/css" media="screen, print" href="style_ie501.css" />
<![endif ]-->

... ce qui ne fonctionne pas lorsque les styles sont dans des feuilles de style externes mais qui marche bien lorsque les styles sont en ligne.

La solution pour conserver ces styles en externe était de remplacer les balises link (ou du moins celle pour IE5.01) par :

<!--[if IE 5.0]>
	<style type="text/css">
		@import url("...");
	</style>
<![endif ]-->

en précisant dans le css :

@media screen, print {
	/* les différents styles */
}

PS : Je dis ça de tête... J'espère ne pas me planter sur la syntaxe des commentaires conditionnels mais pour ce qui est du @import url("..."); j'en suis sûr.

Salut à tous,
Merci pour vos réponses !!

Effectivement ça ressemble bien à ce fameux FOUC... que je ne connaissais pas !!

Je vais voir ce que je peux faire pour corriger ça, voir un peu toutes vos astuces... remplacer peut-être mais @import par des balises link...

kristof a écrit :
remplacer peut-être mais @import par des balises link...

ah ?!

oui et bien finalement...

j'ai l'impression que c'est pas mieux, car quand je fais ça :

<link rel="stylesheet" href="styles.css" type="text/css" />
<!--[if lte IE 6]>

	<link rel="stylesheet" href="ie6-styles.css" type="text/css" />

<![endif]-->

<style type="text/css">
#menu a.photo{background-image: url(img/fleche_menu_off.png)}
</style>

j'ai l'impression que ça le fait toujours...

ça doit être, pour le coup, la balise <style> que j'ajoute au bout qui doit faire des siennes...

Si vous voulez voir en live il y a le lien dans ma signature...
Modifié par kristof (24 Jan 2007 - 15:14)

Et bien non...

En fait c'est bon ça ne le fait plus...

Merci à tous, à la prochaine

Sujet [résolu] ? Et un de plus

yodaswii a écrit :
Sujet [résolu] ? Et un de plus

Oui oui c'est fait je l'ai mis de suite le [Résolu]...

koala64 a écrit :
Je pense que c'est le moins dérangeant dans le sens où les commentaires conditionnels nécessitent parfois une syntaxe particulière.

Salut,

J'ai essayé avec IE 5.01 et IE 5.5 le code que tu as donné, ça fonctionne pourtant sans problème