CODEWITHSUNDEEP
twitterfouc
Marcel
Marcel

Reputation: 28087

What is data-fouc-class-names="swift-loading"?

I noticed the following near the top of Twitter's source code:

data-fouc-class-names="swift-loading"

A quick Google search turns up a few other websites that use this too but I couldn't find anything that describes what it's for. Making it into the markup of such a popular website (several times to boot due to conditional HTML classes being utilised) must make it useful for something.

I am familiar with the concept of "flash of unstyled content" aka "FOUC" but I'm curious as to what this code relates to specifically.

Upvotes: 4

Views: 1558

Answers (2)

Bob Vale
Bob Vale

Reputation: 18474

If you look at line 38-40 you get

<script id="swift_loading_indicator">
   document.documentElement.className=document.documentElement.className+" "+document.documentElement.getAttribute("data-fouc-class-names");
</script>

Which changes the document element class to include the value set in this attribute.

This allows the css to hide the "Flash Of Unstyled Content" as the page and javascripts load.

Later the scripts remove this class to allow the fully loaded page to load.

It also appears to be used in the ajax page loading code to allow content to load hidden and only displayed once all content is load.

Attributes beginning with the name data- are part of the html 5 specification and represent private data. They are there to allow webpages to store information within a webpage that without breaking validation via the HTML5 Validators

Upvotes: 2

Kuzgun
Kuzgun

Reputation: 4737

I noticed it is added only for IE8 in some sites. I believe it is added to define fouc class name for IE.

Fouc (flash of unstyled content) is simply a display quirk, some kind of page flickering in Win IE and it happens when you import a css style.

So they might add that class to possible fouc objects and use that class name to affect only those objects within a solution.

You can test a fouc here: http://www.bluerobot.com/web/css/fouc.asp/

You can find more here How to prevent Flash of Unstyled Content on your websites

Upvotes: 0

Related Questions