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

Я попытался использовать 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 работают в некоторых браузерах и недействительны в других?

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

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

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

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

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

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

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

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

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

Переходы

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

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

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

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

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

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

Анимации

Анимации должны иметь свойство 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: ; -moz-box-flex: ; -webkit-flex: ; -ms-flex: ; flex: ; } 

Calc

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

Градиенты

См. CSS Gradients в CSS-Tricks для получения дополнительной информации.

 .foo { background-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(), to()); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */ background-image: -webkit-linear-gradient(left, , ); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background-image: -moz-linear-gradient(left, , ); /* Firefox 3.6 - 15 */ background-image: -o-linear-gradient(left, , ); /* Opera 11.1 - 12 */ background-image: linear-gradient(to right, , ); /* 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: ; /* or iOS 3.2 */ -moz-border-radius: ; /* Firefox 3.6 and lower */ border-radius: ; } 

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

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

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

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

 foo.style.webkitAnimation = ''; foo.style.mozAnimation = ''; foo.style.oAnimation = ''; 

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

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

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

  • Префикс свойств SASS & SCSS
  • Префикс свойств LESS

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

  • -prefix-free для свойств и значений CSS
  • Префикс события

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

Давайте будем гением компьютера.