jquery determine if css zoom is available in browser

Question

$(button).click(function(){
    if (Modernizr.zoom()) $('body').animate({ zoom: '200%'; }, 1000);
    else $('body').alternative();
});

As you can see above … I want to zoom in into my page on click.

By the way: Is it good to use 'zoom' (css)? I'm not sure because I did not find any good description for 'zoom' (css). Or is it better to use 'scale' (css) to animate?

Main Question: Is there any way to detect if the browser supports this css-'zoom' (or whatever) feature? I'm using Modernizr, but within Modernizr there is nothing to detect if 'zoom' is available.

Answer 1

OK. I found out, that using the css zoom-property is not good, because it only works in IE and some newer versions of "real" browsers. AND if i have a layout with percent-values it doesn't zoom except i also change the value of the width or height, which is not nice.

BUT it does work with the css3 scale-property! and therefore i found the Modernizr.csstransforms() feature detection (for js)!

So … that's it!

Answer 2

if someone needs it...

I use modernzr to see if the browser supports zoom property

  if (Modernizr.testProp('zoom') === true) {
    someStuff()
  }

but why not use transform? because in this specific project I need to zoom all the website, making something like the browser native zoom, and when you use transform on a website chrome blur all the fonts, but you can use the zoom and it does a very good work.

but firefox don't recognize the zoom property, so I use zoom if zoom is available, if is not I use the transform zoom.

if (Modernizr.testProp('zoom') === true) {
  zoomWithCSS()
}
else {  
 zoomWithTransformScale()
}

working example on codepen.