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 <body> element. I've seen discussion of at least two other approaches:
document.write
to create a <link> to a stylesheet in the <head> 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.