Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

list of css3 properties with their javascript counterpart

list of css3 properties with their javascript counterpart

Problem

I am writing an little application that uses css3 tranforms. I would like to set the values for transformations directly via javascript, using the element.style property. Based on the code i found here i would like to know where i can find a list that shows how to name css3 properties as javascript property. f.e.: -moz-box-shadow becomes MozBoxShadow. May be this list does not exist because I just have to exchange all hyphens by their following letter in upper case, but i would like to be sure that this is the case. Does anybody know??

EDIT::

So just because i needed any kind of working solution i wrote this little function which works in ie9, ff, safari and chrome:

var cssprops = (function(){

    var prefixes = [ "", "-ms-", "-webkit-", "-moz-", "-o-" ];
    var properties = [ "transform", "transform-origin" ];
    var finder = /-(\w)/ig;
    var str, pre, result;
    var root = document.documentElement;
    var result = {};

    for( var i = 0; i 

I have not tried any other properties because i do not need them this time, but if it turns out that this will work for the whole list i would be happy to be notified about it.

Greetings...

Problem courtesy of: philipp

Solution

What you are looking for are vendor prefixes for Css Properties, the abuse of vendor prefixes is a bad practice and it's not recommended. If you wanna know why here is a post explaining it. Also, here is what you are looking for with a list for the prefixes.

Solution courtesy of: David Diez

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

list of css3 properties with their javascript counterpart

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×