为什么css命令在浏览器中有所不同

时间:2013-03-01 09:56:21

标签: css3

我最近一直在检查 css3命令为什么每个浏览器中有些不同?

例如,请查看this 2D transform example

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
} 

如果所有人都接受相同的论点,他们为什么会让他们不同?他们处于某种β阶段吗? 他们会不会相同(在测试阶段之后)?

如果您考虑this animation example

,那就非常不切实际
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
} 

2 个答案:

答案 0 :(得分:1)

事实上,他们并不总是接受相同的参数或以相同的方式行事。

也就是说,为什么它们会被加上前缀,直到有一些标准或共同的理解这个属性应该如何表现以及它的语法应该是什么样子。

其中一些属性只是实验性的。浏览器供应商有一个很酷的新想法,并将其添加到其浏览器中。经过一段时间,其他浏览器供应商可能会提起并且还有一段时间之后,这个功能将会有一个标准。

大多数时候,在某些浏览器版本之后,这些前缀会被删除,因此您可以使用标准版本。请参阅example border-radius:在开始时有一个前缀-moz--webkit-,但在属性定义稳定后,前缀被删除,现在您可以使用未加前缀的版本。

答案 1 :(得分:1)

回答这个问题 - 是的,他们通常表示测试版的实施。一旦特定属性被标准化并且浏览器供应商添加了ant prefixed版本,他们通常将带前缀的版本保留为别名并在以后弃用它。此外,是的,一旦标准化,行为应该是相同的(除非出现意外的错误!)

特定于CSS供应商的扩展是specification的一部分。浏览器供应商使用它们向浏览器添加未批准或非标准化的CSS功能。我们的理解是,每个浏览器的功能可能会有所不同,并且当未加前缀的规则标准化时,它可能不是最终的功能。

CSS供应商前缀为not well liked,但有一些useful approaches以更清晰的方式处理它们,避免了您突出显示的问题。