|
| |
| PRATIQUE CLIENTS WEB |
 |
|
|
| Prévenir le scintillement des CSS dans IE5 |
| |
| "Comment éviter qu'IE5 affiche ma page HTML nue avant d'y appliquer la feuille de styles ?"
(04/10/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Connu depuis de nombreuses années sous l'acronyme FOUC (pour Flash of Unstyled Content, scintillement de contenu non stylisé), le problème s'applique à certaines circonstances et à certains navigateurs.
Tout d'abord, il a été mis en lumière sous Internet Explorer 5. Ce navigateur, dans le cas où une page HTML importe une feuille CSS par le biais d'une règle @import - ce qui est fréquent -, n'attend pas que la feuille de styles soit chargée pour afficher le contenu HTML déjà chargé. Il en résulte un court instant où le HTML est affiché, nu, et où les styles n'ont pas encore été appliqués. Dans le cas de mises en page compliquées, le passage d'un état à l'autre peut-être stupéfiant au visiteur non habitué.
Des parades ont depuis été trouvées, la plus notable étant celle où l'on fait précéder, dans le <head>, l'élément <style> contenant la règle @import par un élément <link> ou <script>, même vide. La solution naturelle est par exemple d'indiquer une feuille alternative pour un média autre que screen, par exemple print.
<html> <head> <title>Titre</title> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> <style type="text/css" media="screen"> @import "style.css"; </style> </head>
On pourra aussi, simplement, utiliser une balise <script> vide à la place de <link> :
<script type="text/javascript"> </script>
Malheureusement, IE5 n'est pas le seul navigateur à souffrir du FOUC : Safari, même dans ses versions récentes, le subit, du fait de la conception même de son moteur de rendu, qui charge les fichiers HTML et CSS en parallèle plutôt qu'en série comme IE5 ou Firefox. Les parades listées ci-dessus ne sont alors pas efficaces, car le FOUC est déclenché lorsqu'un script de la page tente d'accéder à une valeur d'élément qui n'a pas encore été remplie, car spécifiée par la feuille CSS.
La gêne devient problème réel avec la recrudescence de scripts du type Google AdSense, dont le code n'est pas encore idéal. Les développeurs qui maîtrisent les scripts de leurs pages peuvent se débarrasser du FOUC en faisant en sorte que leurs scripts n'accèdent pas aux propriétés d'un élément tandis que la page se charge.
|
|
|
|
