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
Я пойду против зерна здесь и предлагаю другой подход: если у вас есть сайт, настроенный с аналитикой, проверьте статистику и версии браузера и посмотрите, что на самом деле используют ваши пользователи.
Конечно, вы можете отказаться от большинства префиксов, но если ваши пользователи устарели от браузеров (по какой-то причине), они не получат функции.
Никакой произвольный веб-сайт не может указать вам точные префиксы, которые вам нужны, только вы можете узнать эту информацию из своих собственных данных.
Если у вас нет данных, добавьте все префиксы, чтобы поддерживать как можно больше людей. Затем проверьте данные за несколько месяцев и рефакторинг, если вам нужно.