Dynamic Css
Back at the time I was working on a CMS project I was stuck at the page style editor dialog. This functionality would allow the user to change the predefined css styles and then by saving those changes and refreshing the page he would see the effect those changes had on the style.
Well at first I thought of two alternatives:
1.use variables in the css file
This is the simplest solution but it is also very restrictive. It allows to change values of existing style properties but it would be difficult to add support for adding new attributes or even new style definitions. So forget about it.
2. write a css parser in PHP
By doing a quick google search I found a nice article on tutsplus.com. It covers everything on the matter. An excpert from the article follows:
This technique is somewhat simple. We will ask Apache to redirect any stylesheet to a specific PHP script. This
script will open the stylesheet, and read it line by line to find and replace any user-defined variables. Finally the
parsed content will be displayed as pure CSS; browsers won’t notice the difference.
Yeah pretty cool but you have to install and configure Apache`s mod_rewrite, the code isn`t that complex and performance can be tuned by using simple caching mechanism.
This solutions also makes it difficult to let the user add new attributes to the style or define new styles…
Both the above solutions need a page refresh so that the user can see the effects of the change. A page refresh can cost o lot in a RIA.
So I forget about the above solutions and try to think out of the box…
Finally I get this spark… I have jQuery in my magic box. I get it out and I see what it can do for me…
jQuery is a very powerful javascript library which can do manipulate any DOM element. So…Can it help me manipulate styles? I google and I find about some interesting object in the document object: document.styleSheets … with some additional research I find everything I need to complete my scenario:
-Define a separate <style> tag ang give a title to it. I name it globalCssStyle. It`s content is written by php and initially it should contain the basic initial css.
-Parse styles by using javascript and display them in your neat interface
-User changes style attribute values from the interface
-Changes are applied immediately – No Page Refresh
-User can Rename css classes
-User can add attributes
-User can create new css classes
-User saves changes
-CSS is sent to server where PHP saves it
I wrote some code and everything was working as expected and I got a solution that was the most suitable for me. I have called it dynamic CSS as I`ve not seen it applied anywhere else.
Well I`m including the source code here. Comments are welcome as always.
Enjoy.