Webkit and Moz Transform, depending on browser

Question

I have a bit of Javascript that detects the browser and applies a transform to an elements depending on the browser. The one for Webkit works fine on Chrome however the Firefox one doesn't. Can someone please tell me if my code below is correct:

if(typeof navigator.vendor.toLowerCase().indexOf('chrome')!=-1){    
    document.getElementById('jj_preview7').style.WebkitTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}

if(typeof navigator.vendor.toLowerCase().indexOf('firefox')!=-1){
    document.getElementById('jj_preview7').style.MozTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}

Thanks in advance

Solution

// Test element we apply both kinds of transforms to:
var testEl = document.createElement('div');
testEl.style.MozTransform = 'translate(100px) rotate(20deg)';
testEl.style.webkitTransform = 'translate(100px) rotate(20deg)';
var styleAttrLowercase = testEl.getAttribute('style').toLowerCase();

// when we check for existence of it in the style attribute;
// only valid ones will be there.
var hasMozTransform = styleAttrLowercase.indexOf('moz') !== -1;
var hasWebkitTransform = styleAttrLowercase.indexOf('webkit') !== -1;

Doing this you can now do:

var transformParts = [];

if (jj_input23 !== '') {
    transformParts.push('scale(' + jj_input23 + ')');
}

if (jj_input23 !== '') {
    transformParts.push('rotate(' + jj_input24 + 'deg)');
}
if (jj_input25 !== '' && jj_input26 !== '') {
    transformParts.push('translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)');
}

if (jj_input27 !== '' && jj_input28 !== '') {
    transformParts.push('skewX(' + jj_input27 + 'deg) skewY(' + jj_input28 + 'deg)');
}
var transformTxt = transformParts.join(' ');

if (hasWebkitTransform) {    
    document.getElementById('jj_preview7').style.WebkitTransform = transformTxt;
}

if (hasMozTransform) {
    document.getElementById('jj_preview7').style.MozTransform = transformTxt;
}

Comments

[xiaoyi]

You don't have to test which the engine is. Just assign style to both of them, and browser will accept the one it supports, and ignores the other one.

[artlung]

Working for me in Firefox 12.0 / Mac. It's not clear to me what your issue is, actually. Is it in the detection or in the application of the transform? There are two issues and "not working on Firefox" is not enough information for people to be helpful.

[Lodder]

It's the actual transform that doesnt work. Here is the link to my website. joomjunk.co.uk/extras/css3-generator.html#transform If you test the modules on the other tabs, they work, but the transform one doesn't.

[artlung]

Ah, your question doesn't make that clear. To me the question reads like a detection problem, not a transform syntax problem.

[Lodder]

thanks for your input, works in Chrome but it still doesn't work in FireFox 13 stable or 14 beta

[xiaoyi]

What are the values you used to test?

[Lodder]

scale=2, rotate=22, translate=22 and 22, skew=22 and 22

[Lodder]

thanks so much!! just noticed your updated answer and tested it, thanks again ;)

[xiaoyi]

And it works on my Firefox 12. I believe its your own problem, use Error console(ctrl+shift+j) to see if there are warning of for assigning illegal value to -moz-transform. Also inspect 'preview' with firebug, to see if style.MozTransform has value.

[Lodder]

just noticed that the skew is the only part that doesn't work. do you know why?

[artlung]

Looks like skew() should not be used. developer.mozilla.org/en/CSS/transform#skew_Non-standard

[artlung]

Updated my answer to use skewX and skewY instead.

[Boris Zbarsky]

This code will break the moment the prefixed versions are dropped in favor of the unprefixed standard version....

[artlung]

@BorisZbarsky thanks! The code correctly detects whether -moz-transform and/or -webkit-transform are available and apply. It will continue to do so. Detecting support for transform is not part of the OP's question, if you have a question like that feel free to ask!

[Boris Zbarsky]

The "right" answer to the OP's question, imo, would be to provide code that works in all browsers. I don't need to be told how to do that, but the OP clearly does. (For example, the code given won't work in Opera or MSIE 10 either, even though both support transforms...)

[artlung]

Good answers are about addressing what the OP asks. I answered to the best of my ability. I hereby stipulate that vendor CSS extensions & prefixes are a topic which has gotten plenty of discussion in the past few months; the OP should study this complex topic more before deploying anything claiming to be a robust solution. My understanding is the OP is experimenting with them, as we all are, and my answer addresses that. If you dislike my answer, edit it or downvote it or both. Or do what I do when I don't like an answer: contribute a different one.