Détecter avec JavaScript ou jQuery si la transformation CSS 2D est disponible

Je suis l'affichage d'un élément sur mon site, j'alterne avec -90deg
mais si un navigateur ne supporte pas les CSS transformer l'élément
regarde misspositioned et pas vraiment bon.
Maintenant, je veux détecter à l'aide de JavaScript ou jQuery (il est indifférent
si jQ ou JS parce que je utiliser/chargé déjà jQ sur mon site) si cette rotation via CSS est pris en charge?

Je sais Modernizr mais juste pour que peu de chose que je ne veux pas d'inclure l'ensemble de la bibliothèque (et de la vitesse sur le site de la vitesse de la charge).

source d'informationauteur Poru | 2011-08-27

Voici une fonction sur la base de Liam réponse. Il sera de retour, soit le nom de la première soutenu préfixe ou false si aucune de ces préfixes sont pris en charge.

function getSupportedTransform() {
    var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
    var div = document.createElement('div');
    for(var i = 0; i < prefixes.length; i++) {
        if(div && div.style[prefixes[i]] !== undefined) {
            return prefixes[i];
        }
    }
    return false;
}

C'est à peu près aussi simple que vous les obtenez et d'un jsfiddle. Il ne va plus sur une boucle infinie.

function getSupportedTransform() {
    var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
    for(var i = 0; i < prefixes.length; i++) {
        if(document.createElement('div').style[prefixes[i]] !== undefined) {
            return prefixes[i];
        }
    }
    return false;
}

Voici le code que j'utilise pour détecter si CSS3 transitions sont pris en charge:

var div = document.createElement('div');
div.setAttribute('style', 'transition:top 1s ease;-webkit-transition:top 1s ease;-moz-transition:top 1s ease;-o-transition:top 1s ease;');
document.body.appendChild(div);
var cssTransitionsSupported = !!(div.style.transition || div.style.webkitTransition || div.style.MozTransition || div.style.OTransitionDuration);

div.parentNode.removeChild(div);
div = null;

Je suis volontairement pas à la recherche de support technique de Microsoft depuis que Microsoft n'a pas encore été envoyés à un navigateur qui prend en charge CSS3 transitions et je ne veux pas que mon code automatiquement soutenir une mise en œuvre, je n'ai pas encore testé dans l'avenir.

Il suffit de tirer ce dont vous avez besoin de Modernizr

Nous avons d'abord besoin de la testProps fonction

   /**
     * testProps is a generic CSS /DOM property test; if a browser supports
     *   a certain property, it won't return undefined for it.
     *   A supported CSS property returns empty string when its not yet set.
     */
    function testProps( props, prefixed ) {
        for ( var i in props ) {
            if ( mStyle[ props[i] ] !== undefined ) {
                return prefixed == 'pfx' ? props[i] : true;
            }
        }
        return false;
    }

Puis exécutez le cssTransform test

var tests = [];
 tests['csstransforms'] = function() {
        return !!testProps(['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform']);
    };

si les tests['csstransforms'] est vrai, alors vous avez la fonction est disponible.

Ce code tests pour transformations 2D soutien.

Il peut être facilement ajusté pour détecter 3D transforme appui à la place. Ajoutez 'translateZ(1)' pour tester CSS (voir defaultTestValues dans le code source).

Le plus de ce code est qu'il détecte le vendeur préfixe de prise en charge (le cas échéant). Appeler:

testCSSSupport('transform')

Valeurs de retour possibles:

falselors de la fonctionnalité non prise en charge, ou

{
    vendor: 'moz',
    cssStyle: '-moz-transform',
    jsStyle: 'MozTransform'
}

lors de la fonctionnalité prise en charge

/**
* Test for CSS3 feature support. Single-word properties only by now.
* This function is not generic, but it works well for transition and transform at least
*/
testCSSSupport: function (feature, cssTestValue/* optional */) {
var testDiv,
featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1),
vendors = ['', 'webkit', 'moz', 'ms'],
jsPrefixes = ['', 'Webkit', 'Moz', 'ms'],
defaultTestValues = {
transform: 'translateX(.5em)'
//This will test for 2D transform support
//Add translateZ(1) to test 3D transform
},
testFunctions = {
transform: function (jsProperty, computed) {
return computed[jsProperty].substr(0, 9) === 'matrix3d(';
}
};
function isStyleSupported(feature, jsPrefixedProperty) {
if (jsPrefixedProperty in testDiv.style) {
var testVal = cssTestValue || defaultTestValues[feature],
testFn = testFunctions[feature];
if (!testVal) {
return false;
}
//Assume browser without getComputedStyle is either IE8 or something even more poor
if (!window.getComputedStyle) {
return false;
}
testDiv.style[jsPrefixedProperty] = testVal;
var computed = window.getComputedStyle(testDiv);
if (testFn) {
return testFn(jsPrefixedProperty, computed);
}
else {
return computed[jsPrefixedProperty] === testVal;
}
}
}
var cssPrefixedProperty,
jsPrefixedProperty,
testDiv = document.createElement('div');
for (var i = 0; i < vendors.length; i++) {
if (i === 0) {
cssPrefixedProperty = feature;  //todo: this code now works for single-word features only!
jsPrefixedProperty = feature;   //therefore box-sizing -> boxSizing won't work here
}
else {
cssPrefixedProperty = '-' + vendors[i] + '-' + feature;
jsPrefixedProperty = jsPrefixes[i] + featureCapital;
}
if (isStyleSupported(feature, jsPrefixedProperty)) {
return {
vendor: vendors[i],
cssStyle: cssPrefixedProperty,
jsStyle: jsPrefixedProperty
};
}
}
return false;
}

Vous devez vous connecter pour publier un commentaire.