CSS-Zoom

Kategorie Webentwicklung
Inhalt
Internet-Explorer hatte ja diese nette CSS-Eigenschaft "zoom", mit der man Elemente vor dem Rendering vergrößern oder verkleinern konnte. Für sie wurde dabei auch der nötige Platz bereitgestellt.
Meistens wurde allerdings "zoom:1" genutzt: Damit hat man dem IE gesagt, daß das Element ein 'Layout' habe, und damit seine Behandlung des Elements beeinflußt. Das ist so eigenwillig wie es klingt.
"Zoom" war nie Standard, wird aber immer noch vom IE und außerdem von Chrome/Chromium unterstützt. Angeblich versteht auch Opera die Eigenschaft, aber mir ist es nicht gelungen, es unter Opera zu nutzen.
Allerdings taucht der Begriff "zoom" mittlerweile im Kontext der "CSS Device Adaptation" (http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor) auf - vielleicht bezieht sich der mögliche Opera-Support darauf.
"zoom" ist nicht dasselbe wie "transform:scale()". Ersteres reserviert Platz für das Element, zweiteres zeichnet es einfach größer oder kleiner, paßt aber das Layout nicht an. Beide Varianten haben ihren eigenen Zweck.
Zum Testen, ob der Browser "zoom" unterstützt, verwende ich jetzt folgendes:
    var test=document.createElement('div');
    if (test.style.zoom != undefined) {                                                                                                                             
        var old=test.style.zoom;
        test.style.zoom=0.5;
        if (test.style.zoom!=old)
            wir_haben_zoom_nun_tu_was();
    }
Die Existenz von test.style.zoom alleine zu testen hat nicht ausgereicht, denn Opera kennt die Eigenschaft, nur akzeptiert es sie nicht für alle Elemente:
    >>> c=document.createElement("img");
    <img/>
    >>> c.style.zoom
    ""
    >>> c.style.zoom=0.5
    0.5
    >>> c.style.zoom
    ""
Genutzt habe ich das hier, um via CSS die Bilder verkleinern zu können und nicht noch beim Nachladen im Endlos-Scroll erst noch verkleinern zu müssen. Diese Lösung:
    <style>
    #container.scaledown .pw-thumb {
        -ms-zoom:50%;
        -o-zoom:50%;
        zoom:50%;
    }
    </style>

     <button id='smaller'>Größe Ändern</button>
     ...
     $("#smaller").click(function() {
        $("#container").toggleClass("scaledown");
        nachladen_wenn_nötig();
     });
ist erheblich schöner als diese:
var momentan_ist_alles_skaliert=0;
var skaliere=function(i,factor)
{
    var w=i.width();
    var h=i.height();
    if (factor==1) {
        i.removeAttr("width");
        i.removeAttr("width");
    } else {
        i.width(w*factor);
        i.height(w*factor);
    }
}
$("#smaller").click(function() {
    $("img","#container").each(function() {
        var $i=$(this);
        $i.toggleClass("scaled");
        if ($i.hasClass("scaled")) {
            skaliere($i,0.5);
            momentan_ist_alles_skaliert=1;
        } else {
            skaliere($i,1);
            momentan_ist_alles_skaliert=1;
        }  
    })
    ...
    function endless_scroll_load_callback(data)
    {
        var html=make_thumbs(data);
        var div=$("<div />").html(html);
        if (momentan_ist_alles_skaliert) {
           $("img",div).each(function() {
               // wie oben noch mal.
           });
        }
        $("#container").html($(div).html()); // ein Weg, den Inhalt des Divs in den Thumbnail-Container zu kopieren
     }
});

Das Beispiel ist übrigens etwas zu dumm programmiert, um wirklich tauglich zu sein - was ist, wenn img.width schon gesetzt war?
Das richtig zu machen, wird eine interessante Codewüste.
Diashow
Blog