css - 为什么 [CSS 功能] 在 [浏览器] 中不起作用但在其他浏览器中起作用？

Question

我尝试使用 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在某些浏览器中工作而在其他浏览器中无效？

Disclaimer: This is the canonical duplicate for all questions solvable completely by adding vendor prefixes. Stack Overflow questions should not be this broad unless discussed on meta and a canonical answer created thereafter like this one was.

Answer 1

虽然情况并非总是如此，但这是为什么像 transition 这样的属性的最常见原因之一。或 animation在某些浏览器上工作而不在其他浏览器上工作是因为 供应商前缀 .

什么是供应商前缀？

在 Firefox 版本 4 推出时，CSS 转换模块规范是一个工作草案。在规范最终确定之前(实际上，这是达到候选推荐标准的时间)，浏览器供应商添加 供应商前缀 属性、值和 @-rules 以防止在规范更改时出现兼容性问题。

供应商前缀正是其名称所描述的 - 特定于供应商(供应商意味着开发浏览器的公司)的属性或值的前缀。它们通常针对每个浏览器以特定方式实现，因为属性或值仍处于候选推荐阶段之前的众多实验阶段之一，即 the stage where they are considered implementation-ready .

最常见的是-moz- (Mozilla Firefox), -webkit- (Chrome、Safari 等)和 -ms- (Microsoft Internet Explorer)，但是 there are more .

我什么时候需要使用它们？

这完全取决于您要使用的浏览器、您使用的属性和值，以及您在什么时间开发网站。有网站try to keep a current list但它们并不总是准确或保持最新状态。

以下是一些最常用的前缀属性和值。如果您的元素不支持该属性右侧注释中提到的浏览器，则无需将其包含在您的 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 */ }

flex 盒

值也可以带有前缀，例如 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>;
}

计算器

.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-Tricks 上了解更多信息。

.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指向相反的方向。见 this answer一些背景信息。

边界半径(大多数情况下不需要)

.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 预处理器函数 :

SASS & SCSS properties prefixer

LESS properties prefixer

JavaScript 前缀函数 :

-prefix-free for CSS properties and values

Event prefixer

另见: Why do browsers create vendor prefixes for CSS properties?