Quelle est la bonne combinaison de préfixes pour les transitions et les transformations CSS?
quelle serait la bonne façon de préfixer ce CSS afin de couvrir le plus large éventail de navigateurs et de versions?
Version 1:
-webkit-transition: -webkit-transform .3s ease-in-out;
-moz-transition: -moz-transform .3s ease-in-out;
-ms-transition: -ms-transform .3s ease-in-out;
-o-transition: -o-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
ou version 2:
-webkit-transition: transform .3s ease-in-out;
-moz-transition: transform .3s ease-in-out;
-ms-transition: transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition transform .3s ease-in-out;
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
il me semble que lors de l'utilisation des préfixes vendeur sur une propriété de transition, je devrais aussi cibler l'attribut préfixé vendeur que je veux faire la transition.
Je n'arrive pas à trouver de solution.
3 réponses
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.
à partir de Maintenant, si vous supportez les deux dernières versions de chaque navigateur, voici les préfixes dont vous avez besoin:
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
donc pour répondre à votre question, oui, le préfixe-transition devrait cibler le préfixe-transformation. Assez sûr que c'est toujours vrai pour les transformations (mais pas nécessairement pour les autres propriétés. Flexbox et les Gradients peuvent être des préfixes complexes, je vous suggère d'utiliser Autoprefixer pour garder ces règles en ligne).
aussi, ma façon préférée de comprendre ce genre de question Est d'aller à un nouveau stylo dans CodePen , allumer Autoprefixer dans les paramètres CSS, coller mon code dedans, et le compiler. Autoprefixer ajoute automatiquement des préfixes pour les deux premiers de chaque navigateur. Un peu magique!
en fin de compte, il est stupide de faire votre chargement de page Web plus lent juste pour avoir le soutien pour les versions plus anciennes des navigateurs de mise à jour automatique. Et, pour IE, le préfixe ms pour les animations n'est utilisé que dans les versions pré-release. Donc, tout ce dont toute personne raisonnable a besoin est juste un support pour webkiting transform pour Safari.
transition: transform .3s ease-in-out;
/*you can put -webkit-transform below, but that will only waste space*/
transition: -webkit-transform .3s ease-in-out;
transform: rotateX(-30deg);
-webkit-transform: rotateX(-30deg);
Et Voilà: il a même IE et de la compatibilité d'avoir tous ces lourds préfixes, tout en maintenant le support pour la version la plus récente de la mise à jour automatique des navigateurs. Si vous pensez vraiment qu'il est nécessaire d'apporter un soutien à cela .001% des gens qui continuent à retarder les mises à jour de leur navigateur, puis il suffit de mettre un petit message au bas de l'écran qui dit à l'utilisateur de cliquer sur le bouton de mise à jour dans leur navigateur si la page ne s'affiche pas correctement.