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

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

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

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

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

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

преобразование

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

анимации

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

.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. Примечание: для максимальной совместимости браузера, Flexbox-специфические свойства, такие как ordinal-group, flex-flow, flex-direction, order, box-orient, etc. необходимо иметь префикс в некоторых браузерах к следующий:

.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 градиенты на 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 точка напротив способами. См.ответ кое-какая информация.

Border-radius (не требуется в большинстве дела)

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

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

.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>';

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

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

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

• префикс свойств Sass & SCSS
• меньше свойства prefixer

в JavaScript prefixer функции:

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

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