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>functions.php
Pokud nemáte k dispozici Child theme, nevadí. Kód se dá upravit, aby se dal vložit kamkoli, kde se dá volat PHP – functions.php v child theme a podobně.
function add_fouc_script() {
echo '<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>
';
}
add_action('wp_head', 'add_fouc_script');
