Accueil > weblog
- Lire le billet précédent - Lire le billet suivant -
Par Laurent Denis, le 02 novembre 2004.
Si vous n'avez jamais entendu parler du FOUC, vous pouvez vous épargner la peine de lire ce qui suit et vous contenter de retenir que ce Flash of Unstyled Content
dans IE n'aurait jamais dû être érigé en bug et ne devrait surtout jamais faire l'objet de hacks dans le code HTML.
Si en revanche, vous avez déjà tripatouillé le contenu de votre head pour éviter cet effet de rendu, prenez ce qui suit en considération :
Ainsi nommé par BlueRobot, le FOUC est simplement la fugitive apparition du contenu brut d'une page HTML, non stylé dans Internet Explorer, avant que celui-ci n'en affiche la présentation CSS. Jugé disgracieux par certains auteurs, il est habituellement neutralisé de manière très simple en changeant l'ordre des éléments style, link ou script dans le document.
Parfois, faute de link ou de script disponibles, certains ajoutent à leur page un lien non fonctionnel (vers une feuille de style vide) ou un script vide. Cela me fait toujours sourire, car ce qui est vu comme un bug dans un navigateur... est en fait un comportement voulu dans un autre.
Oublions un peu IE. Savez-vous qu'une des particularités d'Opera est justement d'afficher systématiquement la page non stylée dès que le contenu de celle-ci commence à être disponible ? Ce mécanisme très simple contribue beaucoup à la réputation (justifiée) de vitesse d'Opera. Et il s'avère en effet très agréable face à des pages au rendu alourdi par de multiples scripts ou styles longs à traiter.
Naturellement, les astuces anti-FOUC n'ont aucun effet sur le comportement d'Opera, et ne sont en rien gênantes pour les utilisateurs de celui-ci. Elles sont juste un peu absurdes, comme beaucoup d'autres tentatives de contrôler le rendu d'une page au iota près 
Bon, je vais tâcher d'écrire quelque-chose sur un sujet un peu plus utile, maintenant...
Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.
Commentaires
Spread FireFox, le 02 novembre 2004
afficher une page pas stylé pour que ça aille plus vite, c'es bien un truc de navigateur foireux, ça.
utilise plutôt FireFox, qui est vraiment rapide, et qui supporte vraiment CSS : pas besoin de rendu foireux :P
www.getfirefox.com/
Moz, le 02 novembre 2004
@Spread Firefox> au lieu d'encourager à utiliser Firefox, tu en donnes une image ridicule, avec tes trolls.
@Laurent> Vire ses commentaires, non de non !
vchahun, le 02 novembre 2004
Si j'ai bien compris c'est ce qui se passe avec le menu à droite de ce joli site ?
Laurent Denis, le 02 novembre 2004
De quel site parles-tu ? BlueRobot ? Il propose un exemple de page provoquant ce FOUC dans son article.
En revanche, je traîne un vieux bug de rendu d'IE6 sur les premiers liens du menu en page d'accueil, que je n'ai jamais le temps de hacker)
(Blog & Blues n'est pas vraiment "joli", donc je suppose que ce n'est pas de celui-ci dont tu parles
Moz, le 02 novembre 2004
@Laurent> dans Opera, en page d'accueil, la colonne de droite s'affiche en effet après celle de gauche. Le décalage est net en bas débit.
Gloom, le 02 novembre 2004
Dès que j'ai entendu parler de ce FOUC, je me suis dis : "Et alors ? Ca un bug ? Et il faudrait un hack pour ça ? Tsss... Lacher-prise qu'on vous à dis".
Je suis contant de lire des arguments qui vont dans le sens de cette courte réflexion qui m'a fait oublier ce FOUC aussi vite que j'en ai entendu parlé.
Spread FireFox, Opera n'est pas foireux, personnellement, je préfère FireFox, mais, chacun à ces préférances, ce n'est pas une raison pour dénigrer un produit de qualité sous prétexte de promouvoir son navigateur préférer (d'ailleurs, c'est l'inverse d'une promotion que de dire : "TonTruc, c'est de la merde, MonTruc, ça c'est bon au moins", même quand c'est vrai (cf: MSIE).
Quand au fait d'afficher la page brut de style avant de l'afficher, ce n'est pas un truc de navigateur foireux, c'est une idée qui à ces qualitées et ces inconvéniants. Faire un navigateur, c'est faire beaucoup de choix, le choix d'intégrer tel ou tel idée, après, chaque utilisateur mesure le pour et le contre de ces choix et préfère tel ou tel navigateur.
David Latapie, le 02 novembre 2004
C'est pour ça qu'Opera clignote constamment chez moi. C'est très désagréable.
Je comprend l'intérêt de la manœuvre, mais je me heurte tous les jours à sa limite : quand on a une très bonne connexion (selon speedtest.macbidouille.com, je suis à plus de 954kbps, soit du T1), la page est non-stylé pendant un cinquième de seconde seulement. Résultat : une très désagréable impression de clignotement. Est-il possible de forcer Opera à styler entièrement avant d'afficher?
Laurent Denis, le 02 novembre 2004
@David> Quelle version d'Opera utilises-tu ? Ce problème était connu pour les versions antérieures à la 7.2, pour lesquelles:

"Opera7 does not reflow while waiting for linked CSS, but if the style sheet does not appear within .5 seconds, it will go ahead anyway. This delay proved to be too small, so we bumped it up to 2 seconds. When not waiting for CSS, it will attempt to reflow no more than five times per second. However, if you mouse over the document it has to reflow immediately, so if you move your mouse around in the document window while downloading, it's going to have to reflow as many times as you move your mouse (could be 50+ times per second)..."
Il a été annoncé comme corrigé depuis la version 7.2, mais n'ayant jamais eu accès au haut-débit, je n'ai jamais vérifié
David Latapie, le 06 novembre 2004
Laurent > 7.54 MacOS X (mais les ports MacOS X tant de Gecko que d'Opera sont les pires que je connaisse).
Laurent Denis, le 06 novembre 2004
Il faut reconnaître que les implémentations Mac d'Opera... n'ont jamais été brillantes.
Je trouve significatif qu'il n'y ait pas actuellement de preview Mac d'Opera 7.60, alors que les preview 2 linux et windows évoluent en parralèle : Opera a été trop ambitieux, AMHA, en tentant de porter Opera 7.x Mac au niveau de ses autres implémentations. Maintenant, j'ignore totalement pourquoi cela pose apparemment des problèmes spécifiques...
Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.