estilos completos para cross browser CSS zoom

Me resulta difícil obtener propiedades de zoom de CSS del navegador cruzado … lo que tengo es solo esto

zoom: 2; -moz-transform: scale(2); 

Estos serán suficientes para cruzar el navegador …

Manifestación

Nota: como @martin señaló que esto puede no funcionar como se pretende , no significa que esto falle, Chrome simplemente lo hace 2 veces más grande que otros navegadores, porque también RESPETA la propiedad de zoom . Entonces lo hace 2 veces más grande …

 zoom: 2; /* IE */ -moz-transform: scale(2); /* Firefox */ -moz-transform-origin: 0 0; -o-transform: scale(2); /* Opera */ -o-transform-origin: 0 0; -webkit-transform: scale(2); /* Safari And Chrome */ -webkit-transform-origin: 0 0; transform: scale(2); /* Standard Property */ transform-origin: 0 0; /* Standard Property */ 

HTML

 
BlahBlah

CSS

 .zoom { zoom: 2; -moz-transform: scale(2); -moz-transform-origin: 0 0; -o-transform: scale(2); -o-transform-origin: 0 0; -webkit-transform: scale(2); -webkit-transform-origin: 0 0; transform: scale(2); /* Standard Property */ transform-origin: 0 0; /* Standard Property */ } 

Aquí hay una solución de css only

 .csszoom{ -ms-transform: scale(1.5); /* IE 9 */ -ms-transform-origin: 0 0; -moz-transform: scale(1.5); /* Firefox */ -moz-transform-origin: 0 0; -o-transform: scale(1.5); /* Opera */ -o-transform-origin: 0 0; -webkit-transform: scale(1.5); /* Safari And Chrome */ -webkit-transform-origin: 0 0; transform: scale(1.5); /* Standard Property */ transform-origin: 0 0; /* Standard Property */ } .ie8 .csszoom{ zoom:1.5; } 

Cambiar la etiqueta HTML a

     

Si las secuencias de comandos son factibles, entonces puede evitar tanto la colisión de múltiples propiedades de zoom soportadas como el rastreo del navegador mediante la detección de funciones a prueba del futuro.
Nota: Estoy usando jQuery aquí por conveniencia, pero podría escribirse sin él.

CSS:

 .zoom { -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; } 

HTML:

 
Foobar

Script (Inicialización única)

 var strPropZoom = "zoom"; var blnPropZoomUseScale = false; $(function() { var jqBody = $("body"); // Determine the supported 'zoom' method switch (true) { case Boolean(jqBody.css("zoom")) : break; case Boolean(jqBody.css("-moz-transform")) : strPropNameZoom = "-moz-transform"; blnPropZoomUseScale = true; break; case Boolean(jqBody.css("-o-transform")) : strPropNameZoom = "-o-transform"; blnPropZoomUseScale = true; break; case Boolean(jqBody.css("-webkit-transform")) : strPropNameZoom = "-webkit-transform"; blnPropZoomUseScale = true; break; } }) 

Luego, cuando se requiere hacer zoom, simplemente invoque:

 var intZoom = 2.5; // NB: This could be calculated depending on window dimensions $(".mySelectorClass") .css( strPropZoom ,(blnPropZoomUseScale ? "scale(" + intZoom + ")" : intZoom) ) .addClass("zoom"); 

En respuesta al comentario anterior de @martin (es correcto), creé una solución complicada usando javascript (incluye algunos jQuery) y algunos de @Mr. Alien’s css. Indiscutiblemente, hay otras maneras de lograr esto, quizás más simple, pero el siguiente combo js y css funciona para mí:

css

 .zoom{ -moz-transform: scale(2); /* Firefox */ -moz-transform-origin: 0 0; -o-transform: scale(2); /* Opera */ -o-transform-origin: 0 0; zoom:2 /*IE*/; } //Notice the absence of any Webkit Transforms 

javascript

 (function($){ var version=false, isSafari=Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0, isOpera=!!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0, isChrome=!!window.chrome && !isOpera; if(isChrome){ version=(window.navigator.appVersion.match(/Chrome\/(\d+)\./)!==null) ? parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10) : 0; version=(version >= 10) ? true : false; // Don't know what version they switched it. Figured that this was a good guess } // I added the extra ternary check in there because when testing in Chrome, // if I switched the user agent in the overrides section, it kept failing with // null value for version. if(isSafari || version){ $('.zoom').css('-webkit-transform','scale(2)'); $('.zoom').css('-webkit-transform-origin','0 0'); // If Scaling based upon different resolutions, a check could be included here // for window size, and the css could be adjusted accordingly. } }(jQuery)) 

El código de detección del navegador vino de aquí y el fragmento de detección de la versión de Chrome provino de esta publicación .

Parece que la respuesta hoy es

 .zoom { zoom: 2; /* Chrome */ transform: scale(2); /* FF, neglected by Chrome */ transform-origin: 0; } 

Eso es un clinch. 😉