Какая правильная комбинация префиксов для переходов и преобразований CSS?

Каким будет правильный префикс этого CSS, чтобы охватить самый широкий диапазон браузеров и версий?

Мне кажется, что при использовании префиксов поставщиков в свойстве перехода я также должен настроить таргетинг на атрибут prefixed поставщика, который я хочу перейти.

Ответы

Ответ 1

Как я упоминал в очень похожем вопросе...

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

Какой глоток. И тогда вам придется комбинировать различные перестановки. Какая горстка.

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

Связанный вопрос относится к анимации, а не к переходам, что приводит к значительно различным обозначениям, но обе функции прошли через аналогичные процессы, не связанные с расширением AFAIK. При этом здесь приведены таблицы совместимости с caniuse.com для 2D-преобразования и transitions.

Другими словами, только потому, что одна функция имеет префикс в одной версии одного браузера, это не означает, что другая функция обязательно также имеет префикс в той же версии того же браузера. Например, Chrome unprefixed переводит не менее десяти основных версий (26), прежде чем он будет префиксными преобразованиями (36), а Safari по-прежнему требует префиксов для преобразований. В результате вы обязательно должны будете иметь это объявление:

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

И если вам это абсолютно необходимо, вам придется покрыть еще более старые версии следующим образом:

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

Другие браузеры, чудом, смогли одновременно обезопасить как переходы, так и преобразования (а также анимации), что делает вещи намного проще:

-ms-transition используется только в предварительных версиях IE10, которые уже давно истекли. Ни одна другая версия IE не использует префиксные переходы, поэтому вы должны удалить этот префикс перехода.

-ms-transform с префиксом используется только IE9; IE10 и более поздние корабли с непредусмотренными преобразованиями. Но в целях изящного деградации вы можете сохранить свою декларацию -ms-transform: rotateX(-30deg); - просто имейте в виду, что она не может быть преобразована, поскольку IE9 не поддерживает переходы или анимации CSS.
-moz-transition и -moz-transform были использованы Firefox до 15 включительно, а затем не были вставлены в 16.
-o-transition и -o-transform использовались Opera до 12.00, включая 12.00, а затем префикс в качестве -webkit- в более поздних версиях при переходе к Blink.

Вкратце, вот все префиксы, которые вам нужны, на основе информации, предоставленной caniuse.com(которой я доверяю, чтобы быть точной и точной по большей части):

-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);

Голый минимум, который вам потребуется для поддержки последней версии каждого браузера на момент написания этой статьи:

        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);

Как упоминалось в комментариях, вы можете использовать такой инструмент, как Autoprefixer, чтобы автоматизировать его для вас на основе уровня поддержки браузера вам нужно. Тем не менее, для тех, кто предпочитает писать свои CSS вручную, или для тех, кто просто задается вопросом, какие префиксы необходимы для браузеров, это он.

В заключительном примечании: обратите внимание на две нефиксированные объявления transition в приведенных выше примерах? Теперь вы могли бы подумать, что было бы достаточно просто объединить их в одно объявление вроде этого:

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

Но, к сожалению, Chrome ошибочно полностью проигнорирует это объявление, в то время как другие браузеры будут применять его просто отлично.

Ответ 2

Как сейчас, если вы поддерживаете две самые последние версии каждого браузера, вот префиксы, которые вам нужны:

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

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);

Итак, чтобы ответить на ваш вопрос, да, префикс-переход должен быть нацелен на префикс-преобразование. Довольно уверен, что это всегда верно для преобразований (хотя и не обязательно для других свойств. Flexbox и градиенты могут быть сложными префиксами, я предлагаю вам использовать Autoprefixer, чтобы сохранить эти правила прямо).

Кроме того, мой любимый способ выяснить этот вопрос - перейти к новому Pen в CodePen, включить Autoprefixer в настройки CSS, вставить мой код и скомпилировать его. Autoprefixer автоматически добавляет префиксы для двух ведущих браузеров. Kinda волшебный!

Ответ 3

В конечном счете, глупо сделать загрузку своей веб-страницы медленнее только для поддержки более старых версий автоматического обновления браузеров. И, для IE, префикс ms для анимаций используется только в предварительных версиях. Таким образом, все разумные потребности человека - это просто поддержка преобразования webkiting для 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);

И Voilà: он имеет ту же совместимость с IE, что и все эти тяжелые префиксы, поддерживая поддержку последней версии браузеров с автоматическим обновлением. ЕСЛИ вы действительно чувствуете, что необходимо предоставить поддержку этому .001% людей, которые продолжают откладывать свои обновления браузера, а затем просто поместите небольшое сообщение в нижней части экрана, в котором пользователю предлагается щелкнуть кнопку обновления в своем браузере, если страница не отображается должным образом.