User generated custom css

Question

Hey, anyone have any idea what the best way to allow users to save custom css would be? Specifically, there are about 4 color values that I would like to allow a user to choose and these colors would be used to create a custom theme for the user. I'm thinking save values in the database and then using dom:loaded with prototype to set the custom style values but I'm wondering if theres a faster way? Like dynamically creating css files or something?

Answer 1

I would save the 4 values in the database and then create a css file from those values. You would want to make sure and cache the created css file for each user so you don't have to dynamically create it each page view.

Answer 2

Creating a custom css file adds another request the browser has to make so you would need to make sure your setting up the headers correctly to cache it. If the user does change their settings you would need do something to ensure the browser immediately stops cashing the old css file and loads the new file. One way to do this is to change the url of the css file.

Example:

/usercustom.css?version=(last saved date hash)

Instead I would use your first approach and create a JSON array that you inject into the page and then you use your javascript framework to load and use the array to style the page.

You could also store the color values in the cookie from the server and use and or write to them on the client.

Answer 3

and then using dom:loaded with prototype

Awww, don't do that! That won't work when JavaScript is turned off.

Approach 1: Static stylesheet, dynamic values in document head

For the sake of not having to work with a dynamically created style sheet, have a separate, static CSS file with all the definitions that won't change.

<link rel="stylesheet" href="styles/static.css" type="text/css"> 
<!-- Or whatever you name it -->

All the definitions that will change, you could put into the head of the HTML document, fetching the user-changeable values from a database.

<style type="text/css">
.classname { font-size: (fontsize); }  <-- Insert dynamic value here
.classname { color: (color); }         <-- Insert dynamic value here   
....
<style>

that way, the majority of the CSS stays in static, cacheable files, while the dynamic part won't cause another HTTP request.

Approach 2: Dynamic stylesheet

If you have a lot of dynamically changing values, put the entire style sheet into a script file and output it, replacing placeholders with the values from the database. The downside to this is that to force the browser to reload the style sheet on changes, you'll have to work with a version approach stylesheet.css?version=400 which is pretty complex to do, but can sometimes be more desirable than littering the head section with CSS.

You decide which approach suits your situation better. I find myself choosing the first one most often.