Quelle est la bonne combinaison de préfixes pour les transitions et les transformations CSS?

comme je l'ai mentionné dans une question très similaire ...

il s'agit de l'un de ces cas où les préfixes fournisseurs pour les caractéristiques normalisées deviennent extrêmement problématique, parce que vous devez tenir compte de toutes les différentes implémentations préfixées et/ou non corrigées de différentes caractéristiques dans les différentes versions de différents navigateurs.

quelle bouche. Et puis vous avez à combinent diverses permutations de ceux-ci. Quel poignée .

en bref, vous avez besoin de comprendre quelles versions de chaque navigateur nécessite un préfixe pour chacune des propriétés individuelles, et à moins que vous ne vous souciez pas du bloat, vous aurez besoin d'appliquer les préfixes différemment pour les navigateurs individuels.

la question liée fait référence aux animations plutôt qu'aux transitions qui en résultent. dans des notations significativement différentes, mais les deux caractéristiques sont passées par des processus de préfixation similaires AFAIK. Ceci étant dit, Voici les tableaux de compatibilité de caniuse.com pour 2D transforme et transitions .

en d'autres termes, ce n'est pas parce qu'une caractéristique est préfixée dans une version d'un navigateur que l'autre caractéristique est nécessairement préfixée dans la même version du même navigateur. Par exemple, Chrome transitions Non-figées au moins dix versions majeures (26) avant qu'elle ne se transforme non-figées (36), et Safari still nécessite des préfixes pour les transformations. En conséquence, vous allez certainement avoir cette déclaration:

transition: -webkit-transform .3s ease-in-out;

et si vous en avez absolument besoin, vous devrez couvrir les versions plus anciennes avec ce qui suit:

-webkit-transition: -webkit-transform .3s ease-in-out;

d'autres navigateurs, miraculeusement, ont été capables d'éviter à la fois les transitions et transforme (ainsi que les animations) simultanément, ce qui rend les choses beaucoup plus faciles:

• -ms-transition n'est utilisé que par les versions pré-versions de IE10, qui sont expirées depuis longtemps. Aucune autre version D'IE n'utilise de transitions préfixées, donc vous devriez supprimer ce préfixe de transition particulier.

  -ms-transform avec le préfixe est seulement utilisé par IE9; IE10 et plus tard navire avec des transformées non fixées. Mais dans un but gracieux dégradation vous pouvez vouloir garder votre déclaration -ms-transform: rotateX(-30deg); - juste garder à l'esprit qu'elle ne peut pas être transitionnée car IE9 ne supporte pas les transitions CSS ou les animations.

• -moz-transition et -moz-transform ont été utilisés par Firefox jusqu'à et y compris 15, puis unprefixed dans 16.

• -o-transition et -o-transform ont été utilisés par Opera jusqu'à et y compris 12.00, puis non modifiés en 12.10, puis préfixé comme -webkit- dans les versions suivantes dans son mouvement de cligner des yeux.

en résumé, voici tous les préfixes dont vous avez besoin, sur la base des informations fournies par caniuse.com (que j'espère être à jour et précis pour la plupart):

-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26, Safari < 7 */
   -moz-transition:    -moz-transform .3s ease-in-out; /* Firefox < 16 */
     -o-transition:      -o-transform .3s ease-in-out; /* Opera < 12.10 */
        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9, cannot be transitioned */
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

le strict minimum dont vous aurez besoin pour supporter la dernière version de chaque navigateur à partir de cette écriture est:

        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

comme indiqué dans les commentaires, vous pouvez utiliser un outil comme Autoprefixer pour automatiser ceci pour vous basé sur le niveau de soutien de navigateur que vous avez besoin. Cependant, pour ceux qui préfèrent écrire leur CSS manuellement, ou pour ceux qui se demandent exactement quels préfixes sont nécessaires par quels navigateurs, c'est cela.

Sur une dernière note: remarquez les deux unprefixed transition les déclarations dans les exemples ci-dessus? Maintenant, vous pensez que ce serait assez facile de les combiner en une seule déclaration comme ceci:

transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out;

mais, malheureusement, Chrome ignorera complètement par erreur cette déclaration , tandis que d'autres navigateurs l'appliqueront très bien.