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.