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

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

Cette source stipule que "vous avez besoin d'utiliser tous les préfixes pour que cela fonctionne dans tous les navigateurs (-o-, -webkit-, -moz-, -ms-)".

Cette page ne montre que les -webkit- et -moz- les préfixes et les revendications qu'IE 10+, FF 16+ et Opera 12.1+ peut lire le préfixe version gratuite.

Dans le code de Twitter Bootstrap, il y a toujours existe un -webkit--moz- et -o- préfixé version en plus de l'onu précédé version.

Ce que les préfixes dois-je utiliser?

source d'informationauteur Sven

  1. 27

    http://caniuse.com/#search=transition dit que vous avez besoin -webkit - et la plaine de la propriété pour les navigateurs modernes.

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

    Mais il aura pas de problème si vous les ajouter, juste être sûr que la propriété sans le préfixe est le dernier.

    Edit: comme dit dans un commentaire ci-dessous, si vous cliquez sur "Toutes les versions" vous pouvez voir quand chaque navigateur a chuté de préfixe. Pour l'instant, il est préférable d'utiliser -moz - et -o - aussi.

    Edition Mai 2015: je recommande fortement l'utilisation Autoprefixer comme étape de votre processus de création (comme Gulp/Grunt tâche) ou en tant que plugin dans votre éditeur de code. Il permet de façon automatique sur la préfixation caniuse.com prise en charge du navigateur stats.

  2. 9

    À compter de maintenant, tous les fournisseurs de préfixes 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;
  3. 0

    Faites-vous une faveur et de les télécharger Préfixe Gratuit. C'est un minuscule JavaScript qui vous permet d'utilisateur pratiquement n'importe quel préfixe-exiger de la propriété, sans préfixe (y compris des transitions, des animations, et des requêtes de média).

    EDIT: La seule exception à tout cela, c'est les media queries pour l'Opéra, où le ratio de pixel (et rien d'autre) doit être exprimée comme une fraction plutôt que de décimal.

  4. 0

    Cela dépend de la propriété CSS que vous souhaitez utiliser. Mozilla est en train de faire un bon travail de se débarrasser de préfixes pour de nombreuses propriétés. Mais vous ne pouvez pas dire tous propriétés sont maintenant préfixe gratuit. J'entends des nouvelles de Chrome de l'équipe qu'ils veulent faire des dégradés prefix-free. Je ne sais pas à propos de l'Opéra, mais Internet Explorer 10 exige -ms préfixe pour de nombreuses propriétés CSS3.

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

  5. 0

    -webkit - seulement, avec unprefixed version, bien sûr.

    Tous les autres navigateurs soit déplacé avec prefix-free propriétés (comme Firefox ou Opera), ou jamais utilisé (IE)

    Je vous recommandons de vérifier CanIUse.com régulièrement pour les plus up-to-date information.

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

  6. 0

    Je vais aller à contre-courant ici et de proposer une approche différente: si vous avez un site web mis en place avec google analytics, consultez le navigateur stats et versions et voir ce que vos utilisateurs sont en train d'utiliser.

    Sûr, vous pouvez déposer la majorité des préfixes, mais si vos utilisateurs sont sur les navigateurs obsolètes (pour quelque raison que ce soit), ils ne seront pas les caractéristiques.

    Pas arbitraire site web peut dire vous exactement les préfixes vous besoin, vous seul pouvez comprendre que des informations à partir de vos propres données.

    Si vous n'avez pas les données, ajouter tous les préfixes de soutenir le plus grand nombre possible de personnes. Ensuite, vérifiez les données dans quelques mois et refactoriser si vous en avez besoin.