Le
FOUC, ainsi appelé par
Bluerobot signifie
Flash of Unstyled Content. En français, ça donne «
instant de contenu non stylé ».
C'est très bien tout ça, et ça fait quoi ?
En fait, si l'on lie une feuille de style via
@import, Internet Explorer affichera, durant le chargement, la page HTML, sans les styles CSS. Il y a en fait un léger décalage de temps. L'application de la feuille CSS se fait dans un laps de temps très court après le chargement de la page HTML, ce qui a pour résultat de laisser entrevoir une page non stylée.
Apparemment, ce n'est pas un comportement voulu. Nous pouvons donc parler de bug
Ce
FOUC est un phénomène assez paradoxal, car pour IE, il est vu comme un bug, alors que pour Opera, c'est une
fonctionnalité ; fonctionnalité qui permet un affichage plus rapide des pages.
Évidemment, il existe un moyen pour empêcher le
FOUC sous IE. Mais, pourquoi s'évertuer à éviter ce qui peut être une fonctionnalité ?
Bon, je vous donne quand même la solution, si vous voulez vous amuser
Vous devez, soit appeler votre feuille de style via la balise
link, comme cela se fait généralement, soit insérer, dans votre Head, une balise de script Javascript vide, comme ceci :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript"> </script>
<title>FOUC</title>
<style type="text/css">
@import "feuille.css";
</style>
</head>
<body>
</body>
</html>
|
Bon, ce n'est pas ce genre de truc qui va empêcher votre site d'être affiché, mais dans mon optique de faire un tutorial sur les différences entre IE et les autres navigateurs, je me devais de vous en parler
