FOUC is an unwelcome guest to your soirée of intertube funtimes. He comes in and distracts users eyes with things they shouldn’t be seeing, and then departs ever so quickly. We don’t like him.
So you’ve likely seen code like this:
No good. Scripts in the body block rendering so we can do better:
Here we’ll be adding the class to the HTML element instead of the body, which we have access while we’re in the HEAD. (Naturally CSS works just fine with a html.js selector, though this doesn’t validate in HTML4)
But here’s my big hang-up:
1 2 3
But I make it small as it’s one of the only scripts that should run in your head. Because everyone has their scripts near their </body> tag, right?
We use the same approach in Modernizr, because we want the classes to be all set on the HTML element right when the BODY content starts loading in. Fight the FOUC!