it-swarm.com.ru

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

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

Версия 1: 

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

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

Или версия 2: 

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

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

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

Я не могу найти какое-либо завершение этого.

20
Jabba Da Hoot

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

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

Что за глоток. И затем вы должны объединить различные их сочетания. Что за горстка.

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

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

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

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.10, а затем с префиксом -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 по ошибке полностью проигнорирует это объявление , в то время как другие браузеры будут применять его просто отлично.

20
BoltClock

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

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

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

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

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

2
Timothy Miller

В конечном счете, глупо замедлять загрузку вашей веб-страницы только из-за поддержки старых версий автообновляемых браузеров. А для IE префикс ms для анимации используется только в предварительных версиях. Таким образом, все, что нужно любому разумному человеку, - это просто поддержка преобразования веб-сайтов в 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 совместимость, как и у всех этих тяжелых префиксов, при этом поддерживается поддержка последней версии автообновляемых браузеров. Если вы действительно чувствуете, что вам необходимо поддержать тех 0,001% людей, которые продолжают откладывать обновления своего браузера, просто поместите небольшое сообщение в нижней части экрана, в котором пользователю предлагается нажать кнопку обновления в своем браузере, если страница не отображается должным образом.

0
Jack Giffin