Почему функция [CSS] работает в [браузере], а работает в других?

Я попытался использовать transition в Firefox 15, и он не работал, даже если он работал с другими версиями Firefox и другими браузерами, такими как Chrome и Safari.

Когда я просматриваю свойства с помощью инспектора Firefox, transition пробивается и выдает ошибку "Недопустимое значение свойства". MDN и caniuse говорят, что он поддерживается в Firefox 4 и выше!

#mydiv {
    transition: width 1s; /* Did I do this wrong? */
    background: #f00;
    width: 100px; height: 100px;
}
#mydiv:hover { width: 200px }

Почему в некоторых браузерах такие свойства, как transition и animation, работают некорректно?

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

ОТВЕТЫ

Ответ 1

Хотя это не всегда так, одна из наиболее распространенных причин, по которым свойство, подобное transition или animation, работает в некоторых браузерах, а не в других, связано с префиксами поставщика.

Что такое префиксы поставщика?

В то время, когда была введена версия 4 Firefox, спецификацией модуля перехода CSS был рабочий проект. Прежде чем спецификация будет завершена (на практике это будет достигнуто в Рекомендации кандидата), поставщики браузеров добавят префиксы поставщика к свойствам, значениям и @-rules, чтобы предотвратить проблемы совместимости в случае изменения спецификации.

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

Наиболее распространенными являются -moz- (Mozilla Firefox), -webkit- (Chrome, Safari и т.д.) и -ms- (Microsoft Internet Explorer), но больше.

Когда мне нужно их использовать?

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

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

Переходы

Непрерывное свойство иногда имеет префиксные эквиваленты, такие как -webkit-transition.

Чтобы получить полную поддержку браузера, необходимо следующее:

.foo {
    -webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
    -moz-transition: <transition shorthand value>;    /* Firefox 4-15 */
    -o-transition: <transition shorthand value>;      /* Old opera */
    transition: <transition shorthand value>;         /* Modern browsers */
}

Обратите внимание, что префикс -ms- существует для transition, однако он был реализован только в версиях IE версии до выпуска, которые больше не являются функциональными, и поэтому они никогда не нужны. Он реализован без изменений в RTM и более поздних версиях IE10.

Трансформация

.foo {
    -webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
    -ms-transform: <transform-list>;     /* IE9 */
    transform: <transform-list>;
}

Анимации

Анимации должны иметь свойство prefixed и соответствующие префиксы ключевых кадров, например:

.foo {
  -webkit-animation: bar; /* Safari 4+ */
  -moz-animation: bar;    /* Fx 5+ */
  -o-animation: bar;      /* Opera 12+ */
  animation: bar;         /* IE 10+, Fx 16+ */
}

@-webkit-keyframes bar { /* Keyframes syntax */ }
@-moz-keyframes bar { /* Keyframes syntax */ }
@-o-keyframes bar { /* Keyframes syntax */ }
@keyframes bar { /* Keyframes syntax */ }

Flexbox

Значения также могут быть префиксами, как в случае flexbox. Примечание. Для максимальной совместимости с браузером в некоторых браузерах необходимо префикс -специфические свойства, такие как ordinal-group, flex-flow, flex-direction, order, box-orient и т.д. в дополнение к следующему:

.foo {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: <flex shorthand value>;
    -moz-box-flex: <flex shorthand value>;
    -webkit-flex: <flex shorthand value>;
    -ms-flex: <flex shorthand value>;
    flex: <flex shorthand value>;
}

Calc

.foo {
    width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
    width: -moz-calc(<mathematical expression>);    /* Firefox <16 */
    width: calc(<mathematical expression>);         /* Modern browsers */
}

Градиенты

Для получения дополнительной информации см. CSS Gradients в CSS-трюках.

.foo {
    background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
    background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */  
    background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */  
    background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */  
    background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
    background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
    background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}

Обратите внимание, что left и to right представляют одно и то же направление, слева направо и, следовательно, left и to left указывают противоположные пути. См. этот ответ для получения некоторой справочной информации.

Пограничный радиус (не требуется в большинстве случаев)

.foo {
    -webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
    -moz-border-radius: <length | percentage>;    /* Firefox 3.6 and lower */
    border-radius: <length | percentage>;
}

Тень коробки (в большинстве случаев не требуется)

.foo {
    -webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
    -moz-box-shadow: <box-shadow shorthand value>;    /* Firefox 3.6 and lower */
    box-shadow: <box-shadow shorthand value>;
}

Как они могут быть реализованы с помощью JavaScript?

Чтобы получить доступ к префиксным атрибутам и событиям в JavaScript, используйте camelCase эквивалент префикса CSS. Это справедливо и для прослушивателей событий, таких как foo.addEventListener('webkitAnimationIteration', bar ) (foo, являющийся объектом DOM, например document.getElementsById('foo')).

foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';

Инструменты префикса

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

Функции предварительного процессора CSS:

Функции префиксора JavaScript:

См. также: Почему браузеры создают префиксы поставщиков для свойств CSS?