CSS 3 - переходные префиксы - какие из них использовать?

У меня вопрос о префиксах поставщика CSS для перехода.

В этом источнике говорится, что "вам нужно использовать все обычные префиксы, чтобы сделать эту работу во всех браузерах (-o-, -webkit-, -moz-, -ms -)".

Эта страница показывает только префиксы -webkit- и -moz- и утверждает, что IE 10+, FF 16+ и Opera 12.1+ могут читать префикс бесплатной версии.

В коде Bootstrap Twitter всегда существует префиксная версия -webkit-, -moz- и -o- в дополнение к не префиксной версии.

Какие префиксы следует использовать?

Ответ 1

http://caniuse.com/#search=transition говорит, что вам нужно -webkit- и обычное свойство для современных браузеров.

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

Но если вы добавите их все, проблем не будет, просто убедитесь, что свойство без префикса является последним.

Отредактируйте:, как сказано в комментарии ниже, если вы нажмете "Все версии", вы увидите, когда у каждого браузера пропал префикс. На данный момент лучше использовать также -moz- и -o-.

Изменить май 2015 года: Я настоятельно рекомендую использовать Autoprefixer в качестве шага процесса сборки (например, задачи Gulp/Grunt) или в качестве плагина для редактора кода. Он обеспечивает автоматический префикс в статистике поддержки браузера caniuse.com.

Изменить 2019 год: Нет необходимости в префиксах и все меньше и меньше в Autoprefixer, будущее приятно :)

Ответ 2

Изменение: вам больше не нужны префиксы.

Просто используйте `transition`.

На данный момент все префиксы вендоров должны использоваться для переходов CSS3. Например,

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

Ответ 3

Это зависит от того, какое свойство CSS вы хотите использовать. Mozilla отлично справляется с тем, чтобы избавиться от префиксов для многих свойств. Но вы не можете сказать, что все свойства теперь являются префиксом бесплатно. Я слышал новости от команды Chrome, что они хотят сделать градиенты без префикса. Я не знаю об Opera, но для Internet Explorer 10 требуется префикс -ms для многих свойств CSS3.

Я бы сказал, что на сегодня вы должны просто добавить префиксы. Но будущее не будет таким!

Ответ 4

Сделайте себе одолжение и скачайте Префикс Бесплатно. Это миниатюрный JavaScript, который позволяет пользователю почти любое свойство, требующее префикса, без префикса (включая переходы, анимации и медиа-запросы).

EDIT: Единственное исключение для всего этого - медиа-запросы для Opera, где отношение пикселей (и ничего больше) должно быть выражено как дробная, а не десятичная.

Ответ 5

-webkit-only, наряду с непревзойденной версией, конечно.

Все другие браузеры либо перемещались с помощью свойств без префикса (например, Firefox или Opera), либо никогда не использовали их (например, IE)

Я рекомендую регулярно проверять CanIUse.com для получения самой свежей информации.

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

Ответ 6

Я пойду против зерна здесь и предлагаю другой подход: если у вас есть сайт, настроенный с аналитикой, проверьте статистику и версии браузера и посмотрите, что на самом деле используют ваши пользователи.

Конечно, вы можете отказаться от большинства префиксов, но если ваши пользователи устарели от браузеров (по какой-то причине), они не получат функции.

Никакой произвольный веб-сайт не может указать вам точные префиксы, которые вам нужны, только вы можете узнать эту информацию из своих собственных данных.

Если у вас нет данных, добавьте все префиксы, чтобы поддерживать как можно больше людей. Затем проверьте данные за несколько месяцев и рефакторинг, если вам нужно.