Webové zákusky

Fenomén FOUC – neformátovaný obsah, než se načte celá stránka

10. 9. 2022

Občas se stává, že narazíme na fenomén zvaný „FOUC“ – Flash Of Unstyled Content (záblesk neformátovaného obsahu). Např. pokud vytvářím vlastní hlavičku, která obsahuje dva oddělené moduly menu pro mobil a desktop a oba jsou formátované odděleně (z nichž jeden je vždy skrytý podle velikosti obrazovky). Pak se někdy může stát, že při načítání problesknou na webu obě menu, která nejsou formátovaná, a následně se načte CSS, které zobrazí do správné a naformátuje ho. Může se to stát při jakékoli jiné situaci.

Problém totiž tkví v tom, že prohlížeče mají svou základní sadu CSS, kterou na HTML elementy aplikují (pokud si uděláte stránku s HTML elementy bez jakéhokoli formátování, zjistíte, jaká sada to je. Např. úrovně nadpisu mají předem danou velikost fontů, tabulky určité zobrazení, font je předem daný, odsazení… atd). A teprve po načtení CSS pro konkrétní web se aplikují ta správná. Do toho ještě připočtěte velikost DOMu, který je na webech stále složitější, CSS oddělené do více souborů načítané kdekoli na stránce, různé javascripty a AJAXová volání… FOUC je na světě. Čím déle a čím více zdrojů musíte načíst, než „složíte“ web dohromady a správně, tím větší je pravděpodobnost, že na FOUC narazíte.

Možnost, jak to řešit, je např. ta, že nebudete používat moduly (a jiné kousky html), které jsou skryté pomocí CSS (tedy v DOMu fyzicky jsou). Místo více modulů tedy použijete jen jeden, který naformátujete pro všechna zařízení. Taková možnost je (někdy) hodně pracná a v případě, že máte jinou strukturu menu pro desktop i mobil, někdy nemožná nebo hodně složitá.

Druhá možnost je nechat moduly odděleně, naformátovat je podle potřeby a přidat do hlavičky kód, který nejprve celý html element schová (takže veškerý obsah webu) a teprve když je DOM celý načtený (tedy včetně CSS) ho zase odkryje (kód funguje pro libovolné typy stránek a technologie):

<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>

Zdroje

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...

Polylang – vlastní ikony

Pokud používáte Polylang na překlady a chcete si pro jazyky použít vlastní ikonky místo těch originálních, stačí k tomu několik kroků.