#fouc — Public Fediverse posts

Finding it difficult to avoid FOUC-ing up (Flash Of Unstyled Content) when switching out or adding in a linked stylesheet to the head via JS.

I thought normal JS scripts in the head would block render - and I suppose they do but then there's still a split second or more of no stylesheet while the switch is taking place and it rerenders.

Is there a way to make it less flashy without resorting to hacks like making html/body invisible until the last line of CSS is parsed?

#CSS #JavaScript #FOUC

Seeing a few folks say "FOUC" when they mean "layout shift".

FOUC: When content paints before its CSS has loaded.

It results in a layout shift, but not all layout shifts are because of FOUC (in fact, FOUC is pretty rare these days).

#webDev #javaScript #styles #css #stylesheets #fouc #lcp #webvitals #webDevelopment

This is an incredibly useful tool for reducing the #FOUC (flash of unstyled content) when using web #fonts loaded asynchronously: https://meowni.ca/font-style-matcher/

It's funny how #webdevelopment is so concerned with #FOUC and #FCP, while native apps have loading splash pages and silly animations everytime you load them.