comparing strategies to avoid flash of unstyled content (fouc)

Question

I need to control CSS with a cookie:

When the user chooses a style through a control I include on all of the pages, that setting needs to persist until the user changes it or the cookie expires
The default style nor a FOUC should occur when the user returns
No jquery or other library or framework
Works inIE, Firefox, Chrome, Opera, Safari on Windows; the last four on MacOS; Safari on iOS; Firefox and Chrome on Linux)
Bind web font used to a specific @class attribute
Buttons shrinkwrap their text value
Checkbox to toggle styles and show cookie state

My first strategy was to set an onload handler on the element. I've seen discussion of at least two other approaches:

document.write to create a to a stylesheet in the as the page is being built.
sitewizard.com creates a set of small stylesheets and lets the user set one at a time to be active.

I'd be grateful for advice about choosing a strategy that is easy to code and maintain and that provides the functionality I need in the browsers I need to support.

comparing strategies to avoid flash of unstyled content (fouc)

Answers (1)

Related Questions