CODEWITHSUNDEEP
csstransformmodernizr
EvilDr
EvilDr

Reputation: 9580

Do Modernizr tests include browser-prefixed functionality?

When testing for functionality using Modernizr, like this:

if (Modernizr.csstransforms) {
    $("#someDiv").addClass('rotate');
}

Does the Modernizr test return true for earlier browsers that only support prefixed applications of this rule, e.g. -mz-transform, or does it just test the standard transform? I read the documentation but can't find any reference to the check.

The goal is to only apply transforms if the browser supports them. To give an example.

Supposing a .rotate class applies a CSS 2D transform:

.rotate {transform:rotate(30deg)}

Would the class need to include the extra prefixed transforms, or does Modernizr not account for them? Obviously there's no point adding in all those prefixed versions if Modernizr isn't looking for them.

.rotate {-moz-transform:rotate(30deg); 
         -ms-transform:rotate(30deg); 
         -o-transform:rotate(30deg); 
         -webkit-transform:rotate(30deg); 
         transform:rotate(30deg)}

Upvotes: 1

Views: 34

Answers (1)

Patrick
Patrick

Reputation: 13974

Modernizr tests against all prefixed and prefixed versions. You would still need to apply all of those css rules, however, since modernizr is just telling you that it supports it, not the specific rule that works.

Also, Modernizr can add classes to the html element, so you don't need to do 

if (Modernizr.csstransforms) {
    $("#someDiv").addClass('rotate');
}

because instead of 

.rotate .foo {
  transform:rotate(30deg)
}

you can just do

. csstransforms .foo {
  transform:rotate(30deg)
}

Upvotes: 1

Related Questions