web-dev-qa-db-fra.com

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

Quelle serait la bonne façon de préfixer ce CSS afin de couvrir la plus large gamme 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 de préfixes de fournisseur sur une propriété de transition, je devrais également cibler l'attribut de préfixe de fournisseur que je souhaite transférer.

Je ne trouve pas vraiment de clôture à cela.

csscss3css-transitionscss-transformsvendor-prefix
20
Jabba Da Hoot

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

C'est l'un des cas où les préfixes de fournisseur pour les fonctionnalités normalisées deviennent extrêmement / problématiques, car vous devez tenir compte de toutes les implémentations préfixées et/ou non préfixées de différentes fonctionnalités dans différentes versions de différents navigateurs.

Quelle bouchée. Et puis vous devez combiner diverses permutations de celles-ci. Qu'est-ce qu'un poignée .

En bref, vous devez déterminer quelles versions de chaque navigateur requièrent un préfixe pour chacune des propriétés. À moins que cela ne vous gêne pas, vous devrez appliquer les préfixes différemment pour chaque navigateur.

La question liée fait référence à des animations plutôt qu'à des transitions, ce qui entraîne des notations très différentes, mais les deux fonctionnalités ont subi le même processus de non-préfixage, selon les critères AFAIK. Cela étant dit, voici les tableaux de compatibilité de caniuse.com pour transformations 2D _ et transitions .

En d'autres termes, ce n'est pas parce qu'une fonctionnalité est préfixée dans une version d'un navigateur que l'autre fonctionnalité est nécessairement également préfixée dans la même version du même navigateur. Par exemple, Chrome sans préfixe transite au moins dix versions principales (26) avant de se transformer sans préfixe (36) et Safari still requiert 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 des versions encore plus anciennes avec les éléments suivants:

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

Miraculeusement, d'autres navigateurs ont pu supprimer simultanément les transitions et les transformations (ainsi que les animations), ce qui facilite grandement les choses:

  • -ms-transition n'est utilisé que par les versions préliminaires d'IE10, qui ont expiré depuis longtemps. Aucune autre version de IE n'utilise de transitions préfixées. Vous devez donc supprimer ce préfixe de transition particulier.

    -ms-transform avec le préfixe n'est utilisé que par IE9; IE10 et versions ultérieures sont livrées avec des transformations non préfixées. Toutefois, pour les besoins de la dégradation progressive, vous voudrez peut-être conserver votre déclaration -ms-transform: rotateX(-30deg);; gardez simplement à l'esprit qu'elle ne peut pas être modifiée, IE9 ne prenant pas en charge les transitions ni les animations CSS.

  • -moz-transition et -moz-transform ont été utilisés par Firefox jusqu'à 15 inclus, puis sans préfixe dans 16.

  • -o-transition et -o-transform ont été utilisés par Opera jusqu’à 12.00 inclus, puis non préfixés en 12.10, puis préfixés en tant que -webkit- dans les versions ultérieures lors de son transfert vers Blink.

En résumé, voici tous les préfixes dont vous avez besoin, en fonction des informations fournies par caniuse.com (que je suis sûr d'être à jour et exacts 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 minimum dont vous aurez besoin pour prendre en charge la dernière version de chaque navigateur au moment de la rédaction de cet article est le suivant:

        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 tel que Autoprefixer pour automatiser cette opération en fonction du niveau de prise en charge du navigateur requis. Cependant, pour ceux qui préfèrent écrire leur CSS manuellement, ou pour ceux qui se demandent simplement quels préfixes sont nécessaires pour quels navigateurs, voici le résultat.

Sur une note finale: notez les deux déclarations transition non préfixées dans les exemples ci-dessus? Maintenant, vous penseriez qu'il serait assez facile de simplement les combiner en une seule déclaration comme celle-ci:

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

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

20
BoltClock

Pour le moment, si vous prenez en charge 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, la préfixe-transition devrait cibler le préfixe-transformation. Cela est toujours vrai pour les transformations (mais pas nécessairement pour les autres propriétés. Flexbox et Gradients peuvent être complexes au niveau des préfixes, je vous suggère d'utiliser préfixe automatique pour conserver ces règles droites).

En outre, ma façon préférée de résoudre ce type de question consiste à accéder à un nouveau stylo dans CodePen , à activer le préfixe automatique dans les paramètres CSS, à coller mon code et à le compiler. Autoprefixer ajoute automatiquement des préfixes pour les deux premiers de chaque navigateur. Un peu magique!

2
Timothy Miller

En fin de compte, il est ridicule de ralentir le chargement de votre page Web pour pouvoir prendre en charge les anciennes versions des navigateurs à mise à jour automatique. Et, pour IE, le préfixe ms pour les animations est utilisé uniquement dans les versions préliminaires. Ainsi, tout ce dont une personne raisonnable a besoin n’est que l’assistance pour la transformation de Webkiting 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à: la compatibilité IE est identique à celle de tous ces préfixes lourds tout en maintenant la prise en charge de la dernière version des navigateurs à mise à jour automatique. SI vous pensez vraiment qu'il est nécessaire de fournir une assistance à .001% des personnes qui retardent continuellement les mises à jour de leur navigateur, placez simplement un petit message en bas de l'écran qui indique à l'utilisateur de cliquer sur le bouton de mise à jour de son navigateur si la page ne s'affiche pas correctement.

0
Jack Giffin