为什么[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工作在一些浏览器,并在其他无效？

免责声明:这是通过添加供应商前缀可以完全解决的所有问题的规范复制品.Stack Overflow问题不应该如此宽泛,除非在meta上讨论并且之后创建的规范答案就像这样.

Answer 1

虽然情况并非总是如此,但是在某些浏览器上而不是其他浏览器上属于transition或animation工作的最常见原因之一是供应商前缀.

什么是供应商前缀？

在引入Firefox的第4版时,CSS转换模块规范是一个工作草案.在规范最终确定之前(实际上,这是它达到候选推荐标准时),浏览器供应商会在属性,值和@ -rules中添加供应商前缀,以防止在规范发生变化时出现兼容性问题.

供应商前缀正是其名称所描述的 - 特定于供应商(供应商意味着开发浏览器的公司)属性或值的前缀.它们通常以特定的方式为每个浏览器实现,因为属性或值仍处于候选推荐阶段之前的许多实验阶段之一,这是它们被认为是实现就绪的阶段.

最常见的是-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,等需要在某些浏览器添加前缀,除了以下几点:

.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 -Tricks上的CSS Gradients.

.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中访问带前缀的属性和事件,请使用与CSS前缀等效的camelCase.对于像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属性前缀
• LESS属性前缀

JavaScript前缀函数:

• -prefix-free用于CSS属性和值
• 事件前缀

另请参阅: 为什么浏览器会为CSS属性创建供应商前缀？