web-dev-qa-db-fra.com

styles complets pour zoom CSS croisé

Je trouve qu'il est difficile d'obtenir des propriétés de zoom CSS croisées entre navigateurs.

zoom: 2;
-moz-transform: scale(2);
csscss3cross-browserzoom
19
Hello World

Celles-ci seront suffisantes pour les navigateurs croisés ...

Démo

Remarque: Comme @martin a souligné que cela pourrait ne pas fonctionner comme. prévu, cela ne signifie pas que cela échoue, Chrome le rend simplement 2x plus grand. que les autres navigateurs, car il respecte également la propriété zoom. Donc, ça fait 2x plus gros ...

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

<div class="zoom">BlahBlah</div>

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 */
}
40
Mr. Alien

Voici une seule solution css

.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;
}

Changer la balise HTML en

<!--[if lte IE 8]> <html class="ie8"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
4
aWebDeveloper

Si la création de scripts est réalisable, vous pouvez éviter la collision de plusieurs propriétés de zoom prises en charge et le reniflement du navigateur en utilisant la détection de fonctions évolutives.
Note: J'utilise jQuery ici pour plus de commodité, mais il pourrait être écrit sans cela.

CSS:

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

HTML:

<div class="mySelectorClass">Foobar</div>

Script (initialisation unique)

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

Ensuite, lorsque le zoom est requis, appelez simplement:

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

En réponse au commentaire ci-dessus de @martin (il a raison), j'ai créé une solution de contournement complexe à l'aide de javascript (y compris certains jQuery) et de certains de @Mr. Alien's css. Incontestablement, il existe d'autres moyens d'y parvenir - peut-être plus simple, mais les combinaisons js et css suivantes fonctionnent pour moi:

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))

Le code de détection du navigateur provient de ici et l'extrait de détection de la version Chrome provient de cet article .

0
dgo