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 e 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;
});