Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Découvrez des moyens d’empêcher le Flash of Unstyled Content (FOUC) d’apparaître sur vos sites Web, ou au moins de réduire la probabilité que vos sites Web soient affectés.

Je suis sûr que vous avez vu des pages Web se charger avec du contenu non stylisé, puis cela peut prendre quelques secondes (ou minutes) pour voir à quoi vous voulez que la page ressemble ou non. Dans la conception Web, cette aberration est connue sous le nom de Flash involontaire de contenu non stylisé (FOUC). Graphique A. Affiche un exemple d’anomalie FOUC sur la page d’accueil de CNN US Edition où le CSS n’a pas pu se charger.

Graphique A.

FOUC_FigA_101713.gif
Voir une vue agrandie de la figure A.

Dans cet article, je fournirai des informations générales sur FOUC, puis je décrirai les moyens d’empêcher FOUC d’apparaître sur vos sites Web, ou du moins de réduire la probabilité que vos sites Web soient affectés, quel que soit le navigateur ou l’appareil.

Une histoire courte

Quand FOUC a été documenté pour la première fois dans l’article de 2001 Flash de contenu sans stylele problème ne semble se produire que dans Internet Explorer. Ensuite, le bogue de 2006 a trouvé son chemin dans Safari et a été décrit dans l’article Le problème FOUC. Les deux articles ont révélé la nature des anomalies associées au rendu correct du CSS dans ces deux navigateurs et leur incapacité à rendre le contenu conçu de manière cohérente. Des preuves récentes montrent que FOUC se produit également avec certaines implémentations JavaScript et jQuery où les scripts sont utilisés pour styliser les images, généralement pour le contenu qui prend plus de temps ou reste bloqué après le chargement de la page.

Techniques pour minimiser le FOUC

La première technique est présentée dans un tutoriel FOUC de Brad Baxter. Il décrit une méthode simple pour minimiser FOUC en masquant tout ou partie de la page Web jusqu’à ce que tous les styles et JavaScript soient terminés, en utilisant un nom de classe « js » comme sélecteur qui place tout le contenu dans un conteneur avec l’ID = « fouc » cache. . L’élément « fouc » est masqué à l’aide d’une fonction JavaScript « getElementById », avec laquelle la valeur d’affichage est définie sur « Block ».

Les exemples de la courte présentation comprennent

Recent Posts