Question

I’m working on FormDesigner in Web: HTML5 + CSS3 + jQuery, whereby I could drag a (div, textbox, etc) onto a form and change their css-style individually.

---

My requirement: How could I store each of the attributes separately so that I could easily retrieve independently? (Generic, Reusable, Flexible)

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#666666), color-stop(0, #333333))

---

This is how I do it: (code-snippet)

            cssObj[id] = {};
            cssObj[id].background = {};
            cssObj[id].background.webkitGradient = {};
            cssObj[id].background.webkitGradient.linear = {};
            cssObj[id].background.webkitGradient.linear.hPosStart = hPosStart;
            cssObj[id].background.webkitGradient.linear.vPosStart = vPosStart;
            cssObj[id].background.webkitGradient.linear.colorStart = colorStart;
            cssObj[id].background.webkitGradient.linear.hPosEnd = hPosEnd;
            cssObj[id].background.webkitGradient.linear.vPosEnd = vPosEnd;
            cssObj[id].background.webkitGradient.linear.colorEnd = colorEnd;
            cssObj[id].background.webkitGradient.linear.colorStop = {};
            cssObj[id].background.webkitGradient.linear.colorStop = colorStopArr;

I have stored them in jSon way, but somehow I think there should be more advance or efficient approach, such as having a Class/ Attributes/ Methods, so that I could store them in a generic, reusable and flexible way.

Answer 1

I think you’re going the right way. But jQuery 1.8 introduces vendor prefix support, which maybe could help you.

I don’t think you need to specify classes to dynamically modify the CSS of an element. However, CSS-class-definitions could be used in your export-format when saving the form. And with jQuery you should be able to pass in JSON objects in the .css()-method; that way to do not need specific code for each line.

Vendor-Prefixed CSS Properties

The W3C had its heart in the right place when it came up with the idea to use vendor prefixes for CSS features that were not yet standardized, but it hasn’t resulted in a fairy-tale ending. Web developers are faced with the nightmare of including all the vendor-prefixed property names in stylesheets. jQuery 1.8 eases the pain a bit. We automatically take the non-prefixed property name and generate the prefix that is appropriate for the current browser, so you don’t have to. For example, on Chrome the jQuery call $("#myscroll").css("marquee-direction", "backwards") will set the CSS to -webkit-marquee-direction: backwards.

http://blog.jquery.com/2012/06/22/jquery-1-8-beta-1-see-whats-coming-and-going/