CODEWITHSUNDEEP
javascriptcssdomfoucrender-blocking
BeeOnRope
BeeOnRope

Reputation: 64895

Avoiding flash of unstyled content for javascript-injected css in <head>

I have the following JavaScript in the <head> of a simple static page, which specifies either a.css or b.css as the stylesheet to use depending on the result of some additional JavaScript (useA(), not shown here).

<head>
   <script>
        var ss = document.createElement("link");
        ss.rel = "stylesheet";
        ss.href = (useA() ? "a.css" : "b.css");
        document.head.appendChild(ss);
   </script>
</head>

This results in a flash of unstyled content (FOUC) when I load or refresh the page on both Firefox and Chrome.

Using a plain <link rel="stylesheet" ...> doesn't have this problem: CSS loaded in <head> using <link> is apparently render-blocking. Is there some way to get the same behavior for CSS injected stylesheets as well?

Constraints:

I can't change a.css or b.css so I'm not looking for a solution which involves loading both stylesheets, or a combined styleseet and setting an indicator class on a root element to effect the choice between the sheets. I'm also not looking for visibility:hidden or display:none tricks which delay any display until the page is fully loaded.

Upvotes: 0

Views: 1381

Answers (0)

Related Questions