ZOOM vs SCALE en CSS

Hace algunas entradas hablamos de las transformaciones 2D de CSS3, poniendo como ejemplo la rotación. Ahora vamos a dar algunos detalles más sobre el escalado de elementos.
Según lo que hemos visto, en el estándar hacer un escalado CSS es tan sencillo como:
#elem{
     transform:
scale(1.5);
}
Lo que haría el elemento “elem” un 50% más grande. Nos podemos preguntar para que sirve esto. ¿No podemos hacer las dimensiones del elemento un 50% más grandes de entrada? Sí, pero la ventaja de usar escalado es que se escala tanto el contenedor como el contenido. “elem” podría ser un div con texto, fotos y una tabla y se escalaría todo el contenido. Además el escalado hace más fácil poder manejar el tamaño mediante javascript para que el usuario pueda elegir cómo de grande quiere verlo.
Usando los prefijos de navegadores, hacemos que esto funcione en la mayoría de navegadores:
#elem{
            -moz-transform: scale(1.5);
            -webkit-transform:
scale(1.5);
            -o-transform:
scale(1.5);
            -ms-transform: scale(1.5);
            transform: scale(1.5);
}
Veamos como funciona, sobre un ejemplo:
Sin escalar (Chrome)
Firefox
Chrome
Opera
Safari
Internet Explorer 9
Internet Explorer 8
Así que tenemos el problema en Internet Explorer 8, ahora mismo es más utilizado de su familia, ya que para el resto de navegadores ya no queda casi nadie usando una versión tan antigua como para no soportar las transformaciones. Pero hay solución, Internet Explorer soporta desde hace mucho tiempo (al menos desde la versión 5) una propiedad no estándar llamada “zoom”. Esta propiedad además ha sido adoptada por versiones modernas de webkit (Chrome, Safari) y Opera. Eso si, hay que advertir que en Opera 11.61 para algunos sistemas operativos, la propiedad no funciona correctamente.
El código sería:
#elem{
zoom: 1.5;
}
Internet Explorer 8 –
con Zoom
La propiedad zoom es más sencilla, incluso intuitiva que el escalado, si bien el escalado permite mayor control, al cambiar por ejemplo el origen de la transformación. En cualquier caso “zoom” no es estándar, Firefox no la soporta y el estándar CSS no la ha recogido todavía. Así que siempre tendremos que hacer la diferenciación según el navegador.
Un código javascript para comprobar si la propiedad está soportada por el navegador podría ser:
var test = document.createElement(‘div’);
if (test.style.zoom === undefined) {
//Zoom no existe, es el caso de
firefox, trabajar con scale
}else{
    test.style.zoom=1.0;
    if
(test.style.zoom==””){
//Nos aseguramos que en Opera
11.61 el zoom funciona bien, si entramos en este caso es que no funciona y hay
que trabajar con scale
}
}else{
     //zoom si funciona.
}
Para hacer este tipo de comprobaciones prefiero usar la librería Modernizr, que tiene muchos test por defecto y se pueden añadir fácilmente los nuestros. Al hacer el test podemos cargar condicionalmente un script u otro según el resultado, y la librería se encarga de añadir al documento las clases “test” o “no-test” para cada test (donde test se sustituye por lo que comprobamos)
Así si hiciésemos un test llamado zoom, que compruebe si existe el zoom, con un CSS como el siguiente:
.zoom #elem{
    zoom: 1.5;
}
.no-zoom #elem{
            -moz-transform:
scale(1.5);
            -webkit-transform: scale(1.5);
            -o-transform: scale(1.5);
            transform:
scale(1.5);
}
Nos aseguraríamos que cogiese siempre el correcto. Ahora solo falta ver como sería el código para añadir nuestro test a Modernizr:
Modernizr.addTest(‘zoom’, function () {
    var test =
document.createElement(‘div’);
     if (test.style.zoom ===
undefined) {
                        delete
test;
                        return
false;
     }
     test.style.zoom=1.0;
     if (test.style.zoom==””){
//Opera 1.61
         delete test;
         return false;
     }
     delete test;
     return true;
});
2018-07-02T17:39:38+00:0023/03/2012|Diseño web, HTML5|

3 Comments

  1. Luis Manuel Naranjo 10/05/2013 en 18:02 - Responder

    hola estoy tratando de hacer zoom a multiples divs, posicionados con position:absolute, y no funciona, al utlizar absolute no funciona el zoom, sabes como podria solucionarlo?

  2. Luis Hijarrubia 10/05/2013 en 20:27 - Responder

    Hola Luis Manuel.

    ¿En qué navegador (y versión) te da problemas? He hecho una prueba rápida en jsfiddle y al menos en Chrome funciona como espero.

    http://jsfiddle.net/mAdeS/1/

    ¿Puedes poner un pequeño ejemplo del código que te da problemas en jdfiddle a ver si encontramos el problema?

  3. Mario Rodriguez 26/11/2015 en 13:43 - Responder

    Gracias por el aporte

Deje su comentario