Vérifier le navigateur de propriétés CSS de soutien avec le JavaScript?

Est-il possible en JavaScript pour savoir si une propriété CSS est pris en charge par le navigateur client? Je parle de la rotation des propriétés de CSS3. Je veux exécuter certaines fonctions uniquement si le navigateur prend en charge.

InformationsquelleAutor mck89 | 2009-08-27
  1. 36

    Je crois que vous pouvez le faire de cette façon:

    if ('WebkitTransform' in document.body.style 
 || 'MozTransform' in document.body.style 
 || 'OTransform' in document.body.style 
 || 'transform' in document.body.style) 
{
    alert('I can Rotate!');
}
    • Exemple: jsbin.com/etusoy/latest
    • Il peut être intéressant de noter que cette technique permet de vérifier si le navigateur prend en charge CSS3 transform de style et non pas spécifiquement à la rotate() fonction de transformation. Dans mon (limitée) de l'expérience, l'ancien a toujours implicite de ce dernier, mais je ne suis pas sûr si c'est une hypothèse fiable (voir cette question).
    • Exemple: jsfiddle.net/dp3ueaz5, Mais je préfère utiliser cette fonction: code.tutsplus.com/tutorials/... afin de Mieux les comprendre et il vérifie automatiquement fournisseur de préfixes. 😉
    InformationsquelleAutor Jamland
  2. 8

    Il y a une nouvelle API DOM CSS.prend en charge à cette fin. FF, Opera (comme supportsCSS) et Chrome Canary déjà de mettre en œuvre cette méthode.

    Pour la compatibilité inter-navigateur vous pouvez utiliser mon CSS.prend en charge polyfill

    Exemple:

    CSS.supports("display", "table");//IE<8 return false

    Mais, vous avez encore besoin de spécifier navigateur préfixe pour la préfixation de propriétés css. Par exemple:

    CSS.supports("-webkit-filter", "blur(10px)");

    Je suggère à l'aide de Modernizr pour la fonctionnalité de détection.

    InformationsquelleAutor termi
  3. 0

    Vous pouvez utiliser Modernizr de la bibliothèque.

    Exemple pour css transform:

    dans .fichier css;

    .no-csstransforms .box { color: red; }
.csstransforms .box { color: green; }

    dans .fichier js;

    if (Modernizr.csstransforms) {
  //supported
} else {
  //not-supported
}
    InformationsquelleAutor AhbapAldirmaz
  4. 0

    Peut-être essayer ceci?

    var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;
    • Pas une réponse idéale, mais pourquoi est-ce downvoted? Je ne vois aucune erreur technique avec elle
    • peut-être que ma solution est comme le premier, en tout cas merci pour le soutien =)
    InformationsquelleAutor Buka