web-dev-qa-db-fra.com

CSS 3 - préfixes de transition - lesquels utiliser?

J'ai une question concernant les préfixes de fournisseur CSS pour la transition.

Cette source indique que "vous devez utiliser tous les préfixes habituels pour que cela fonctionne dans tous les navigateurs (-o-, -webkit-, -moz-, -ms-)".

Cette page affiche uniquement les préfixes -webkit- et -moz- et affirme que IE 10+, FF 16+ et Opera 12.1+ peuvent lire la version gratuite du préfixe.

Dans le code de Twitter Bootstrap, il existe toujours une version avec le préfixe -webkit-, -moz- et -o- en plus de la version sans préfixe.

Quels préfixes dois-je utiliser? 

csscss3css-transitionstransitions
14
Sven

http://caniuse.com/#search=transition indique que vous avez besoin des propriétés -webkit- et plain pour les navigateurs modernes.

-webkit-transition: all .5s ease;
transition: all .5s ease;

Mais ce ne sera pas un problème si vous les ajoutez tous, assurez-vous simplement que la propriété sans préfixe est la dernière.

Edit: comme indiqué dans le commentaire ci-dessous, si vous cliquez sur "Toutes les versions", vous pouvez voir quand chaque navigateur a supprimé le préfixe. Pour le moment, il vaut mieux utiliser -moz- et -o- aussi.

Edit May 2015: Je recommande fortement d'utiliser Autoprefixer comme étape de votre processus de construction (comme la tâche Gulp/Grunt) ou comme plug-in pour votre éditeur de code. Il fournit un préfixe automatique sur les statistiques de support du navigateur caniuse.com.

28
antejan

Edit: Vous ne devriez plus avoir besoin de préfixes.

Il suffit d'utiliser transition.

À partir de maintenant, tous les préfixes de fournisseur doivent être utilisés pour les transitions CSS3. Par exemple,

-webkit-transition: all 500ms;
   -moz-transition: all 500ms;
     -o-transition: all 500ms;
        transition: all 500ms;
12
Mooseman

Faites-vous une faveur et téléchargez Prefix Free . C'est un code JavaScript minuscule qui vous permet d'utiliser à peu près n'importe quelle propriété nécessitant un préfixe, sans préfixe (y compris les transitions, les animations et les requêtes multimédias).

EDIT: La seule exception à cette règle concerne les requêtes de média pour Opera, dans lesquelles le rapport de pixels (et rien d’autre) doit être exprimé sous forme de fraction plutôt que décimale.

0
Jules

Cela dépend de la propriété CSS que vous souhaitez utiliser. Mozilla fait un bon travail pour se débarrasser des préfixes de nombreuses propriétés. Mais vous ne pouvez pas dire tous les propriétés sont maintenant sans préfixe. J'entends des nouvelles de l'équipe Chrome qui souhaite créer des dégradés sans préfixe. Je ne connais pas Opera, mais Internet Explorer 10 requiert le préfixe -ms pour de nombreuses propriétés CSS3. 

Je dirais que pour aujourd'hui, vous devriez juste ajouter des préfixes. Mais l'avenir ne sera pas comme ça!

0
Mohsen

-webkit- seulement, avec la version non préfixée, bien sûr.

Tous les autres navigateurs déplacés avec des propriétés sans préfixe (comme Firefox ou Opera), ou ne les ont jamais utilisés (comme IE)

Je recommande de consulter régulièrement CanIUse.com pour obtenir les informations les plus récentes.

http://caniuse.com/#feat=css-transitions

0
Evgeny

Je vais à contre-courant et suggérer une approche différente: si vous avez un site Web configuré pour l'analyse, vérifiez les statistiques et les versions du navigateur et voyez ce que vos utilisateurs utilisent réellement. 

Bien sûr, vous pouvez supprimer la majorité des préfixes, mais si vos utilisateurs utilisent des navigateurs obsolètes (pour une raison quelconque), ils n’obtiendront pas les fonctionnalités. 

Aucun site Web arbitraire ne peut dire vous les préfixes exacts vous devez, vous seul pouvez comprendre cette information à partir de vos propres données.

Si vous ne disposez pas des données, ajoutez tous les préfixes pour prendre en charge autant de personnes que possible. Ensuite, vérifiez les données dans quelques mois et refactorisez-le si nécessaire.

0
Christian Varga